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參數和方法