Mapbox GL JS : Style is not done loading

Question

我有一张 map ，我们可以在其中经典地从一种风格切换到另一种风格，例如从街道风格切换到卫星风格。

我想知道样式已加载然后添加图层。

根据doc ，我尝试等待加载样式以添加基于 GEOJson 数据集的图层。

当页面加载并触发 map.on('load') 时，效果非常好，但当我只是更改样式时，我会收到错误，因此当从 map 添加图层时，会出现错误。 on('styledataloading')，我什至在 Firefox 中遇到内存问题。

我的代码是:

mapboxgl.accessToken = 'pk.token';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v10',
    center: [5,45.5],
    zoom: 7
});

map.on('load', function () {

    loadRegionMask();
});

map.on('styledataloading', function (styledata) {

    if (map.isStyleLoaded()) {
        loadRegionMask();
    }
});

$('#typeMap').on('click', function switchLayer(layer) {
    var layerId = layer.target.control.id;

    switch (layerId) {
        case 'streets':
            map.setStyle('mapbox://styles/mapbox/' + layerId + '-v10');
        break;

        case 'satellite':
            map.setStyle('mapbox://styles/mapbox/satellite-streets-v9');
        break;
    }
});

function loadJSON(callback) {   

  var xobj = new XMLHttpRequest();
      xobj.overrideMimeType("application/json");

  xobj.open('GET', 'regions.json', true);

  xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
          callback(xobj.responseText);
        }
  };
  xobj.send(null);  
}

function loadRegionMask() {

  loadJSON(function(response) {

    var geoPoints_JSON = JSON.parse(response);

    map.addSource("region-boundaries", {
      'type': 'geojson',
      'data': geoPoints_JSON,
    });

    map.addLayer({
        'id': 'region-fill',
        'type': 'fill',
        'source': "region-boundaries",
        'layout': {},
        'paint': {
            'fill-color': '#C4633F',
            'fill-opacity': 0.5
        },
        "filter": ["==", "$type", "Polygon"]
    });
  });
}

错误是:

Uncaught Error: Style is not done loading
    at t._checkLoaded (mapbox-gl.js:308)
    at t.addSource (mapbox-gl.js:308)
    at e.addSource (mapbox-gl.js:390)
    at map.js:92 (map.addSource("region-boundaries",...)
    at XMLHttpRequest.xobj.onreadystatechange (map.js:63)

为什么在测试样式已加载后调用 loadRegionMask() 时会出现此错误？

Answer 1

1。监听 styledata 事件来解决您的问题

您可能需要在项目中监听 styledata 事件，因为这是 mapbox-gl-js 文档中提到的唯一标准事件，请参阅 https://docs.mapbox.com/mapbox-gl-js/api/#map.event:styledata .

你可以这样使用它:

map.on('styledata', function() {
    addLayer();
});

2。不应使用上述其他方法的原因

1. setTimeout 可能有效，但不是解决问题的推荐方法，如果渲染工作繁重，您会得到意想不到的结果；
2. style.load 是 Mapbox 中的私有(private)事件，如问题 https://github.com/mapbox/mapbox-gl-js/issues/7579 中所述。 ，所以我们显然不应该听它；
3. .isStyleLoaded() 可以工作，但不能一直调用，直到样式完全加载，你需要一个监听器而不是一个判断方法；