可视化直播动画移动标记

Question

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

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

有一个Leaflet JS API插件移动标记，但我无法解决。 它使用三个参数（2个位置和动画持续时间）。 我可以添加位置但无法控制持续时间。

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

myMovingMarker.start();

可视化实时移动跟踪的最佳方法是什么？ 我知道如果设备数据中有Speed参数，那么它是可能的。 遗憾的是，设备数据没有Speed参数。

Answer 1

为了正确地做到这一点，我发现你需要获得点对点路线，然后迭代点以在你的位置轮询之间的时间段内在路径上设置标记的动画。 我使用的基本方法是使用OSRM等服务获取从开始到结束位置的路由。 通常，您需要将编码折线转换为一组点，然后创建一个计时器，定期更新标记位置到折线中的点，即位置更新之间的时间比例。 因此，如果在点之间的折线路线中有300个点，并且您的位置更新是每30秒，您将设置一个触发每秒的定时器并将标记移动到点阵列的索引处（secs_since_geocode / 30 *点数） ）。 这可以被平滑甚至更多地动画从起始标记位置到新标记位置的过渡动画，尽管该方法需要确保在下一个定时器事件再次移动标记之前完成。

这是粗糙和丑陋但你可以在https://jsfiddle.net/pscott_au/1wt2o9Lw/看到一些有用的东西（需要等待大约20秒）

基本上我想要实现的是在获得通常以某个间隔（例如30秒）轮询的位置GPS坐标之间为标记提供某种过渡。 理想情况下，您希望显示标记在这些更新之间的位置之间平滑移动。 如果驾驶，理想情况下，您希望在预期的驱动路径上显示标记动画，因此需要从路由服务获取路径。 我正在使用公共OSRM服务，尽管您最好为此设置自己的后端或使用商业产品。 因此，当获得新位置时，方法是获取从最后位置到新位置的路线，然后沿着路径走向该位置。 最近的OSRM版本包括一个选项，可以将结果作为lat / lng点列表提供，因此无需解码编码折线。 因此，只需创建一个点队列，然后以500ms的小间隔关闭位置以移动标记。 另一个答案非常好，并提供了一种更好的平滑动画的方法。 路径是根据返回的结果构造的，如下所示：

    $.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 ) ] );
 }

 }
}); 

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

Answer 2

您的代码适用于我，请参阅http://playground-leaflet.rhcloud.com/tozo/edit?html,output

我可以添加位置但无法控制持续时间。

嗯，这是第二个参数，值为20000毫秒？