Mapbox事件监听代码优化及多图层绑定单监听器方法咨询

问题解答 #

1. 单个监听器绑定多个图层完全可行，Mapbox GL JS支持在调用map.on()时传入图层ID数组，一次性给多个图层绑定同一个事件处理逻辑，完美解决后续新增图层导致代码臃肿的问题。

2. 基于这个特性，我们可以把重复的监听逻辑大幅简化，后续新增图层只需要往图层数组里添加ID即可，不用再写大量重复的map.on代码。

优化后的代码 #

// 把所有需要绑定事件的地块图层统一放到数组，后续加图层直接追加ID就行
const lotLayers = ['lots', 'lots-missing_data', 'lots-appraised'];

// 单个click监听器处理所有地块图层的点击事件
map.on('click', lotLayers, (e) => {
    showLotPopup(e);
});

// 单个mouseenter监听器统一切换指针样式
map.on('mouseenter', lotLayers, () => {
    map.getCanvas().style.cursor = 'pointer';
});

// 单个mouseleave监听器恢复默认指针样式
map.on('mouseleave', lotLayers, () => {
    map.getCanvas().style.cursor = '';
});

额外扩展方案 #

如果后续部分图层需要特殊处理逻辑，可在回调中通过e.features[0].layer.id判断当前触发事件的图层ID，实现通用+个性化逻辑的结合：

map.on('click', lotLayers, (e) => {
    const layerId = e.features[0].layer.id;
    if (layerId === 'lots-missing_data') {
        // 针对缺失数据图层的特殊处理
        console.log('触发了缺失数据地块的点击');
    }
    // 执行通用弹窗逻辑
    showLotPopup(e);
});

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