Масштабирование и панорамирование карты Меркатора с центром в Тихом океане с использованием d3.js

Извините, если это простой случай, когда я слеп к очевидному, но я пытаюсь собрать страницу, отображающую карту мира (данные, полученные из файла TopoJSON) в проекции Меркатора, сосредоточенной на Тихоокеанском регионе. То есть Европа слева, Америка справа и Австралия посередине. Немного похоже на это...

С этой точки зрения я хочу, чтобы можно было масштабировать и панорамировать карту по желанию моих сердец, но когда я падаю на восток или на запад, я хочу, чтобы карта прокручивала "вокруг" и не доходила до конца Мира (I надеюсь, что имеет смысл).

Код, в котором я сейчас работаю, находится здесь (или в следующем Gist (https://gist.github.com/d3noob/4966228) или 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".

Есть много хороших примеров возможности панорамирования и масштабирования карты с центром на меридиане. Но никто из антимеридиана, который я обнаружил.

Любая помощь будет принята с благодарностью.

Ответ 1

Я закончил работу над той же проблемой. Здесь пример (см. Код), где вы просматриваете левую/справа, чтобы вращать проекцию (с помощью wraparound), и вверх/вниз для перевода (сжимается максимальной абсолютной широтой), с масштабированием. Обеспечивает, чтобы проекция всегда соответствовала области просмотра.

Я много узнал о взаимодействии с увеличением и взаимодействии проекции() и rotate().

Ответ 2

надеюсь, что этот код может решить вашу проблему.

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

Ответ 3

Карты Google на яблочных продуктах работают так. Прокрутите влево, и вы оставите одну Австралию, затем найдите другую, другую и другую