可視化直播動畫移動標記

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毫秒？