从已知坐标沿着一条线对一个点进行动画处理

Question

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

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

这是我掌握的信息，即我正在使用的信息：

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

我也很清楚如何实现动画。我不知道的是如何在动画时获取线旁边的位置。

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

有没有办法用 OpenLayers 完成这个？

更新

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

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

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

我希望这有助于理解我正在尝试做的事情。

Answer 1

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

首先，对于我拥有的每一个协调，我必须确保它们 "snap" 符合要求。我这样做是在 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 库的作者！

从已知坐标沿着一条线对一个点进行动画处理

Animate a point alongside a line from known coordinates

openlayers

openlayers-3

更新