沿线移动标记、React native、Mapbox 或 react native 地图答案

【问题标题】：Moving a marker along a line, React native, Mapbox or react native maps沿线移动标记、React native、Mapbox 或 react native 地图
【发布时间】：2018-01-31 13:21:23
【问题描述】：

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

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

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

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

【问题讨论】：

我会很高兴您在 mapbox react native 上绘制一条线的代码。请您分享代码。
在您的状态下，有一个变量，它是 linestring 类型的 geojson。这需要两个以上的坐标，这基本上是您通过线的点数。 “很棒”的 mapbox 文档在向您展示折线标记时忽略了提及的是，您需要将其包装在 MapboxGL 标记下的 shapeSource 标记中。在 this.state 中，我放置了一个名为 route 的 geojson 变量。这就是你绘制它的方式
请给我插入带有坐标的路线并将其设置为 linestring 类型的 geojson 的代码部分。如果你足够好，请给我下面的 googledrive 链接作为包含代码的评论
@Amalp 您应该将此作为问题提出，以便将来每个人都可以从答案中受益。我已经解释了所有这些，但我可以发布一个完整的例子作为答案而不是评论。这不是平台应该使用的方式。
我已经在这里发布了一个问题是链接发布它作为答案请我绝望stackoverflow.com/questions/48878646/…

标签： react-native mapbox mapbox-gl-js mapbox-gl react-native-maps

【解决方案1】：

对于动画，您大约需要两件事：

沿其路径的标记位置。您已经有了起点和终点位置，所以您可以使用Turf.along(line, distance 获得一步一步的位置。
动画。使用requestAnimationFrame 甚至setTimeout，您可以每隔x 秒（您可以根据时间戳改变它）将标记位置更新为下一个位置（您可以通过增加distance 参数获得）。

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

【讨论】：

我看过那个例子，但我使用的是 react native。他们的 react native github 页面上的示例也没有记录，所以我无法理解。你能告诉我一个如何使用它的例子吗？简单地给它两个位置，你会如何动画它？
我不知道 React Native，但我想你可以在第二步中使用 Timers。