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

Question

我是 Mapbox 和 javascript 的新手。我正在尝试稍微修改 Mapbox GL 代码示例，发现 here ，它允许打开/关闭多层。

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

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

map 可见here .请注意，切换菜单中的所有四个层都是蓝色的(意味着它们处于“打开”位置，而实际上唯一“打开”的层是太阳能)。欢迎任何帮助、建议或批评……谢谢!

Answer 1

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

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

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