Mapbox会关闭除一层以外的所有图层 [英] Mapbox toggle all layers off except one

问题描述

我是Mapbox和javascript的新手.我正在尝试略微修改Mapbox GL代码示例，请在此处找到，它允许切换多个图层的开/关.

I am new to Mapbox and javascript. I'm attempting to slightly modify a Mapbox GL code example, found here, which allows for the toggling on/off of multiple layers.

我有四个图层，我希望用户打开和关闭这些图层，但是当地图最初显示时，我只希望打开一个图层.当页面加载时，我能够关闭三个层(这里以一个为例):

I have four layers, and I would like the user to toggle these layers on and off, but when the map initially displays, I only want one layer toggled on. I am able to have three of the layers turned off when the page loads (here is one as an example):

 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"层处于切换的打开"状态.

However, my limited knowledge of Javascript is keeping from figuring out how to set up the menu of clickable links so that only the "visible" layer is in a toggled "On" state.

以下是控制切换菜单的代码段:

Here's the code snippet which controls the toggle menu:

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

此处可见.请注意，切换菜单中的所有四个图层均为蓝色(这意味着它们处于打开"位置，而实际上唯一处于打开"的图层是太阳能).欢迎任何帮助，建议或批评...谢谢！

The map is viewable here. Notice that all four layers in the toggle menu are blue (meaning they are in an "On" position, when in fact the only layer that is "on" is solar). Any help, advice, or criticism is welcome... thanks!

推荐答案

您正在将类在创建时无条件设置为活动状态，即使该图层不可见，该链接也会始终变为蓝色.尝试这样的事情.

You are setting the class to active unconditionally on creation which will always make the link blue even if the layer is not visible. Try something like this.

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

尽管这将需要在onload函数中完成，否则该属性将是未定义的.

Though this will need to be done inside the onload function otherwise the property will be undefined.

这篇关于Mapbox会关闭除一层以外的所有图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！