javascript - 可视化实时动画移动标记

Question

我有一个使用 OpenStreetMaps、Leaflet JS API 和 PostGIS 数据库的 map 解决方案。我有一个从跟踪设备调用的 API。设备以 30 秒的间隔发送数据(经度和纬度)。我已将 map 上的数据绘制为标记，并通过连接标记绘制多段线。现在我需要绘制实时和动画跟踪标记。我正在寻找类似于以下 gif 图像的解决方案。

https://i.imgur.com/KrOy634.gif

有一个名为Moving Marker 的Leaflet JS API 插件但我无法解决。它使用三个参数(2 个位置和动画持续时间)。我可以添加位置但无法控制持续时间。

var myMovingMarker = L.Marker.movingMarker([[48.8567, 2.3508],[50.45, 30.523333]],
                        [20000]).addTo(map);

myMovingMarker.start();

可视化实时移动跟踪的最佳方式是什么？我知道如果设备数据中有速度参数，那么它是可能的。不幸的是，设备数据中没有速度参数。

Answer 1

要正确执行此操作，我发现您需要获取点对点路线，然后遍历这些点以在位置轮询之间的时间段内为路径上的标记设置动画。我使用的基本方法是使用 OSRM 等服务获取从起点到终点的路线。通常，您需要将编码的多段线转换为一组点，然后创建一个计时器，该计时器会定期将标记位置更新为多段线中的点，即位置更新之间的时间比例。因此，如果您在点之间的多段线 route 有 300 个点，并且您的位置更新每 30 秒一次，您将设置一个每秒触发一次的计时器，并将标记移动到点数组的索引处(secs_since_geocode/30 * 点数). 这可以更平滑地动画化从起始标记位置到新标记位置的过渡，尽管该方法需要确保在下一个计时器事件再次移动标记之前完成。

它粗糙而丑陋，但你可以在 https://jsfiddle.net/pscott_au/1wt2o9Lw/ 看到一些有用的东西(需要等待大约 20 秒)

基本上我想要实现的是为标记提供某种在获取位置 GPS 坐标之间的转换，这通常会在某个时间间隔(比如 30 秒)进行轮询。理想情况下，您希望显示标记在这些更新之间的位置之间平滑移动。如果开车，您理想情况下希望显示沿预期行驶路径动画的标记，因此需要从路由服务获取路径。我正在使用公共(public) OSRM 服务，尽管您最好为此设置自己的后端或使用商业产品。 因此，当获得新位置时，方法是获取从上一个位置到新位置的路线，然后沿着路径向该位置前进。最近的 OSRM 版本包括一个选项，可以将结果作为经纬度点列表提供，因此无需解码编码的折线。所以只需要创建一个点队列，然后以 500 毫秒的小间隔弹出位置以移动标记。 另一个答案非常好，提供了一种进一步平滑动画的好方法。 路径是根据返回的结果构建的，如下所示:

    $.ajax({ 
  url: url, 
 success: function(data){

 //console.log( 'Got route ' + JSON.stringify(data.route_geometry) );
 // if we assume that we have 30 secs until the next geo location then we need to animate 
 // across this path for this duration - to demonstrate we will animate every 2 secs over 20 secs
 // so to calculate the index offset we will divide the number of points in our path by 20
route_geometry = [];
// console.log( data.route_geometry );
var inc_offset = $(data.route_geometry ).size() / 20;
for (i = 0; i < 20; i++) { 
   console.log(i + ' x inc_offset of ' + inc_offset );
   route_geometry.push( data.route_geometry[ Math.round(i*inc_offset ) ] );
 }

 }
}); 

在接下来的几天里，我将完善和清理它，然后更新这个答案。