从已知坐标沿线对点进行动画处理答案

【问题标题】：Animate a point alongside a line from known coordinates从已知坐标沿线对点进行动画处理
【发布时间】：2017-12-06 15:24:51
【问题描述】：

在使用 OpenLayers 4.5.0 的 JavaScript 应用程序中，我在地图中有一个线串和一个点。该点位于线串“上”。

现在，我想将点移动到线串上的其他位置，同时在给定的时间段内沿线设置动画。

这是我所拥有的信息，即我正在使用的信息：

我有该点的坐标
我有将点移动到的坐标
我有线串的几何形状
我知道两个坐标（起点和终点）都在直线上

我也有一个好主意如何实现动画。我不知道的是如何在制作动画时获取沿线的位置。

我知道ol.geom.LineString.prototype.getCoordinateAt 方法，它允许您获取给定分数的线串的坐标。我认为我需要的是相反的：我有坐标。 我需要开始和结束的分数。如果我有这些，我将能够在制作动画时计算两者之间的分数。

有没有办法通过 OpenLayers 来实现这一点？

更新

这是一张代表我想做的图片。下面有更多解释。

我只有一个线串和一个点。点在直线上（不在顶点处）
我得到了一个新位置，我想在其中移动点
我想在动画中沿线移动点。我画的箭头是我想要点移动的路径。换句话说，它是从点的原始位置及其目的地开始的线串的子部分。

如果我知道有问题的线串的 2 个部分（开头和结尾的部分），那么我可以在制作动画时检索该部分。例如，如果我知道起点是 0.2，终点是 0.8，那么我会知道如果我在动画中占 10%，那么我需要将我的点显示为 0.26。

我希望这有助于理解我想要做什么。

【问题讨论】：

例子你见过吗-->openlayers.org/en/latest/examples/feature-move-animation.html??????
是的。在其中，点从线串的一个顶点移动到另一个顶点。它永远不会在任何段上移动，即在两个顶点之间。我需要能够做到这一点。因此，该示例没有帮助。
我不太确定您到底想要完成什么。如果您只想在线段上移动，您可以创建多线几何，然后使用提供的示例。但正如所说，我不清楚你的目标是什么。不过，小提琴会有所帮助。
添加了一个 sn-p。
如果您遇到这种情况，请查看此示例 --> viglino.github.io/ol3-ext/examples/map.interaction.split.html。这不是您真正想要的，但它可能会对您有所帮助。

标签： openlayers openlayers-3

【解决方案1】：

我已经能够使用 ol-ext 库完成我需要做的事情，更具体地说，使用 splitAt 方法。这是我使用的食谱：

首先，对于我拥有的每个协调，我必须确保它们“对齐”到线路上。我使用 OpenLayers 中的 getClosestPoint 方法这样做，如下所示：

// Get "closest" start and end coordinates for segment computing
var closestStartCoordinate = lineString.getClosestPoint(startCoordinate);
var closestEndCoordinate = lineString.getClosestPoint(endCoordinate);

然后，如果我使用 splitAt 方法，我会得到多个片段。我需要的是起始坐标等于closestStartCoordinate，结束坐标等于closestEndCoordinate的那个。

就是这样！我有我的片段。在动画进行时，我可以使用片段中的getCoordinateAt 方法，具体取决于动画的经过时间来获取在进行时将我的点移动到的位置。

感谢@pavlos 指出这一点。感谢 ol-ext 库的作者！

【讨论】：