Mapbox GL setData用于更新具有多个标记的图层

问题描述 投票:6回答:1

我有一个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"
            }
          }]);

非常感激,如果有人可以通过告诉我我在做错了什么/在这里失踪来取悦帮助,谢谢

mapbox mapbox-gl
1个回答
16
投票

setData需要一个完整的GeoJSON对象(不仅仅是它的功能)或一个指向GeoJSON对象的URL。

您需要在代码中管理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/是一个很好的例子来证明这种行为。

© www.soinside.com 2019 - 2024. All rights reserved.