OSM: Programmierlinie zwischen zwei Punkten mit Fortschritt

Question

Für eine Übung/Projekt in PHP muss ich eine Route programmieren (mit Progression), aber ohne genau auf die zu entleihenden Straßen (wie wir auf GPS wissen) aber mit Linien zwischen zwei Punkten. Beispiel: example route

Die zusätzliche Schwierigkeit auf der Linie in die Lage ist, den Fortschritt anzuzeigen, von einem Prozentsatz starten, ist das Ziel, also ein Bild zu haben (wie Auto, den Mann oder Fahrrad) auf der geraden Linie. Ich habe bereits mit leaflet.js gearbeitet, aber wenn eine andere Bibliothek geeigneter ist, nehme ich sie an.

ich diese verwenden für den Moment, für die Punkte (Abfahrt und Ankunft):

function placeMarkerDepartureArrival() { 
    // Departure 
    L.marker([varGPS[0].lat, varGPS[0].lng], {icon:myIconAD}).addTo(map); 
    // Arrival 
    L.marker([varGPS[1].lat, varGPS[1].lng], {icon:myIconAD}).addTo(map); 
} 

Wenn Sie Beispiele oder Website haben, ich bin Nehmer.

Answer 1

Mapbox.js (basierend auf der Faltblatt-Mapping-Bibliothek) Beispiele für Animation und Plotten Linien auf ihrer Dokumentation Website hat, und freies Tier für Ihre Übung/Projekt

einen Punkt über eine Leitung

Animieren hat

Vom mapbox.js Website:

map.addSource('point', { 
    "type": "geojson", 
    "data": pointOnCircle(0) 
}); 

map.addLayer({ 
    "id": "point", 
    "source": "point", 
    "type": "circle", 
    "paint": { 
     "circle-radius": 10, 
     "circle-color": "#007cbf" 
    } 
}); 

function animateMarker(timestamp) { 
    // Update the data to a new position based on the animation timestamp. The 
    // divisor in the expression `timestamp/1000` controls the animation speed. 
    map.getSource('point').setData(pointOnCircle(timestamp/1000)); 

    // Request the next frame of the animation. 
    requestAnimationFrame(animateMarker); 
} 

// Start the animation. 
animateMarker(0); 

Link to example