在 Mapbox gl js 中更改地图样式后我无法添加新图层答案

【问题标题】：I can't add a new layer after change map style in Mapbox gl js在 Mapbox gl js 中更改地图样式后我无法添加新图层
【发布时间】：2020-11-08 07:15:11
【问题描述】：

首先，我是 Mapbox 的初学者，我在更改地图样式时遇到了问题。更改样式时，我正在上传资源，但无法向地图添加新图层。

我正在这样创建我的资源。

function addRoadsSource(){
    map.addSource('roads3',{
        'type':'geojson',
        'data': datas.roadsInfo // datas --> roadsInfo includes roads geoFile Data
    });
}

并将它们添加为图层以使用 uploadRoads() 进行映射

function uploadRoads() {
    map.on('load',function() {
                addRoadsSource();
                showRoads();
                });
            }

这里还有 showRoads() 函数

function showRoads() {
    map.addLayer({
        'id': 'roadsLayer',
        'type': 'line',
        'source': 'roads3',
        'filter': ['==', '$type', 'LineString'],
        'paint' : {
        'line-color' : '#33cc33',
        'line-width' : 5
        }
        });
}

但是当我将地图样式从 street-v11 更改为 dark-v10 时，所有来源都消失了。根据我的研究，这是由于 mapbox 的结构（Mapbox-GL setStyle removes layers）而发生的。而且大家都说我需要重新上传资源。但是我已经使用 addRoadsSource() 函数上传了我的资源。然后，当我使用 uploadRoads() 将新图层添加到新样式时，地图上不会出现道路。当我使用 map.style.sources() 查看新样式的源时，我可以看到源已正确加载，但没有出现图层。我希望我能解释我的问题。我查看了许多来源，包括 Github 问题，但没有一个对我有用。如果您需要我的代码或 geojson 文件中的任何内容，我可以添加它。

【问题讨论】：

请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange 网络上发帖，您已在 CC BY-SA 4.0 license 下授予 Stack Exchange 分发该内容的不可撤销的权利（即无论您未来的选择如何）。根据 Stack Exchange 政策，帖子的非破坏版本是分发的版本。因此，任何破坏行为都将被撤销。如果您想了解更多关于删除帖子的信息，请参阅：How does deleting work?

标签： javascript mapbox mapbox-gl-js

【解决方案1】：

如果您可以提供minimal reproducible example，则更容易识别代码中的问题，因为您包含的代码不足以诊断问题的根源。

我读到你的问题的第一感觉是你没有在样式加载事件之后创建你的源和层，因为改变样式根本不应该是一个问题，正如你在这个小提琴中看到的那样，我已经做了测试你的案例fiddle showing how to change mapbox style keeping source and layers.

    mapboxgl.accessToken = 'PUT HERE YOUR TOKEN';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-122.486052, 37.830348],
      zoom: 14
    });
    var l = 'routeL';
    var s = 'routeS';
    var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');

    function addSource() {
      map.addSource(s, {
        'type': 'geojson',
        'data': {
          'type': 'Feature',
          'properties': {},
          'geometry': {
            'type': 'LineString',
            'coordinates': [
              [-122.48369693756104, 37.83381888486939],
              [-122.48348236083984, 37.83317489144141],
              [-122.48339653015138, 37.83270036637107],
              [-122.48356819152832, 37.832056363179625],
              [-122.48404026031496, 37.83114119107971],
              [-122.48404026031496, 37.83049717427869],
              [-122.48348236083984, 37.829920943955045],
              [-122.48356819152832, 37.82954808664175],
              [-122.48507022857666, 37.82944639795659],
              [-122.48610019683838, 37.82880236636284],
              [-122.48695850372314, 37.82931081282506],
              [-122.48700141906738, 37.83080223556934],
              [-122.48751640319824, 37.83168351665737],
              [-122.48803138732912, 37.832158048267786],
              [-122.48888969421387, 37.83297152392784],
              [-122.48987674713133, 37.83263257682617],
              [-122.49043464660643, 37.832937629287755],
              [-122.49125003814696, 37.832429207817725],
              [-122.49163627624512, 37.832564787218985],
              [-122.49223709106445, 37.83337825839438],
              [-122.49378204345702, 37.83368330777276]
            ]
          }
        }
      });
    }

    function addLayer() {
      map.addLayer({
        'id': l,
        'type': 'line',
        'source': s,
        'layout': {
          'line-join': 'round',
          'line-cap': 'round'
        },
        'paint': {
          'line-color': '#888',
          'line-width': 8
        }
      });

    }

    map.on('style.load', function() {
      addSource();
      addLayer();
    });

    function switchLayer(layer) {
      var layerId = layer.target.id;
      map.setStyle('mapbox://styles/mapbox/' + layerId);
    }

    for (var i = 0; i < inputs.length; i++) {
      inputs[i].onclick = switchLayer;
    }

【讨论】：