设置L.svg渲染器后Canvas Marker显示异常，求恢复方案

问题根源 #

当为L.svg渲染器设置padding: 100时，地图视口会向外扩展指定像素范围，自定义Canvas Marker的默认绘制逻辑未考虑该内边距带来的坐标偏移，导致显示位置异常。

解决方案 #

方案1：在Canvas绘制逻辑中修正坐标偏移 #

修改自定义Canvas Marker的绘制代码，纳入渲染器的padding参数调整坐标：

class CanvasMarker extends L.Marker {
  createIcon(oldIcon) {
    const icon = super.createIcon(oldIcon);
    const map = this._map;
    if (!map) return icon;

    // 获取SVG渲染器的padding配置
    const renderer = map.getRenderer(this);
    const [padX, padY] = renderer.options.padding || [0, 0];

    // 获取Canvas上下文并调整绘制坐标
    const ctx = icon.getContext('2d');
    ctx.clearRect(0, 0, icon.width, icon.height);

    // 示例：原绘制逻辑（以填充矩形为例），修正偏移
    // 原代码：ctx.fillRect(15, 15, 30, 30);
    ctx.fillRect(15 - padX, 15 - padY, 30, 30);

    return icon;
  }
}

方案2：覆盖位置更新方法修正偏移 #

如果Marker的位置计算由Leaflet内部处理，可通过覆盖_updatePosition方法修正样式偏移：

class CanvasMarker extends L.Marker {
  _updatePosition() {
    super._updatePosition();
    const map = this._map;
    if (!map || !this._icon) return;

    const renderer = map.getRenderer(this);
    const [padX, padY] = renderer.options.padding || [0, 0];

    // 修正当前DOM元素的位置偏移
    const currentLeft = parseInt(this._icon.style.left, 10);
    const currentTop = parseInt(this._icon.style.top, 10);
    this._icon.style.left = `${currentLeft - padX}px`;
    this._icon.style.top = `${currentTop - padY}px`;
  }
}

验证步骤 #

1. 替换原有自定义Canvas Marker类为上述修改后的代码
2. 重新加载地图，检查Marker显示位置是否恢复至设置SVG渲染器padding前的效果

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