Mapbox GL JS: Animate several lines from geoJSON

Question

I'm trying to animate the lines (approx. 5000 lines) from a geoJSON in Mapbox GL.

My geoJSON looks like:

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

With the first array as the Origin and the second as the Destination .

I tried to follow the example from the API , however, in that example, they animate just a single line by updating the geoJSON in every frame and it's quite confusing for me.

I think maybe it can be possible by using turf.along() as in this example but I am a bit confused on how to proceed.

I would like to know if you have some ideas about how to iterate over my geoJSON and update the new one to achieve the same effect as I did by means of D3.js in this example .

Answer 1

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

Answer 2

Follow this example of MapBox and then make these changes:

Change 1: Add another object of line in features of geojson

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

Change 2: Add three lines of code in function animateLine . I have mentioned which lines to add in comments(Line 1, Line 2 and Line 3). After changes the function will look like this

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

If you want these lines to be independent of each other then you have to make few more changes to it.
This worked for me.