如何获取非地理Leaflet地图中的像素位置？

Question

我有一个问题，在传单中获取像素坐标。任何帮助将不胜感激！

我想要实现的目标：

我想使用传单显示图像（没有图块 - 只是图像，非地理地图），并且用户应该可以选择单击图像，设置标记，并且我需要该标记的像素位置。出于测试目的，我创建了一个 JSFiddle，它使用 this image。

显示图像和设置标记不是问题。有很多相关教程。

但获得该像素位置是——至少对我来说——在某种程度上是不可能的。我已经阅读了关于Leaflet提供的不同方法的每一篇文章/文章/...，但仍然没有成功。

到目前为止我所取得的成就：

在图像编辑程序中，我可以看到，图像上这座塔的顶部大致具有以下像素坐标：x=1350，y=625。

显示塔顶像素位置的图像

因此，当用户单击塔顶时，我会得到该点的 LatLng，并且可以设置标记。当用户不更改缩放级别时，我的代码实际上正在运行。单击塔的顶部，我得到正确的像素坐标（请参见图像上的蓝色标记，显示我单击的位置，以及计算出的像素显示在控制台上）：

如果用户未缩放，则显示正确计算位置的图像

我的问题

但是当用户开始缩放时，计算出的像素坐标肯定是错误的：

用户缩放后显示错误计算位置的图像

我的代码

我创建了这个 JSFiddle 来分享我的代码：https://jsfiddle.net/q36f1ytu/73/

处理点击事件的代码基本上是这样的（完整代码请参见我的JSFiddle）：

map.on("click", function (e) {
  const marker = new L.Marker(e.latlng).addTo(map)

    // Here I want to get the pixel coordinate of the image
  var imagePixelCoords = map.project(e.latlng, map.getZoom())
  console.log("imagePixelCoords: " + imagePixelCoords)
})

我很迷茫，当用户缩放时如何正确计算像素坐标。

提前非常感谢您！

致以诚挚的问候

Answer 1

由于您使用的是自定义 CRS，因此请使用

[[0, 0], [imgHeight, imgWidth]]

作为边界，将

minZoom

设置为负值，例如

-5

（here 是原因），然后只需使用

e.latlng

检索图像坐标.

还有另一个警告，在图像中，图像的

x

和

y

通常从图像的左上角开始，但是，传单地图中的坐标从左下角开始。因此，您需要计算

imgHeight-lat

才能检索正确的

y

像素。

const imageUrl =
  "https://upload.wikimedia.org/wikipedia/commons/7/7c/Kaohsiung_Skyline_2020.jpg"
const imgWidth = 3236
const imgHeight = 2157

let map = L.map("map", {
  minZoom: -5,
  crs: L.CRS.Simple,
  zoomControl: false,
})

let bounds = [[0, 0], [imgHeight, imgWidth]];

L.imageOverlay(imageUrl, bounds).addTo(map);

map.fitBounds(bounds);

map.on("click", (e) => {

  let {lat: x, lng: y} = e.latlng;
  
  // starting top-left instead bottom-left
  x = imgHeight - x;

  if (x < 0 || x > imgHeight || y < 0 || y > imgWidth) {
    console.log('outside of image');
    return;
  }
  
  console.log(x, y);
  new L.Marker(e.latlng).addTo(map)
  
});

#map {
  height: 300px;
}

<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map"></div>