マップボックスは1つを除くすべてのレイヤーをオフに切り替えます

Question

私はマップボックスとjavascriptを初めて使用しています。私はマップボックスのGLコードの例を若干修正しようとしていますが、hereが見つかりました。複数のレイヤーのオン/オフを切り替えることができます。

私は4つのレイヤーを持っていますが、ユーザーはこれらのレイヤーのオン/オフを切り替えることができますが、マップが最初に表示されるときには、1つのレイヤーを切り替えます。

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の私の限られた知識は、メニューを設定する方法を考え出すから維持されています。私は、層の3ページがロードされる（ここでは一例として1である）とき、オフになっていることができています"visible"レイヤーだけがトグルされた「オン」状態になるように、クリック可能なリンクをクリックします。

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です：

はここでトグルメニューを制御するコードスニペットです。実際にオンになっている唯一のレイヤーがソーラーである場合、トグルメニューの4つのレイヤーはすべて青色（「オン」の位置にあることを意味します）に注目してください。助け、アドバイス、批判は大歓迎です...ありがとう！

Answer 1

作成時に無条件にクラスをアクティブに設定しています。レイヤーが表示されていなくても、リンクは常に青色になります。このようなことを試してみてください。

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

これはonload関数内で行う必要がありますが、そうでない場合はプロパティが定義されません。