使用d3.js缩放和平移以太平洋为中心的墨卡托地图

时间:2013-02-16 09:59:42

标签: d3.js zoom pan

道歉,如果这是一个简单的例子,我对显而易见的事情视而不见,但我试图整理一个页面,显示以太平洋为中心的墨卡托投影中的世界地图(来自TopoJSON文件的数据)。即欧洲在左边,美国在右边,澳大利亚在中间。有点像这样......

The Pacific Centered World

从这一点开始,我希望能够将地图缩放并平移到我心中的愿望,但是当我向东或向西平移时,我希望地图能够“绕过”并且不会到达世界尽头(我希望有道理。)

我目前正在处理的代码(或在下面的Gist(https://gist.github.com/d3noob/4966228)或block(http://bl.ocks.org/d3noob/4966228));

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {font-size:11px;}
path {
  stroke: black;
  stroke-width: 0.25px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
    velocity = .005,  
    then = Date.now() 
    height = 475;

var projection = d3.geo.mercator()
    .center([0, 0 ])
    .scale(1000);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");


d3.json("world-110m.json", function(error, topology) {
  g.selectAll("path")
    .data(topojson.object(topology, topology.objects.countries).geometries)
  .enter()
    .append("path")
    .attr("d", path)
    .style("fill","black")

  d3.timer(function() {  
    var angle = velocity * (Date.now() - then);  
    projection.rotate([angle,0,0]);  
    svg.selectAll("path")  
      .attr("d", path.projection(projection));  
  }); 

  var zoom = d3.behavior.zoom()
  .on("zoom",function() {
    g.attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")")
  });

  svg.call(zoom)

});
</script>
</body>
</html>

代码是一个混合的示例,因此我可以看到一个可以自动向西旋转的地图,我可以使用鼠标进行平移和缩放,但是当平移和缩放时,我可以告诉我,我正在影响内部“g”元素,而不是“svg”元素中的地图。

有很多很好的例子可以平移和缩放以子午线为中心的地图。但是我发现的反子午线上没有一个。

非常感谢任何帮助。

3 个答案:

答案 0 :(得分:11)

我最终解决了同样的问题。这里是an examplesee code)你向左/向右平移以旋转投影(带环绕),向上/向下平移以转换(由最大绝对纬度夹住),同时也使用缩放。确保投影始终适合视图框。

我学习了很多关于缩放行为,投影中心()和旋转()交互的知识。

答案 1 :(得分:0)

希望此代码可以解决您的问题

    var projection = d3.geo.equirectangular()
    .center([0, 5])
    .scale(90)
    .translate([width / 2, height / 2])
    .rotate([0, 0])
    .precision(9);

答案 2 :(得分:-2)

苹果产品上的谷歌地图就是这样的。向左滚动,你将离开一个澳大利亚,然后找到另一个,另一个和另一个