Mapbox GL - 添加具有特定 ID 的标记

Question

我有一个标记数组，我希望每个标记都有一个特定的 ID，这样我就可以调用每个标记并自行设置动画。

我要将它们添加到地图中：

map.addSource('markers', {
    "type": "geojson",
     "data": geojson
});

map.addLayer({
    "id": "markers",
     "type": "symbol",
     "source":"markers",
     "layout": {
         "icon-image": "airport-15",
         "text-field": "{title}",
         "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
          "text-offset": [0, 0.6],
          "text-anchor": "top"
       }
});

并且数据来自这个 geojson，它正在从函数中的文件中填充并且正在运行：

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

每个标记都是这种格式：

var marker = {
      type: 'Feature',
       geometry: {
           type: 'Point',
           coordinates: coordinate
       },
       properties: {
            title: key,
            description: '',
       }
 }

Answer 1

基本上我将所有 GeoJSON 数据添加到我调用的字典中：

markers = {}

然后，我用所有标记数据填充了这个字典，为每个标记数据提供了一个唯一的 id 作为键。这将使我无需使用两个 for 循环来检查更新了哪个标记（意味着它在原始数组和更新的标记数组中）并且还可以更容易地更新值（以完成标记的动画从原始位置到更新后的位置。

geojson.features = Object.values(markers);
map.getSource('markers').setData(geojson);

如果您找到另一种轻松定位 GeoJSON 数组中对象的方法，请分享！

Mapbox GL - 添加具有特定 ID 的标记

Mapbox GL - Adding a marker with a specific id

javascript

json

geojson

mapbox-gl-js