使用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縮放和平移以太平洋爲中心的墨卡托地圖

回答

相關問題