지도 상자 하나를 제외한 모든 레이어를 끕니다.

Question

나는지도와 자바 스크립트를 처음 사용했습니다. Mapbox GL 코드 예제를 약간 수정하려고 시도 중입니다. here으로 여러 레이어를 켜고 끌 수 있습니다.

나는 4 개의 레이어가 있으며 사용자가이 레이어를 켜고 끄기를 원하지만지도가 처음 표시 될 때 단 하나의 레이어 만 토글해야합니다.

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%)" 
      } 
     } 
    }) 

그러나, 자바 스크립트의 내 제한된 지식의 메뉴를 설정하는 방법을 알아내는에서 유지하고있다 : 나는 레이어의 세 페이지가로드 (여기 예를 들어 하나입니다) 때 꺼져있을 수 있어요 "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 함수 내에서 수행해야하지만 그렇지 않으면 속성이 정의되지 않습니다.