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>