Mapbox 关闭除一个图层以外的所有图层

Question

我是 Mapbox 的新手 javascript。我正在尝试稍微修改一个 Mapbox GL 代码示例，发现 here，它允许切换 on/off 多个图层。

我有四个图层，我希望用户打开和关闭这些图层，但是当地图最初显示时，我只希望打开一个图层。我可以在页面加载时关闭其中的三个层（这里以一个为例）：

 map.addSource("gnat-4zdrvs", {
     type: 'vector',
       url: 'mapbox://jesselangdon.bbtex1ps'
 });
 map.addLayer({
     "id": "gnat",
     "type": "line",
     "source": "gnat-4zdrvs",
     "source-layer": "gnat-4zdrvs",
     "minzoom": 8,
         "filter": [
             "==",
             "$type",
             "LineString"
        ],
        "layout": {
            "visibility": "none",
            "line-cap": "round",
            "line-join": "round"
        },
        "paint": {
            "line-width": 2,
            "line-color": {
                "base": 1,
                "type": "interval",
                "property": "C_Sin",
                "stops": [
                    [1,"hsl(189, 81%, 79%)"],
                    [1.02,"hsl(189, 91%, 65%)"],
                    [1.04, "hsl(189, 81%, 53%)"],
                    [1.06,"hsl(189, 83%, 43%)"],
                    [1.08,"hsl(189, 89%, 34%)"],
                    [1.1,"hsl(189, 90%, 28%)"],
                    [1.3,"hsl(189, 96%, 21%)"]
                ],
                "default": "hsl(0, 0%, 50%)"
            }
        }
   })

然而，我对 Javascript 的有限了解无法弄清楚如何设置可点击链接的菜单，以便只有 "visible" 层处于切换 "On" 状态.

这是控制切换菜单的代码片段：

var toggleableLayerIds = [ 'conductivity', 'confinement', 'gnat', 'solar' ];

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');

        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);
}

地图可见 here。请注意，切换菜单中的所有四个图层都是蓝色的（这意味着它们处于 "On" 位置，而实际上唯一处于 "on" 的图层是太阳能）。欢迎任何帮助、建议或批评...谢谢！

Answer 1

您正在将 class 设置为在创建时无条件激活，这将始终使 link 蓝色，即使图层不可见也是如此。尝试这样的事情。

    if(map.getLayoutProperty(id, 'visibility') === 'visible')
    {
     link.className = 'active';
    }

虽然这需要在 onload 函数内部完成，否则属性将是未定义的。

Mapbox 关闭除一个图层以外的所有图层

Mapbox toggle all layers off except one

javascript

mapbox

mapbox-gl-js