贴个群号
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])
}
},