Question

我试图从Mapbox GL中的geoJSON设置线条（大约5000行）的动画。

我的geoJSON看起来像：

"geometry": {
     "type": "LineString",
     "coordinates": [
         [-77.011535895500003, 3.87547430591],
         [-74.105971599, 4.65052840264]
     ]
}

第一个数组为Origin，第二个数组为Destination。

我尝试按照example from the API进行操作，但是，在该示例中，它们通过更新每一帧中的geoJSON来动画一行，这对我来说非常困惑。

我想也许可以在this example中使用turf.along()，但我对如何处理感到有些困惑。

我想知道你是否有一些想法如何迭代我的geoJSON并更新新的geoJSON，以达到与我在example中通过D3.js所做的相同的效果。

Answer 1

我使用了mapbox中的animateLine函数，并更改了 Decodable至map.getSource('line-animation').setData(geojson)

Answer 2

遵循MapBox的示例，然后进行以下更改：

更改1：在features的{{1}}中添加另一行对象

geojson

更改2：在函数var geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [] } }, //this second object of features is for second line { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [] } }] };中添加三行代码。我已经提到了要添加注释的行（第1行，第2行和第3行）。更改后，功能将如下所示

animateLine

如果您希望这些行彼此独立，那么您必须对其进行更多更改。
这对我有用。

Mapbox GL JS：为geoJSON中的几行添加动画

2 个答案: