參考：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>