Leaflet Canvas标记插件：重复点击按钮无法清除原有画布层问题

问题根源 #

你每次点击按钮都会新建一个L.canvasIconLayer实例并添加到地图，同时覆盖了window.ciLayer的引用，导致旧图层无法被找到和移除，最终造成标记叠加。

修复方案 #

只初始化一次画布图层，每次添加新标记前先清空原有内容：

1. 提前初始化ciLayer，不要在点击函数内重复创建
2. 添加新标记前调用图层的clear()方法清空旧标记

修改后的代码示例 #

// 初始化画布图层，只执行一次
window.ciLayer = L.canvasIconLayer({}).addTo(map);

function addCanvas() {
  // 清空已有标记
  ciLayer.clear();
  
  var icon;
  var img;
  markers = [];
  for (var i = 0; i < 100; i++) {
    img = "data:image/svg+xml," + encodeURIComponent(svgText(i));
    icon = L.icon({
      iconUrl: img,
      iconSize: [40, 30],
      iconAnchor: [20, 15]
    });
    x = Math.random() * 1.8;
    y = Math.random() * 3.6;
    var marker = L.marker([58.5578 + x, 29.0087 + y], { icon: icon }).bindPopup(
      "I Am "
    );
    markers.push(marker);
  }
  ciLayer.addLayers(markers);
}

补充场景方案 #

如果需要彻底移除图层再重建（适配特殊业务场景），可以先判断图层是否存在，移除后再重新创建：

function addCanvas() {
  // 移除旧图层（如果存在）
  if (window.ciLayer) {
    map.removeLayer(window.ciLayer);
  }
  // 创建新图层
  window.ciLayer = L.canvasIconLayer({}).addTo(map);
  
  // 后续添加标记的逻辑不变
}

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