参考：https://www.cnblogs.com/vichang/p/9438870.html
leaflet-antvPath官网：https://github.com/rubenspgcavalcante/leaflet-ant-path
leaflet-antvPath官网2：https://rubenspgcavalcante.github.io/leaflet-ant-path/
示例：
<html>
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="./dist/leaflet.css">
<script src="./dist/leaflet.js"></script>
<script src="./dist/leaflet-ant-path.js"></script>
<!-- <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> -->
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.14&key=781070f0aec19a13b3e2615a0c131d4a"></script>
<style>
body {
margin: 0px;
}
#heading {
text-align: center;
padding: 20px;
background: #333;
color: #CCC;
}
a {
color: #3388ff;
}
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: #333;
}
.leaflet-canvas-layer {
opacity: 0.55;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script>
//------------------------------------------------------------------------
var map = L.map('map', {
center: [31.95789128, 120.64626101],
zoom: 11,
maxzoom: 18,
minzoom: 1,
zoomControl: false, // 是否默认缩放控件添加到地图
editable: true, // 用于测绘
});
L.tileLayer('http://mt3.google.cn/vt/lyrs=m@207000000&hl=zh-CN&gl=CN&src=app&s=Galile&x={x}&y={y}&z={z}', {
attribution: '<a href="#">google leaflet</a>',
maxZoom: 18,
}).addTo(map);
// ----------------地图标记点位---------------------
// L.marker([31.95789128, 120.64626101]).addTo(map)
// .bindPopup('info')
// .openPopup();
// -----------------地图标记点位--------------------------
//---------------------------------------------------------------------------------------------
let arrs = [
[31.30, 120.58], // 苏州市
[31.32, 120.63], // 平江区
[31.30, 120.63], // 沧浪区
[31.95789128, 120.64626101],
[31.30, 120.75], // 虎丘区
];
//---------------------高德地图--------------------------
// var polygon = L.polygon(arrs, { // color: 'green', // fillColor: '#f03', // fillOpacity: 0.5 // }).addTo(map);
// var map = new AMap.Map('map', {
// zoom: 11,//级别
// center: [120.64626101, 31.95789128],//中心点坐标
// viewMode: '3D'//使用3D视图
// });
//---------------------高德地图--------------------------
//---------------------leaflet-antvPath--------------------------
var antPath = L.polyline.antPath;
var path = antPath(arrs, {
"paused": false, //暂停 初始化状态
"reverse": false, //方向反转
"delay": 3000, //延迟，数值越大效果越缓慢
"dashArray": [10, 20], //间隔样式
"weight": 5, //线宽
"opacity": 0.5, //透明度
"color": "#0000FF", //颜色
"pulseColor": "#FFFFFF" //块颜色
});
path.addTo(map);
//---------------------leaflet-antvPath--------------------------
</script>
</html>