Mapbox gl js在地图加载后绘制多个图层

Question

我必须使用 Mapbox gl js 显示许多（约 100 万）GPS 坐标。我有多个顺序的 Ajax 请求，负责从服务器获取数据。我想做的是在每个 Ajax 请求之后向地图添加一个图层并立即显示。

问题是，如果我将代码放在map.on('style.load', function() {}) 事件中，则地图不会显示，直到最后一个 Ajax 调用终止。我目前拥有的是这样的：

function loadData(finished) {
    if (finished) {
        return;
    }
    // do ajax request and wait for completion
    // if last request, set finished = true
    // call to map.addSource()
    // call to map.addLayer()
    // recursive call to loadData()
}

map.on("style.load", function() {
    loadData();
});

你知道这个问题的解决方案吗？

Answer 1

我通过用以下代码替换 map.on(...) 调用解决了这个问题：

function waitForMapLoaded() {
    if(!map.loaded()) {
        window.setTimeout(waitForMapLoaded, 100);
    } else {
        loadData();
    }
}
waitForMapLoaded();