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

如果这是一个简单的例子，我对这个显而易见的事物是盲目的，但我试图将显示世界地图的一个页面放在一起（数据源自TopoJSON文件）以太平洋地区为中心的墨卡托投影。即欧洲在左边，美国在右边，澳大利亚在中间。有点像这样...使用d3.js缩放和平移以太平洋为中心的墨卡托地图

The Pacific Centered World

从这个角度我希望能够进行缩放和平移地图我心中的愿望，但是当我平移向东或向西，我希望地图滚动“围绕“而不是走到世界的尽头（我希望这是有道理的）。我正在使用的代码是在这里（或在下面的Gist（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”元素中的映射。

有很多很好的例子可以平移和放大以子午线为中心的地图。但没有发现我发现的反经络。

任何帮助将不胜感激。

来源

2013-02-16 d3noob

我结束了对同样的问题的工作。这里的an example（see code）在这里你可以平移左/右旋转投影（环绕），上下旋转（最大绝对纬度），同时也可以缩放。确保投影始终适合视图框内。我学到了很多关于缩放行为，投影中心（）和旋转（）交互的知识。

来源

2013-09-19 11:45:54 patricksurry

真棒！这看起来不错。干得好，谢谢。我可以看到你有一些（对我来说）复杂的代码在那里。我将不得不花一些时间来研究它，但是，这看起来正是我想要实现的。干杯。 – d3noob 2013-09-20 17:57:25

基本技巧就是将鼠标平移分为上/下地图平移和左/右地图旋转。它实际上有点类似于[3D全球轨迹球旋转]（https://gist.github.com/patricksurry/5721459），我之前玩过。 – patricksurry 2013-09-20 22:29:07

这真的很好。感谢发布。 – 2014-03-14 22:01:02

-2

苹果产品上的谷歌地图工作是这样的。 Scrol离开了，你将离开一个澳大利亚，然后找到另一个和另一个

来源

2013-05-18 02:17:24 Anya

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

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

来源

2013-11-28 07:49:42 CyberDaemon

对不起，这个投影也存在同样的问题。上面的patriksurry提供的答案虽然做得很好。干杯 – d3noob 2013-11-29 18:18:20

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

回答

相关问题