Leaflet缩放地图导致已删除的Leaflet Routing Machine路由图层复现

你当前的图层删除逻辑仅移除了地图上临时渲染的可见矢量图层，没有销毁 Leaflet Routing Machine（LRM） 的Control实例本身。LRM内部会缓存全量路线数据、路线图层、路点标记、说明面板的关联引用，当地图触发zoomend、路线说明hover这类事件时，LRM会自动重新渲染内部持有的旧路线，导致已删除的图层复现。

1. 新增全局变量存储当前LRM实例 #

首先在全局作用域定义变量，用来持有当前激活的路由控件实例，方便后续销毁：

// 全局作用域定义
let currentRoutingControl = null;

2. 编写专用的旧路由销毁函数 #

替换你原有的遍历删层逻辑，直接调用LRM内置的销毁方法，完全清理所有关联资源：

function clearOldRouting() {
  // 销毁已存在的LRM实例，自动清理关联的路线图层、路点标记、DOM说明面板
  if (currentRoutingControl) {
    currentRoutingControl.remove();
    currentRoutingControl = null;
  }
  // 额外清理可能残留的自定义路点标记，避免漏删
  bootleaf.map.eachLayer(function(layer) {
    if (layer instanceof L.Marker && layer.options.icon?.options?.glyph !== undefined) {
      bootleaf.map.removeLayer(layer);
    }
  });
}

3. 修改路由绘制逻辑 #

修改drawLiedman函数，把新建的LRM实例存到全局变量中，同时调整自定义标记的创建逻辑，避免重复添加：

function drawLiedman(userId) {
  let demoArray = []
  var coords = []
  let driverUrl = '' // 注意要声明driverUrl，避免污染全局作用域

  for (let i = 0; i < 18; i++) {
    if (config.drivers[i].name == userId) {
      driverUrl = config.drivers[i].coords;
      break;
    }
  }

  $.getJSON(driverUrl)
  .done(function(response) {
    demoArray = response;
    demoArray.forEach( (element,index) => { 
      const LatLng = element.replace("(", "").replace(")", "").split(", ")
      const Lat = parseFloat(LatLng[0]);
      const Lng = parseFloat(LatLng[1]);
      coords[index] = L.latLng(Lat,Lng); 
    });

    // 将新建的LRM实例赋值给全局变量
    currentRoutingControl = L.Routing.control({
      waypoints: coords,
      addWaypoints: false,
      routeWhileDragging: false,
      profile: 'route/v1/driving',
      createMarker: function(i, wp) { 
        return L.marker(wp.latLng, {
          draggable: false,
          icon: L.icon.glyph({ glyph: i })
        });
        // 此处无需手动调用addTo，LRM会自动管理标记的添加/销毁
      },
      serviceUrl: 'http://127.0.0.1:5000',
      lineOptions: {
        styles: [{color: 'red', opacity: 1, weight: 2}]
      },
      show:false
    }).addTo(bootleaf.map);
  })
}

4. 替换原有切换逻辑 #

把你原有的flag判断、遍历删层的逻辑全部替换为调用销毁函数：

// 切换路由时直接执行以下代码即可
clearOldRouting();
drawLiedman(choice.value);

LRM的remove()方法会自动清理所有内部关联资源：包括缓存的路线数据、已渲染的路线图层、路点标记、插入到页面的说明面板DOM元素，完全销毁后不会再触发旧路线的重绘，也不会出现hover说明面板复现旧图层的问题。

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