可视化直播动画移动标记

Question

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

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

有一个Leaflet JS API插件Moving Marker，但我无法解决。它使用三个参数（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秒）

基本上我想要实现的是在获取位置GPS坐标之间为标记提供某种过渡，这通常以某个间隔（例如30秒）进行轮询。理想情况下，您希望显示标记在这些更新之间的位置之间平滑移动。如果驾驶，理想情况下，您希望在预期的驱动路径上显示标记动画，因此需要从路由服务获取路径。我正在使用公共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毫秒？