如何在非地理Leaflet地图中获取点击点的像素坐标？

问题原因 #

你用map.project()得到的是Leaflet地图容器内的像素坐标，这个坐标会随着缩放级别变化，和原始图像的像素没有直接对应关系。要获取原始图像的像素，得基于你设置的图像覆盖层（ImageOverlay）的地理范围和原始图像尺寸来做比例转换。

解决方案步骤 #

1. 提前记录原始图像的宽高，以及你给ImageOverlay设置的地理边界（bounds）
2. 在点击事件中，将点击的LatLng转换为相对于边界的比例，再乘以原始图像的宽高，得到原始像素坐标

修改后的代码 #

首先初始化地图和图像层时，明确记录关键参数：

// 原始图像的实际宽高（可从图像属性或编辑软件中获取）
const originalImgWidth = 2048;
const originalImgHeight = 1365;

// 定义图像覆盖的地理边界，这里用图像尺寸作为边界范围方便计算（也可替换为你自己的bounds）
const imageBounds = L.latLngBounds([[0, 0], [originalImgHeight, originalImgWidth]]);

// 创建地图和图像层
const map = L.map('map', {
  crs: L.CRS.Simple,
  minZoom: -2
}).setView([originalImgHeight/2, originalImgWidth/2], 0);

L.imageOverlay('https://upload.wikimedia.org/wikipedia/commons/7/7c/Kaohsiung_Skyline_2020.jpg', imageBounds).addTo(map);

然后修改点击事件处理逻辑：

map.on("click", function (e) {
  const marker = new L.Marker(e.latlng).addTo(map);
  
  // 获取图像边界的西南和东北点
  const sw = imageBounds.getSouthWest();
  const ne = imageBounds.getNorthEast();
  
  // 计算点击点在边界内的横向比例（lng对应图像的x轴）
  const xRatio = (e.latlng.lng - sw.lng) / (ne.lng - sw.lng);
  // 计算纵向比例（lat对应图像的y轴，注意Leaflet的lat北为正，图像y向下为正，需反转）
  const yRatio = (ne.lat - e.latlng.lat) / (ne.lat - sw.lat);
  
  // 转换为原始图像的像素坐标
  const imagePixelX = Math.round(xRatio * originalImgWidth);
  const imagePixelY = Math.round(yRatio * originalImgHeight);
  
  console.log(`原始图像像素坐标：x=${imagePixelX}, y=${imagePixelY}`);
});

关键说明 #

• 如果你原来的ImageOverlay用的不是图像尺寸作为bounds，只要替换imageBounds为你自己的边界，比例计算逻辑依然有效
• 用Math.round()可以把浮点结果转成整数像素坐标，和图像编辑软件里的坐标一致
• 不管缩放多少级，这个计算都是基于原始图像的比例，所以结果始终准确

内容的提问来源于stack exchange，提问作者Lukas