D3 Geo Tile Baselayer 偏移

Question

我正在使用 d3.geo.tile() 并且之前已经成功使用过它，但是这次瓦片层似乎没有以相同的比例绘制并转换为点层。下面的代码创建了一个可以平移和绘制的地图，但绘制了应该在地中海，在非洲的圆圈。如果我放大，它会很好地缩放图块和圆圈，就好像我的 xy 坐标关闭了，但事实并非如此。

我感觉它实际上是在绘制基础层而没有适当地偏移和缩放它，因为它应该以坐标 12,42 为中心，但这对我来说是一个很大的谜，因为这个完全相同的代码在不同的情况下也能正常工作应用。

如果有人能发现一些问题，或者只是一个提示，那会有所帮助。

function createNewMap(){
 width = 1200, height = 800;
 var tile = d3.geo.tile()
  .size([1200, 800]);

var projection = d3.geo.mercator()
  .scale((1 << 12) / 2 / Math.PI)
  .translate([width / 2, height / 2]);

var center = projection([12, 42]);

var zoom = d3.behavior.zoom()
 .scale(projection.scale() * 2 * Math.PI)
 .scaleExtent([1 << 10, 1 << 17])
 .translate([width - center[0], height - center[1]])
 .on("zoom", zoomed);

projection
 .scale(1 / 2 / Math.PI)
 .translate([0, 0]);

var svg = d3.select("#newMapId").append("svg")
 .attr("width", width)
 .attr("height", height)
 .call(zoom);

 var raster = svg.append("g");
 var vector = svg.append("g");

 vector.selectAll("g").data(dataModule.polisData).enter().append("g")
  .attr("class", "sites")
  .attr("transform", function(d) {return "translate(" + (projection([d.xcoord,d.ycoord])[0]) + "," + (projection([d.xcoord,d.ycoord])[1]) + ")scale("+(projection.scale())+")"})
  .append("circle")
  .attr("class", "sitecirc");

  zoomed();

 function zoomed() {
  var tiles = tile
   .scale(zoom.scale())
   .translate(zoom.translate())
   ();

  var image = raster
   .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")")
   .selectAll("image")
   .data(tiles, function(d) { return d; });

  image.exit()
   .remove();

  image.enter().append("image")
   .attr("xlink:href", function(d) { return "http://" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/elijahmeeks.map-zm593ocx/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
   .attr("width", 1)
   .attr("height", 1)
   .attr("x", function(d) { return d[0]; })
   .attr("y", function(d) { return d[1]; });

  vector
   .attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");

  d3.selectAll(".sitecirc")
   .attr("r", 10 / zoom.scale());

 }

Answer 1

您的代码似乎基于我更改SVG transform on zoom 的示例。如果您有复杂的几何图形，并且只想在平移或缩放时进行缩放和平移，那么更改变换是一种不错的技术——它通常比重新投影所有东西要快——但它也比changing the projection on zoom 更复杂。

如果您想更改缩放时的投影，代码不会有太大变化。本质上：

projection
    .scale(zoom.scale() / 2 / Math.PI)
    .translate(zoom.translate());

然后重新运行您的 d3.geo.path 以重新渲染。如图bl.ocks.org/9535021：

此外，如果您放大很多，修复投影和更改变换可能会导致精度问题。仅在通过避免重投影提供显着性能提升时才使用该技术的另一个原因。在这里重新投影非常便宜，因为它只是少数几个点。