Mapbox：当一个可见时，所有图层都不可见

Question

按照这个 Mapbox 示例（显示和隐藏图层：https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/），我已经能够在地图上的多个图层之间切换。但是我想实现的是当Layer 1是visible时，Layer 2和Layer 3的可见性是none，当Layer 2是visible时，Layer 1和Layer 3的可见性是none，等等

这是我目前编写的代码的一个小提琴示例： https://jsfiddle.net/reL53uo1/

这是切换部分的逻辑：

// enumerate ids of the layers
    var toggleableLayerIds = ['contours', 'museums', 'contours2'];

    // set up the corresponding toggle button for each layer
    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;

        link.onclick = function(e) {
            var clickedLayer = this.textContent;
            e.preventDefault();
            e.stopPropagation();

            var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

            // toggle layer visibility by changing the layout object's visibility property
            if (visibility === 'visible') {
                map.setLayoutProperty(clickedLayer, 'visibility', 'none');
                this.className = '';
            } else {
                this.className = 'active';
                map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
            }
        };

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

实现这一目标的最有效方法是什么？谢谢。

Answer 1

您可以更改您的 onClick 功能，这样就可以激活您想要的图层并隐藏其他图层，而不是切换单个图层。您可以使用 for 循环来做到这一点：

link.onclick = function(e) {
  var clickedLayer = this.textContent;
  e.preventDefault();
  e.stopPropagation(); 
  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');
    }
  }
};

此外，您应该在addLayer() 函数中将每个图层的“可见性”属性设置为“无”，以便在选择之前将它们隐藏。

'layout': {
  // make layer invisible by default
  'visibility': 'none',
  'line-join': 'round',
  'line-cap': 'round'
},

我对您的 JSFiddle 代码进行了这些更改并粘贴在下面：

	mapboxgl.accessToken = 'pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        zoom: 15,
        center: [-71.97722138410576, -13.517379300798098]
    });

    map.on('load', function() {
        // add source and layer for museums
        map.addSource('museums', {
            type: 'vector',
            url: 'mapbox://mapbox.2opop9hr'
        });
        map.addLayer({
            'id': 'Layer 1',
            'type': 'circle',
            'source': 'museums',
            'layout': {
                // make layer invisible by default
                'visibility': 'none'
            },
            'paint': {
                'circle-radius': 8,
                'circle-color': 'rgba(55,148,179,1)'
            },
            'source-layer': 'museum-cusco'
        });

        // add source and layer for contours
        map.addSource('contours', {
            type: 'vector',
            url: 'mapbox://mapbox.mapbox-terrain-v2'
        });
        map.addLayer({
            'id': 'Layer 2',
            'type': 'line',
            'source': 'contours',
            'source-layer': 'contour',
            'layout': {
                // make layer invisible by default
                'visibility': 'none',
                'line-join': 'round',
                'line-cap': 'round'
            },
            'paint': {
                'line-color': '#877b59',
                'line-width': 5
            }
        });
        map.addLayer({
            'id': 'Layer 3',
            'type': 'line',
            'source': 'contours',
            'source-layer': 'contour',
            'layout': {
                // make layer invisible by default
                'visibility': 'none',
                'line-join': 'round',
                'line-cap': 'round'
            },
            'paint': {
                'line-color': 'yellow',
                'line-width': 2
            }
        });
        
        
    });
    
    

    // enumerate ids of the layers
    var toggleableLayerIds = ['Layer 1', 'Layer 2', 'Layer 3'];

    // set up the corresponding toggle button for each layer
    for (var i = 0; i < toggleableLayerIds.length; i++) {
        var id = toggleableLayerIds[i];

        var link = document.createElement('a');
        link.href = '#';
        link.className = '';
        link.textContent = id;

        link.onclick = function(e) {
            var clickedLayer = this.textContent;
            e.preventDefault();
            e.stopPropagation(); 
            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');
                }
            }
        };

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

	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    #menu {
        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: 'Open Sans', sans-serif;
    }

    #menu 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;
    }

    #menu a:last-child {
        border: none;
    }

    #menu a:hover {
        background-color: #f8f8f8;
        color: #404040;
    }

    #menu a.active {
        background-color: #3887be;
        color: #ffffff;
    }

    #menu a.active:hover {
        background: #3074a4;
    }

<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>



<nav id="menu"></nav>
<div id="map"></div>