mapbox解决重复监听事件

贴个群号

WebGIS学习交流群461555818，欢迎大家。

问题现象

当我们添加一个图层的时候，有时候会利用，map.on绑定一次交互，比如click或者move等，这时候我们如果移除图层，然后再添加图层，这种场景是很常见的，结果就是绑定了多个相同的交互函数。
比如点击出现弹窗，你会发现弹窗里的内容调用了很多次，这样在前端显示虽然看不出什么问题，虽然调用了很多次，但是最终显示仍然是一个，还是会损耗性能。
那这个显而易见的bug，mapbox也提供了能解除监听的方法，就是map.off，但是这个东西并不好用，和map.on一样，要求必须取消的事件指向必须和注册的事件指向一致，也就是如果是这样写的话，是取消不掉的，这个方法还只能接受e这一个参数

this.map.on('click',layerID,function(e){
})
this.map.off('click',layerID,function(e){
})

那我们就想能不能这样写，结果是也不好使，这俩仍然不是完全相同

const listen =function(e){
}
this.map.on('click',layerID,listen)
this.map.off('click',layerID,listen)

那就没有办法了吗？有的，把listen存到data里面去，这样就是完全一样了

	//添加弹窗
    addMessageBox(layerID){
        this.removeMapClick(layerID)
        const listen = function (e){
        }
        this.map.on('click',layerID,listen)
        this.listeners[layerID] = listen
    },
    // 每次修改图层时，移除之前的地图点击事件
    removeMapClick (key) {
      if (this.listeners[key]) {
        this.map.off('click', key, this.listeners[key])
      }
    },