12

当たり前のことを知らないという単純なケースであるとお詫びしますが、太平洋を中心としたメルカトル図法で世界地図（TopoJSONファイルからのデータ）を表示するページをまとめようとしています。つまり、左側がヨーロッパ、右側がアメリカ、中央がオーストラリアです。このような少し...

太平洋中心の世界

この時点から、マップをズームして自分の心の望みに合わせてパンできるようにしたいのですが、東または西にパンするときは、マップを「周り」にスクロールして、世界の終わりに到達しないようにします（検出）。

私が現在取り組んでいるコードは、ここ（または次の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」要素内のマップではありません。

子午線を中心に地図をパンおよびズームできる良い例はたくさんあります。しかし、私が発見した反子午線については何もありません。

どんな助けでも大歓迎です。

4

3 に答える 3

12

私は同じ問題に取り組むことになった。これが例（コードを参照）で、左右にパンして投影を回転させ（ラップアラウンドあり）、上下にパンして平行移動（最大絶対緯度でクランプ）し、ズームも行います。投影が常にビューボックス内に収まるようにします。

ズームの動作、および投影のcenter（）とrotate（）の相互作用について多くのことを学びました。

于 2013-09-19T11:45:54.203 に答える
0

このコードがあなたの問題を解決できることを願っています

    var projection = d3.geo.equirectangular()
    .center([0, 5])
    .scale(90)
    .translate([width / 2, height / 2])
    .rotate([0, 0])
    .precision(9);
于 2013-11-28T07:49:42.127 に答える
-2

アップル製品のGoogleマップはこのように機能します。スクロールが去ると、オーストラリアを離れて、別のオーストラリアを見つけます。

于 2013-05-18T02:17:24.760 に答える