javascript - 复制点图层以进行仿真

Question

我正在尝试模拟城市交通运动（目前我只进入车辆）但我遇到了问题。

发生的情况是，我试图在地图上的每个点模拟 1 辆车，但我不知道如何复制某个图层（并且每个图层都有不同的路线），例如这个：

map.addSource('point', {
    "type": "geojson",
    "data": pointOnCircle(0)
});

map.addLayer({
    "id": "point",
    "source": "point",
    "type": "circle",
    "paint": {
        "circle-radius": 10,
        "circle-color": "#007cbf"
    }
});

我不知道我是否可以循环并生成具有不同名称的 N 个点，或者以其他方式进行。

这是我到目前为止所做的视频（为了模拟它，我创建了 2 个不同的图层，因为我不知道如何复制它们）：

https://www.youtube.com/watch?v=xWZD9aBUFlg

Answer 1

您应该将所有观点放在一个数据层中：

map.addSource('points', {
    "type": "geojson",
    "data": pointsOnCircle(0) // change this function to return multiple features
});

map.addLayer({
    "id": "points",
    "source": "points",
    "type": "circle",
    "paint": {
        "circle-radius": 10,
        "circle-color": "#007cbf" // possibly make this a data-driven function
    }
});

您的 GeoJSON 数据源如下所示：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          146.25,
          -37.16031654673676
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          138.515625,
          35.460669951495305
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -81.5625,
          33.43144133557529
        ]
      }
    }
  ]
}