Javascript Mapbox GL JS：为geoJSON中的几行设置动画

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

我的geoJSON看起来像：

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

第一个数组作为

原点

，第二个数组作为

目标

我试着遵循，但是，在那个例子中，他们通过在每一帧中更新geoJSON来制作一行动画，这让我很困惑

我想也许可以像中一样使用

turp.along（）

，但我对如何继续有点困惑

我想知道您是否对如何迭代我的geoJSON并更新新的geoJSON有一些想法，以达到与我在本文中通过D3.js实现的效果相同的效果。

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

更改1:在

geojson的
features
中添加另一个行对象

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": []
                        }
                    }]
                };



更改2:在函数
animateLine
中添加三行代码。我已经提到了在注释中添加哪些行（第1行、第2行和第3行）。更改后，函数将如下所示

function animateLine(timestamp) {
                            if (resetTime) {
                                // resume previous progress
                                startTime = performance.now() - progress;
                                resetTime = false;
                            } else {
                                progress = timestamp - startTime;
                            }

                            // restart if it finishes a loop
                            if (progress > speedFactor * 360) {
                                startTime = timestamp;
                                geojson.features[0].geometry.coordinates = [];
                                geojson.features[1].geometry.coordinates = [];  //Line 1
                            } else {
                                let x = progress / speedFactor;
                                // draw a sine wave with some math.
                                let y = Math.sin(x * Math.PI / 90) * 40;
                                let y2 = Math.cos(x * Math.PI / 90) * 40;       //Line 2
                                // append new coordinates to the lineString
                                geojson.features[0].geometry.coordinates.push([x, y]);
                                geojson.features[1].geometry.coordinates.push([x, y2]); //Line 3
                                // then update the map
                                map.getSource('line-animation').setData(geojson);
                            }
                            // Request the next frame of the animation.
                            animation = requestAnimationFrame(animateLine);
        }

如果您希望这些线彼此独立，那么您必须对其进行更多的更改。
这对我很有效。
我使用了mapbox中的animateLine函数并更改了
map.getSource（'line-animation'）.setData（geojson）
到
map.data.addGeoJson（geojson）
你有没有想过这个问题？没有，我不得不使用D3。然而，通过使用这个，我能够在传单上做到这一点