mapbox显示隐藏图层

在 Mapbox 中，如果您想要显示或隐藏一个图层，可以使用 setLayoutProperty() 方法，通过设置该图层的 visibility 属性来实现。

setLayoutProperty() 方法可以修改地图上指定图层的样式属性。对于 visibility 属性，您可以将其设置为 'visible' 或 'none' 来分别显示或隐藏该图层。

下面是一个示例代码，演示了如何通过按钮点击事件来设置指定图层的 visibility 属性以显示或隐藏该图层：

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-122.4194, 37.7749],
    zoom: 12
});

// 显示或隐藏指定图层的函数
function toggleLayer(layerId){
    var visibility = map.getLayoutProperty(layerId, 'visibility');
    
    if (visibility === 'visible') {
        map.setLayoutProperty(layerId, 'visibility', 'none');
    } else {
        map.setLayoutProperty(layerId, 'visibility', 'visible');
    }
}

// 按钮点击事件
var toggleButton = document.getElementById('toggle-layer');
toggleButton.addEventListener('click', function(){
    toggleLayer('layer-id'); // 将 'layer-id' 替换为要显示或隐藏的图层的 ID
});

在上面的代码中，我们通过 getLayoutProperty() 方法获取了指定图层的 visibility 属性的值，并检查其是否为 'visible'。如果该属性的值为 'visible'，则说明该图层目前可见，我们就将 visibility 属性设置为 'none' 来隐藏该图层。如果该属性的值不是 'visible'，则说明该图层目前不可见，我们就将 visibility 属性设置为 'visible' 来显示该图层。