Leaflet拖动地图时标记图标固定在页面不跟随移动问题排查

问题根因与修复方案 #

你遇到的标记固定不随地图移动的问题，是第三方canvas图标层配置错误、锚点设置不合理共同导致的，按以下步骤修改即可：

• 修复L.canvasIconLayer初始化配置，开启自动重绘：
  将原来的ciLayer = L.canvasIconLayer({}).addTo(sMap);修改为：

  ciLayer = L.canvasIconLayer({
    autoReset: true // 地图平移/缩放时自动重绘图层内所有图标
  }).addTo(sMap);
  

  如果你使用的canvasIconLayer版本不支持autoReset参数，需要手动绑定地图事件触发重绘，在初始化图层后添加以下代码：

  sMap.on('moveend zoomend', () => {
    ciLayer._reset();
    ciLayer._redraw();
  });
  

• 修正图标锚点配置，避免点位偏移：
  在AddToLayers函数中创建图标时，将锚点调整为图标中心位置：

  var vIcon = L.icon({
    iconUrl: `${gBaseRiskNeutralUrl}${vesselRotationDegree}.svg`,
    iconSize: [24, 24],
    iconAnchor: [12, 12] // 原[24,24]是右下角，会导致点位偏移
  });
  

• 可选优化：如果你的点位数量低于1000个，完全可以不用canvasIconLayer，直接将标记添加到地图默认图层即可彻底避免该问题，把ciLayer.addLayers(neutralMarkers);替换为：

  neutralMarkers.forEach(marker => marker.addTo(sMap));
  

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