Leaflet绘图时缩放后如何更新地图地理坐标？

问题背景 #

使用Leaflet + Leaflet.draw实现地图区域绘制标记功能，遇到以下问题：用户绘图过程中缩放地图，最终生成的标记区域仍使用缩放前的初始地理坐标，导致标记位置与当前可视区域的绘制内容不匹配。

原方案问题分析 #

你尝试通过捕获缩放前的像素点、缩放后转地理坐标的思路解决，但未生效，核心问题有两点：

1. 时机错误：等到markers的create事件触发时才处理坐标，此时初始的地理坐标已经固定，再转换无法修正绘制过程中缩放带来的偏移。
2. 坐标转换逻辑错误：用缩放前的地理坐标转像素，再在缩放后转回地理坐标，这个转换过程基于的是不同的地图投影参数（缩放级别变了），结果自然不对。正确的做法应该是保存绘制时的容器像素位置，缩放后基于当前视图重新计算地理坐标。

修正方案 #

通过监听绘制过程的关键事件，实时记录像素位置，缩放时更新绘制中的图形坐标，确保最终生成的标记使用正确的地理坐标。

修正后代码 #

// 临时存储绘制时的像素点（可用闭包替代全局变量）
let drawingStartPoints = [];

// 监听绘制开始事件，初始化像素点存储
freeDraw.on('draw:start', () => {
  drawingStartPoints = [];
});

// 监听绘制顶点添加事件，记录每个顶点的容器像素位置
freeDraw.on('draw:vertex', (event) => {
  const pixelPoint = map.latLngToLayerPoint(event.latlng);
  drawingStartPoints.push(pixelPoint);
});

// 监听地图缩放结束事件，实时更新绘制中的图形坐标
map.on('zoomend', () => {
  // 获取当前活跃的自由绘制工具实例
  const activeDrawTool = map.drawControl?.getDrawTool('freehand');
  // 仅当正在绘制时处理
  if (activeDrawTool && activeDrawTool._drawing && drawingStartPoints.length > 0) {
    // 将保存的像素点转换为当前缩放级别下的地理坐标
    const updatedLatLngs = drawingStartPoints.map(pixel => {
      return map.layerPointToLatLng(pixel);
    });
    // 更新正在绘制的图形的坐标
    const currentDrawingLayer = activeDrawTool._drawnLayers[0];
    if (currentDrawingLayer) {
      currentDrawingLayer.setLatLngs(updatedLatLngs);
    }
  }
});

// 处理绘制完成事件，直接使用更新后的坐标
freeDraw.on('markers', (event) => {
  if (event.eventType === 'create' && event.latLngs?.length > 0) {
    handleNewPolyline(event.latLngs);
  }
});

代码解释 #

1. 记录像素点：在绘制开始时初始化数组，每添加一个顶点就记录该点相对于地图容器的像素位置（这个位置不会随缩放变化）。
2. 缩放时更新坐标：缩放结束后，把保存的像素点转换为当前缩放级别下的地理坐标，直接更新正在绘制的图形的坐标，确保绘制内容与地图视图同步。
3. 绘制完成直接使用：此时event.latLngs已经是修正后的坐标，直接传入标记创建函数即可。

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