Mapbox GL JS addLayer'source'

Question

我很難顯示和切換圖層。我遵循教程：https：// www。 mapbox。 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工作室相同汞這裏必須使用

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>