Mapbox GL JS图层切换按钮需点击两次触发，如何优化为单次触发？

我参考示例实现了多图层分组切换，用单个按钮控制一组图层的可见性，但按钮需要点击两次才能触发功能，希望优化为单次点击即可生效。

原代码 #

// 需要切换的图层组传入此函数
toggleLayer(['site location markers'], 'markers');
toggleLayer(['Pen Dinas', 'Rudbaxton','Brawdy Castle', 'Caer Blaen Minog', 'Castell Bach', 'Castell Gwyn', 'Tancredston', 'Thornton Rath', 'Walesland Rath'], 'Geophys');
toggleLayer(['Pendinas 50cm DSM'], '50cm DSM');
toggleLayer(['Pendinas 50cm DTM'], '50cm DTM');

function toggleLayer(ids, name) {
    var link = document.createElement('a');
    link.href = '#';
    link.className = 'active';
    link.textContent = name;

    link.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();
        for (layers in ids){
            var visibility = map.getLayoutProperty(ids[layers], 'visibility');
            if (visibility === 'visible') {
                map.setLayoutProperty(ids[layers], 'visibility', 'none');
                this.className = '';
            } else {
                this.className = 'active';
                map.setLayoutProperty(ids[layers], 'visibility', 'visible');
            }
         }
    };

    var layers = document.getElementById('menu');
    layers.appendChild(link);
}

问题原因 #

1. 初始状态不匹配：按钮默认硬编码添加active类，但未同步图层实际的可见性，导致按钮状态与图层真实状态不一致
2. 逐个切换逻辑冲突：循环中逐个判断图层状态并修改按钮类，若组内图层可见性不一致，按钮状态会被最后一个图层的逻辑覆盖，导致点击后状态混乱

优化后的代码 #

// 初始化分组切换按钮
toggleLayer(['site location markers'], 'markers');
toggleLayer(['Pen Dinas', 'Rudbaxton','Brawdy Castle', 'Caer Blaen Minog', 'Castell Bach', 'Castell Gwyn', 'Tancredston', 'Thornton Rath', 'Walesland Rath'], 'Geophys');
toggleLayer(['Pendinas 50cm DSM'], '50cm DSM');
toggleLayer(['Pendinas 50cm DTM'], '50cm DTM');

function toggleLayer(ids, name) {
    var link = document.createElement('a');
    link.href = '#';
    link.textContent = name;

    // 初始化按钮状态：同步图层实际可见性
    var allVisible = ids.every(id => map.getLayoutProperty(id, 'visibility') === 'visible');
    link.className = allVisible ? 'active' : '';

    link.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();
        
        // 根据按钮当前状态决定切换方向
        var shouldShow = this.className !== 'active';
        
        // 统一设置组内所有图层的可见性
        ids.forEach(id => {
            map.setLayoutProperty(id, 'visibility', shouldShow ? 'visible' : 'none');
        });
        
        // 更新按钮状态
        this.className = shouldShow ? 'active' : '';
    };

    var layers = document.getElementById('menu');
    layers.appendChild(link);
}

优化说明 #

• 初始化时通过every方法判断组内所有图层是否可见，同步按钮的active类，确保初始状态与图层真实状态一致
• 点击时不再逐个判断图层状态，而是根据按钮当前状态统一切换整组图层的可见性，避免状态冲突
• 单次点击即可同步按钮与图层组的状态，解决两次点击才生效的问题

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