react-native - 沿线移动标记、React native、Mapbox 或 react native map

Question

我将显示几个标记沿各自路径的移动。我有每个标记的坐标数组。

marker1=[[lan1,lon1],[lan2,lon2],[lan3,lon3],[lan4,lon4],....]

我已经设法为坐标绘制了一个线层，但我需要为标记设置动画以使其从起始位置移动到目的地。

我还有更多信息，例如记录的每个坐标的时间戳。我正在使用 Mapbox，但 react-native-maps 的解决方案也会有所帮助!

Answer 1

对于动画，您大致需要两件事:

1. 沿其路径的标记位置。您已经有了起始位置和目标位置，因此可以使用 Turf.along(line, distance有一个循序渐进的位置。
2. 动画。用requestAnimationFrame甚至 setTimeout您可以每隔 x 秒更新一次标记位置(您可以根据时间戳改变它)和下一个位置(通过增加 distance 参数获得)。

您可以在 Mapbox GL JS examples 上找到完整示例.