Mapbox GL JS：从 geoJSON 动画几行

Question

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

我的 geoJSON 看起来像：

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

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

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

我想也许可以通过在这个例子中使用turf.along()来实现，但我对如何继续感到有些困惑。

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

Answer 1

我使用了 mapbox 中的 animateLine 函数并将map.getSource('line-animation').setData(geojson)更改为map.data.addGeoJson(geoJson)

Answer 2

按照MapBox 的这个示例进行操作，然后进行以下更改：

变化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);
        }

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