Leaflet/JS使用变量调用removeLayer删除图层无效果问题求助

问题原因 #

1. 参数类型错误：map.removeLayer()要求传入图层实例对象，但你代码里的mapid存储的是图层实例的变量名字符串（比如"basicmap"），字符串和实例对象是完全不同的两种数据类型，方法无法识别字符串对应的图层，自然不会生效。你直接写basicmap时实际传入的是变量指向的图层实例，所以可以正常执行。
2. 异步变量引用异常：setTimeout的回调是异步执行的，等回调触发时，你在函数末尾同步执行的mapid = mapselect已经跑完，mapid已经被更新为新选中的图层名，你本来想删除的旧图层id已经被覆盖，也会导致删除逻辑不符合预期。

优化解决方案 #

你不需要写35个单独的判断分支，只要把所有图层统一归集到一个对象里管理即可，代码会简洁很多：

1. 先全局定义图层映射表，key对应下拉框的value值，value对应图层实例：

// 所有图层统一管理，新增图层只要在这里加一条记录即可
const layerMap = {
  basicmap: basicmap,
  outpost1: outpost1,
  recoverymap: recoverymap,
  reconmap: reconmap,
  exmap: exmap
}
// 记录当前正在显示的图层，初始为默认显示的基础图层
let currentLayer = layerMap.basicmap

2. 简化事件处理函数，去掉所有冗余判断：

function scheduleA(event) {
  const targetLayerKey = this.value
  // 删除当前显示的旧图层
  map.removeLayer(currentLayer)
  // 取出要显示的新图层添加到地图
  const targetLayer = layerMap[targetLayerKey]
  targetLayer.addTo(map)
  // 更新当前图层记录
  currentLayer = targetLayer
}

如果你确实需要保留setTimeout的延迟逻辑，把所有用到的变量都封闭到回调作用域内即可，避免引用外层会被修改的变量：

function scheduleA(event) {
  const oldLayer = currentLayer
  const targetLayerKey = this.value
  const targetLayer = layerMap[targetLayerKey]
  setTimeout(function() {
    map.removeLayer(oldLayer)
    targetLayer.addTo(map)
    currentLayer = targetLayer
  })
}

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