ライブアニメーション移動マーカーを視覚化

Question

私はOpenStreetMaps、リーフレットJS APIとPostGISデータベースを使用しているマッピングソリューションを持っています。トラッキングデバイスから呼び出されるAPIがあります。デバイスは30秒の間隔でデータを送信します（経度と緯度）。私は地図上のデータをマーカーとしてプロットし、マーカーに結合してポリラインを描画します。今私は追跡の生き生きとアニメーションのマーカーをプロットする必要があります。私は、次のgifイメージに似た解決策を探しています。

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

ありMoving Marker呼び出さリーフレットのJS APIのプラグインがあるが、私は解決することができませんでした。 3つのパラメータ（2つの場所とアニメーションの長さ）を使用します。私は場所を追加することができますが、期間を制御することはできません。

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

myMovingMarker.start(); 

ライブ移動追跡を視覚化する最も良い方法は何ですか？私は、デバイスのデータに速度パラメータがある場合、それが可能であることを知っています。残念ながら、デバイスデータからのSpeedパラメータはありません。

Answer 1

これを正しく実行するには、ポイントツーポイントルートを取得してから、そのポイントを繰り返して、その場所のポーリング間隔の間にマーカーをアニメーション化する必要があることがわかりました。私が使用した基本的なアプローチは、OSRMなどのサービスを使用して、最初から最後までのルートを取得することです。通常、エンコードされたポリラインをポイントのセットに変換してから、マーカの位置を、ポリライン内の位置の更新の間の時間の割合であるポイントまで定期的に更新するタイマーを作成する必要があります。したがって、ポイント間のポリラインルートに300ポイントがあり、ロケーション更新が30秒ごとである場合は、1秒ごとにトリガーするタイマーを設定し、マーカーをポイント配列のインデックスに移動します（secs_since_geocode/30 *ポイント数）。 これは、次のタイマーイベントがマーカを再び動かす前に、完了することを確実にする必要があるが、開始マーカ位置から新しいマーカ位置への遷移をさらにアニメ化することができる。

それは荒く、醜いですが、あなたは私が達成しようとしているものを基本的にhttps://jsfiddle.net/pscott_au/1wt2o9Lw/

で働いて何か（約20秒を待つ必要がある）を見ることができる場所を取得間のマーカーのための移行のいくつかの種類を提供することです典型的にはある間隔（例えば30秒）でポーリングされるGPS座標。理想的には、これらの更新の間の位置の間でマーカーが円滑に動くようにしたいと考えています。運転している場合、理想的には、予想されるドライブパスに沿ってマーカーをアニメーション表示し、ルーティングサービスからパスを取得する必要があります。私は公的なOSRMサービスを使用していますが、あなたは理想的にはこのために独自のバックエンドを設定するか、商用サービスを使用します。 新しい場所が得られたら、最後の場所から新しい場所へのルートを取得し、パスに沿ってその場所に向かいます。より最近のOSRMのバージョンには、緯度/経度点のリストとして結果を提供するオプションが含まれているため、コード化されたポリラインをデコードする必要はありません。だから、単にポイントのキューを作成し、マーカーを移動するために500msという小さな間隔で位置をポップする必要があります。 もう1つの答えは優れており、アニメーションをさらにスムーズにするための良いアプローチを提供します。 次のようにパスが返された結果から構成されています

$.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

を参照してください。

Erm、これは2番目のパラメータで、値は20000ミリ秒ですか？