使用d3.js缩放和平移墨西哥地图以太平洋为中心 [英] Zooming and Panning a Mercator Map centered on the Pacific using d3.js
问题描述
抱歉，如果这是一个简单的情况下，我是盲目的显而易见的，但我试图把一个页面，显示一个世界地图（数据源自一个TopoJSON文件）在墨卡托投影中心在太平洋。也就是说欧洲在左边，美国在右边和澳大利亚在中间。有点像这样...
Apologies if this is a simple case of me being blind to the obvious, but I am trying to put together a page that shows a map of the world (data sourced from a TopoJSON file) in Mercator projection centered on the Pacific. I.e. Europe on the left, America on the right and Australia in the middle. A bit like this...
从这一点上来说，我想能够缩放和平移地图到我的心欲望，但是当我向东或向西平移时，我想地图滚动（我希望这是有道理的）。
From this point I want to be able to zoom and pan the map to my hearts desire, but when I pan east or west, I want the map to scroll 'around' and not come to the end of the World (I hope that makes sense).
我目前正在编写的代码是这里（或在下面的Gist （ https://gist.github.com/d3noob/4966228 ）或封锁（ http://bl.ocks.org/d3noob/4966228 ））;
The code I am currently working on is here (or at the following Gist (https://gist.github.com/d3noob/4966228) or 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元素内的地图。
The code is an amalgam of examples and as a result I can see a map that can rotate west to east automatically, and I can pan and zoom using the mouse, but when panning and zooming, from what I can tell, I am affecting the internal "g" element and not the map within the "svg" element.
有很多很好的例子，能够平移和缩放以子午线为中心的地图。但没有一个反经络我发现。
There are plenty of good examples of being able to pan and zoom a map centered on the meridian. But none on the anti-meridian that I have discovered.
任何帮助将非常感激。
推荐答案
工作同样的问题。以下是示例（见代码），您可以向左/向右平移以旋转投影（带环绕），向上/向下平移（由最大绝对纬度夹紧）和缩放。
I ended up working on the same problem. Here's an example (see code) where you pan left/right to rotate the projection (with wraparound), and up/down to translate (clamped by max absolute latitude), with zoom as well. Ensures that projection always fits within viewbox.
我学到了很多有关缩放行为，投影中心（）和旋转（）交互的信息。
I learned a lot about zoom behavior, and projection center() and rotate() interaction.
这篇关于使用d3.js缩放和平移墨西哥地图以太平洋为中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
