如何实现取消点击按钮时显示Mapbox中的全部图层？

我明白你的需求啦——现在点击按钮只能单独显示对应图层，想要点击已激活的按钮时，切换回显示所有图层的状态对吧？咱们可以通过修改按钮点击事件的逻辑来实现这个功能，核心就是判断当前点击的按钮是否已经处于active状态，然后分两种情况处理：

修改后的JavaScript代码 #

mapboxgl.accessToken = 'pk.eyJ1IjoibXBhbmRhIiwiYSI6ImNrZXUxMTlvYTI4dWYydXQ1c29xamthOHkifQ.DMoQHp6Js8MR-FPW5MpV9g';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mpanda/ckgsz2his0l7c19rwesmr8amr'
});
map.on('load', function () {
    //Declaring all Layers
    var toggleableLayerIds = ['Shops', 'Church', 'Tourist Spots', 'Bakery', 'Bars and Pubs', 'Restaurants', 'Cafes','Tram Stops'];
    //Button
    for (var i = 0; i < toggleableLayerIds.length; i++) {
        var id = toggleableLayerIds[i];
        var link = document.createElement('a');
        link.href = '#';
        link.className = 'active';
        link.textContent = id;
        var layers = document.getElementById('button');
        layers.appendChild(link);
        link.onclick = function (e) {
            var clickedLayer = this.textContent;
            e.preventDefault();
            e.stopPropagation();
            
            // 判断当前按钮是否已经是激活状态
            var isActive = this.classList.contains('active');
            
            if (isActive) {
                // 如果已激活，切换为显示所有图层
                for (var j = 0; j < toggleableLayerIds.length; j++) {
                    layers.children[j].className = 'active';
                    map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'visible');
                }
            } else {
                // 如果未激活，执行原逻辑：只显示当前点击的图层
                for (var j = 0; j < toggleableLayerIds.length; j++) {
                    if (clickedLayer == toggleableLayerIds[j]) {
                        layers.children[j].className = 'active';
                        map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'visible');
                    } else {
                        layers.children[j].className = '';
                        map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'none');
                    }
                }
            }
        };
    }
});//load

代码改动说明 #

• 新增了var isActive = this.classList.contains('active');来检查当前点击的按钮是否处于激活状态
• 分分支处理：
  • 当按钮已激活时，遍历所有图层按钮，把它们都设为active状态，同时将所有图层的visibility设为visible，这样就回到了显示全部的状态
  • 当按钮未激活时，保持你原来的逻辑，只显示当前点击的图层，隐藏其他

保留你的CSS样式（无需修改） #

#button {
    background: #fff;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    border-radius: 3px;
    width: 120px;
    border: 1px solid rgba(0,0,0,0.4);
    font-family: 'Arial', sans-serif;
}
#button a {
    font-size: 13px;
    color: #404040;
    display: block;
    margin: 0;
    padding: 0;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    text-align: center;
}
#button a:last-child {
    border: none;
}
#button a:hover {
    background-color: #f8f8f8;
    color: #404040;
}
#button a.active {
    background-color: #3887be;
    color: #ffffff;
}
#button a.active:hover {
    background: #3074a4;
}

这样修改后，点击一个未激活的按钮时，会只显示对应图层；再次点击这个已激活的按钮，就会切换回所有图层都显示的状态啦。

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