Visualizzazione di testo animato animato Marker

Question

Ho una soluzione di mappatura che utilizza OpenStreetMaps, Leaflet JS API e PostGIS Database. Ho un'API che viene chiamata dal dispositivo di tracciamento. Il dispositivo invia dati (longitudine e latitudine) con un intervallo di 30 secondi. Ho tracciato i dati sulla mappa come marker e disegno polilinea unendo il marker. Ora ho bisogno di tracciare marcatori di tracciamento dal vivo e animati. Sto cercando una soluzione simile alla seguente immagine GIF.

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

C'è un plugin di Volantino JS API Chiamato Moving Marker ma non sono riuscito a risolvere. Usa tre parametri (2 posizione e durata dell'animazione). Posso aggiungere la posizione ma non posso controllare la durata.

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

myMovingMarker.start(); 

Qual è il modo migliore per visualizzare il tracciamento del movimento in tempo reale? So che se esiste un parametro Speed ​​nei dati del dispositivo, allora può essere possibile. Sfortunatamente non esiste un parametro Speed ​​dai dati del dispositivo.

Answer 1

Per fare ciò correttamente ho scoperto che è necessario ottenere il percorso point-to-point e quindi scorrere i punti per animare il marcatore lungo il percorso nel periodo tra il polling della posizione. L'approccio di base che ho usato è quello di ottenere il percorso dalla posizione dall'inizio alla fine utilizzando un servizio come OSRM. In genere è necessario tradurre la polilinea codificata in un insieme di punti e quindi creare un timer che aggiorna periodicamente la posizione dell'indicatore sul punto della polilinea che è la proporzione del tempo tra gli aggiornamenti di posizione. Quindi se hai 300 punti nel tuo percorso polilinea tra i punti e il tuo aggiornamento di posizione è ogni 30 secondi, devi impostare un timer che si attiva ogni secondo e sposta il marker sull'indice dell'array punti a (secs_since_geocode/30 * numero di punti). Questo potrebbe essere ulteriormente livellato animando la transizione dalla posizione del marcatore iniziale alla nuova posizione dell'indicatore, sebbene l'approccio avrebbe bisogno di essere completato prima che il successivo evento del timer spostasse nuovamente il marcatore.

E 'ruvida e brutta, ma si può vedere qualcosa che funziona (è necessario attendere circa 20 secondi) a https://jsfiddle.net/pscott_au/1wt2o9Lw/

Fondamentalmente quello che sto cercando di realizzare è quello di fornire un qualche tipo di transizione per il marcatore tra ottenere la posizione Coordinate GPS che verrebbero tipicamente interrogate in un intervallo (ad esempio 30 secondi). Idealmente, si desidera mostrare l'indicatore spostandosi agevolmente tra le posizioni tra questi aggiornamenti. Se stai guidando preferisci mostrare il marker che si sta animando lungo il percorso previsto e quindi devi ottenere un percorso da un servizio di routing. Sto usando il servizio pubblico OSRM sebbene tu possa idealmente configurare il tuo back-end per questo o usare un'offerta commerciale. Quindi, quando si ottiene una nuova posizione, l'approccio è quello di ottenere il percorso dall'ultima posizione alla nuova posizione e quindi procedere verso quella posizione lungo il percorso. Le versioni OSRM più recenti includono un'opzione per fornire il risultato come una lista di punti lat/lng, quindi non c'è bisogno di decodificare la polilinea codificata. Quindi, è sufficiente creare una coda di punti e quindi posizionare le locazioni su un piccolo intervallo di 500 ms per spostare l'indicatore. L'altra risposta è eccellente e fornisce un buon approccio per migliorare ulteriormente l'animazione. Il percorso è costruito dal risultato restituito come segue:

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

} 
}); 

Nel corso dei prossimi due giorni lo farò affinare e pulire questo in su e quindi aggiornare questa risposta.

Answer 2

Il codice funziona per me, vedere http://playground-leaflet.rhcloud.com/tozo/edit?html,output

posso aggiungere la posizione, ma non può controllare la durata.

Erm, è il secondo parametro, con un valore di 20000 msecs?