leaflet 動態線渲染

 

能夠採用leaflet插件 leaflet-ant-path

 

...
<script src="js/leaflet-ant-path.js" type="text/javascript" charset="utf-8"></script>
...

　　//座標反轉，注：antPath爲路徑數組，座標格式爲[lon，lat]

　　//格式示例：var coords=[[-3.65358, -38.71431],[-3.66402, -38.71528],[-3.66861, -38.71573]]

　　var coords = [];
　　route.forEach(function(e, i) {
　　　　coords.push(e.reverse())
　　});

　　var antPath = L.polyline.antPath;
　　var path = antPath(coords, {
　　　　"paused": false,   　　//暫停  初始化狀態
　　　　"reverse": false,　　//方向反轉
　　　　"delay": 3000,　　　　//延遲，數值越大效果越緩慢
　　　　"dashArray": [10, 20],　//間隔樣式
　　　　"weight": 5,　　　　//線寬
　　　　"opacity": 0.5,　　//透明度
　　　　"color": "#0000FF",　//顏色
　　　　"pulseColor": "#FFFFFF"　　//塊顏色
　　});
　　path.addTo(map); 

//源地址 https://rubenspgcavalcante.github.io/leaflet-ant-path/

效果圖以下

 

L.polyline.antPath參數和方法