OSM: программирование линии между двумя точками с прогрессом

Question

Для выполнения упражнения / проекта в PHP мне нужно запрограммировать маршрут (с прогрессией), но не точно, чтобы брать улицы (как мы знаем по GPS), но с линиями между двумя точками. Пример: пример маршрута

Дополнительная трудность состоит в том, чтобы иметь возможность отображать прогресс на линии, начиная с процента, поэтому цель состоит в том, чтобы иметь изображение (например, автомобиль, человек или велосипед) на прямой линии. Я уже работал с leaflet.js, но если другая библиотека больше подходит, я беру.

Я использую это на данный момент, для очков (отправление и прибытие):

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);
}

Если у вас есть примеры или сайт, я беру.

Answer 1

Mapbox.js (на основе библиотеки отображения листовок) имеет примеры анимации и линий прорисовки на своем веб-сайте документации и имеет бесплатный уровень для вашего упражнения / проекта.

Анимация точки над линией

С сайта mapbox.js:

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);

Ссылка на пример