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

如果您希望這些行彼此獨立，那么您必須對其進行更多更改。
這對我有用。