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

时间:2016-03-27 12:51:28

标签: mapbox mapbox-gl

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

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

1 个答案:

答案 0 :(得分: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/是演示此行为的一个很好的示例。