Question

我使用的是Leaflet 1.0.0rc3，需要使用绝对像素值来修改地图上的内容。因此，我想知道用户在像素中点击的位置，然后将其转换回LatLng坐标。我尝试使用map.unproject()，这似乎是正确的方法（unproject() Leaflet documentation）。但是，该方法产生的LatLng值与e.latlng的输出非常不同。（例如，输入LatLng (52, -1.7)和输出LatLng (84.9, -177)）。所以我一定做错了。

问题：从图层（x，y）空间到LatLng空间投影点的正确方法是什么？

这是一段代码片段（小提琴：https://jsfiddle.net/ehLr8ehk/）

// capture clicks with the map
map.on('click', function(e) {
  doStuff(e);
});

function doStuff(e) {
  console.log(e.latlng);
  // coordinates in tile space
  var x = e.layerPoint.x;
  var y = e.layerPoint.y;
  console.log([x, y]);

  // calculate point in xy space
  var pointXY = L.point(x, y);
  console.log("Point in x,y space: " + pointXY);

  // convert to lat/lng space
  var pointlatlng = map.unproject(pointXY);
  // why doesn't this match e.latlng?
  console.log("Point in lat,lng space: " + pointlatlng);
}

Answer 1

您只是使用了错误的方法。要在Leaflet中将图层点转换为LatLng，您需要使用map.layerPointToLatLng(point)方法。

所以你的代码应该是这样的：

// map can capture clicks...
map.on('click', function(e) {
  doStuff(e);
});


function doStuff(e) {
  console.log(e.latlng);
  // coordinates in tile space
  var x = e.layerPoint.x;
  var y = e.layerPoint.y;
  console.log([x, y]);

  // calculate point in xy space
  var pointXY = L.point(x, y);
  console.log("Point in x,y space: " + pointXY);

  // convert to lat/lng space
  var pointlatlng = map.layerPointToLatLng(pointXY);
  // why doesn't this match e.latlng?
  console.log("Point in lat,lng space: " + pointlatlng);
}

更改了jsFiddle。

您也可以查看传单提供的conversion methods以供参考。

如何在Leaflet中将[x，y]坐标中的点投影到LatLng？

1 个答案: