从 d3-tile 检索地理坐标

Question

我正在尝试在地理平铺地图上返回 [x,y] 地理坐标。如果您查看以下jsfiddle 的控制台日志，您会发现它们出错了。我正在使用 projection.invert() 函数，我假设它从像素向后工作以返回地理坐标……我做错了什么？

这是一段试图获取坐标的代码：

function mousemoved() {
  console.log(formatLocation(projection.invert(d3.mouse(this)), d3.zoomTransform(this).k));
}

function formatLocation(p, k) {
  var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
  return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " "
       + (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
}

Answer 1

我知道的 D3-tile 示例（和您的小提琴）（包括 d3-tile 文档中的大多数示例）通常使用 1/tau 的投影比例（并且没有投影转换值），它会绘制一个像素空间内的地球。

var projection = d3.geoMercator()
    .scale(1 / tau)
    .translate([0, 0]); 

虽然投影将 3 维纬度/经度对转换为笛卡尔坐标，但 d3-zoom 会进行所有缩放和平移以填充地图尺寸。将鼠标坐标反转为长/纬度对时，必须考虑这种缩放。

因此，要获得 svg 上某个点的纬度/经度对，我们需要回溯。如果要反转缩放，首先我们需要获取鼠标坐标，然后我们可以反转投影：

var transform = d3.zoomTransform(svg.node()); // get the current zoom
var xy = transform.invert(d3.mouse(this));    
var longlat = projection.invert(xy);          

（另请参阅，this answer on transform.invert()）

这是updated fiddle。