Mapbox GL JS addLayer 'source'

Question

レイヤの表示と非表示を切り替えることができません。私はチュートリアルに従っている：https：// www。マップボックス。 com/mapbox-gl-js/example/toggle-layers/

チュートリアルやその他のヘルプドキュメントから、どのような値を使用するべきかは不明です。私のすべてのデータとスタイルは、Mapbox Studioを使用して作成されています。私はaddLayer 'source'、 'source-layer'とaddSourceの異なる値について混乱しています。

https://www.mapbox.com/help/mapbox-gl-js-fundamentals/ - これはaddSourceについて言及しておらず、これはまったく必要ではないことを示唆していますが、これを私のコードから除外するとマップレイヤーが正しく表示されません。

あなたはここに私のマップを見ることができます：http://www.heavenlygardens.org.uk/maps/6/index3.html

を誰かが私が間違ってやって具体的に説明することができますしてください？

Answer 1

あなたはmapboxのスタジオでそれを追加しているので、あなたがmapboxスタジオで与える層名はあなたので

それらを表示し、隠すために使われるべき

再び層を追加する必要はありません同じmapboxスタジオでHGとして天の庭園層を名付けたことは、ここで

mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuaWlzaCIsImEiOiJ5dzJfM19rIn0.s8DcOH767tjpUznJhAAkaw'; 
 
var map = new mapboxgl.Map({ 
 
    container: 'map', 
 
    style: 'mapbox://styles/daniish/cj1m2ndxd001j2spd09ne38vm', 
 
    zoom: 14.5, 
 
\t center: [1.2964, 52.6291] 
 
}); 
 

 
var toggleableLayerIds = [ 'hg', 'Churchyards' ]; 
 

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

#menu { 
 
     background: #fff; 
 
     position: absolute; 
 
     z-index: 1; 
 
     top: 10px; 
 
     right: 10px; 
 
     border-radius: 3px; 
 
     width: 120px; 
 
     border: 1px solid rgba(0,0,0,0.4); 
 
     font-family: 'Open Sans', sans-serif; 
 
    } 
 

 
    #menu a { 
 
     font-size: 13px; 
 
     color: #404040; 
 
     display: block; 
 
     margin: 0; 
 
     padding: 0; 
 
     padding: 10px; 
 
     text-decoration: none; 
 
     border-bottom: 1px solid rgba(0,0,0,0.25); 
 
     text-align: center; 
 
    } 
 

 
    #menu a:last-child { 
 
     border: none; 
 
    } 
 

 
    #menu a:hover { 
 
     background-color: #f8f8f8; 
 
     color: #404040; 
 
    } 
 

 
    #menu a.active { 
 
     background-color: #3887be; 
 
     color: #ffffff; 
 
    } 
 

 
    #menu a.active:hover { 
 
     background: #3074a4; 
 
    } 
 
    
 
      body { margin:0; padding:0; } 
 
     #map { position:absolute; top:0; bottom:0; width:100%; }

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css" rel="stylesheet"/> 
 
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script> 
 
<nav id="menu"></nav> 
 
<div id="map"></div>

01を使用する必要があります