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/

效果图如下