OSM:两点之间的编程线进展

时间:2017-01-08 19:48:10

标签: php leaflet line openstreetmap progress

对于PHP中的练习/项目,我必须编写一个路线(有进展),但不准确地借用街道(正如我们在GPS上所知)但是在两点之间有线。 例: example route

额外的困难是能够在线上显示进度,从百分比开始,因此目标是在直线上有一个图像(如汽车,人或自行车)。 我已经使用过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);
}

如果您有任何示例或网站,我是接受者。

1 个答案:

答案 0 :(得分:0)

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

Link to example