Mapbox GL setData 使用多个标记更新图层

Question

我的 Mapbox GL 地图只有一个图层，该图层上有多个标记，我想更新一个特定的标记，所以我使用 setData 只更新一个标记，但 setData 会重置整个图层仅添加我尝试更新为整个图层上的单个标记的标记，从而删除所有旧标记。

通过尝试添加多个 GEOJson 格式的标记作为 GEOJson 对象数组，如下所示，我收到错误消息：

Uncaught Error: Input data is not a valid GeoJSON object.

代码：

          map.getSource('cafespots').setData([{
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [31.331849098205566, 30.095422632059062]
            },
            "properties": {
              "marker-symbol": "cafe"
            }
          },{
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [31.39, 30.10]
            },
            "properties": {
              "marker-symbol": "cafe"
            }
          }]);

如果有人能告诉我我做错了什么/遗漏了什么，我将不胜感激，谢谢

Answer 1

setData 需要一个完整的 GeoJSON 对象（不仅仅是它的特性）或 url 指向一个 GeoJSON 对象。

您需要在代码中管理 GeoJSON 的状态，并在发生更改时通过 setData 更新整个对象。

var geojson = {
  "type": "FeatureCollection",
  "features": []
};

map.on('load', function() {
  map.addSource('custom', {
    "type": "geojson",
    "data": geojson
  });

  // Add a marker feature to your geojson object
  var marker {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [0, 0]
    }
  };

  geojson.features.push(marker);
  map.getSource('custom').setData(geojson);
});

https://www.mapbox.com/mapbox-gl-js/example/measure/ 是证明这种行为的一个很好的例子。

Mapbox GL setData 使用多个标记更新图层

Mapbox GL setData to update layer with multiple markers

mapbox

mapbox-gl