asynchronous - 将源添加到 mapbox GL 中的现有图层

Question

标题几乎说明了我打算做什么。

我使用 Firebase 作为 map 上标记的后端，并使用 on('child_added')方法来监控这些。对于数据库中特定位置上的每个节点，on('child_added')会开火一次。

这也适用于正在创建的新节点，因此这非常适合在将新标记添加到数据库时向 map 异步添加新标记。

为了在 map 上显示这些，mapbox GL 要求我将数据转换为 geojson ，创建一个源，然后将此源添加到图层。下面的代码显示了这一点，它实际上在 map 上显示了标记。

markersRef.on('child_added', function(childSnapshot) { //fires once for every child node
    var currentKey = childSnapshot.key; //the key of current child
    var entry = childSnapshot.val(); //the value of current child

    //creates a geojson object from child
    var geojson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [entry.position.long, entry.position.lat]
            }
        }],
        "properties": {
            title: entry.title,
            text: entry.text
        }
    };

    //creates a source with the geojson object from above
    map.addSource(currentKey, { //currentKey is the name of this source
        "type": "geojson",
        "data": geojson,
        cluster: true //clusters the points in this source
    });

    //adds the source defined above to a layer that will be displayed on a map
    map.addLayer({
        "id": currentKey, // Sets id as current child's key 
        "source": currentKey, // The source layer defined above
    });
});

问题是标记将位于单独的源中，使它们出现在不同的层上。因此，我不能将它们聚类或例如搜索它们。

我要找的是 一种将源添加到现有图层的方法 .这将使我能够在 on('child_added') 之外创建一个图层。方法，然后将源添加到该层。

我查看了 mapbox GL 文档，但在其中找不到任何可以让我执行此操作的内容。与 mapbox js 相比，在这方面似乎非常有限。

我认为这是一个非常重要的功能，不明白为什么这是不可能的。我希望你们中的一些人有解决方法或方法来实现在 mapbox GL 中向 map 异步添加标记。

Answer 1

我也有同样的问题。我对此进行了一些搜索，并找到了 GeoJSONSource 的 setData 属性:
https://www.mapbox.com/mapbox-gl-js/api/#geojsonsource#setdata

map.addSource("points", markers);
map.addLayer({
  "id": "points",
  "type": "symbol",
  "source": "points",
  "layout": {
  "icon-image": "{icon}-15",
  "icon-allow-overlap": true,
  "icon-ignore-placement": true,
  "icon-size": 2,
  "icon-offset": [0, -10],
  }
});

然后我更新源，没有像这样创建一个新层:

map.getSource('points').setData(newMarkers)

因此，这会在不创建新层的情况下更新源。然后您可以在此图层上进行搜索。我遇到的唯一问题是 setData删除所有以前的数据(没有“addData”功能)，因此您需要保存以前的标记并再次添加它们。如果您找到解决方法，请告诉我。