缩放和平移墨卡托地图集中在太平洋使用d3.js(Zooming and Panning a Merc

2019-07-20 01:08发布

道歉,如果这是我正在看不清明显的一个简单的例子,但我试图建立一个页面,显示世界地图的墨卡托投影中心的太平洋(从TopoJSON文件源数据)。 即欧洲左侧,美国在中间的权利和澳大利亚。 有点像这样...

从这一点上,我希望能够进行缩放和平移地图我心中的愿望,但是当我磐东或西,我希望地图滚动“周围”,而不是走到世界(结束时,我希望这是感)。

我目前工作的代码是在这里(或在以下要点( https://gist.github.com/d3noob/4966228 )或块( 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”元素内的地图。

有很多的能够平移和缩放集中在经络的地图很好的例子。 但没有对我已经发现了反经络。

任何帮助将不胜感激。

Answer 1:

我结束了对同一个问题的工作。 这里有一个例子 ( 见代码 ),您平移旋转投影(带环绕)左/右和上/下转换(由最大绝对纬度夹紧),变焦为好。 确保投影始终视框范围内适合。

我学到了很多关于缩放行为,以及投影中心()和rotate()的相互作用。



Answer 2:

希望这个代码可以解决你的问题

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


Answer 3:

在苹果产品谷歌地图这样工作。 Scrol离开了,你会留下一个澳大利亚,然后你会发现,另一个与另一



文章来源: Zooming and Panning a Mercator Map centered on the Pacific using d3.js
标签: d3.js zoom pan