一、引用Leaflet脚本样式，和Leaflet Ant Path 插件
下载地址：
Leaflet：https://leafletjs.com/download.html
Leaflet Ant Path：https://github.com/rubenspgcavalcante/leaflet-ant-path
使用Leaflet Ant Path 插件要求Leaflet的版本大于等于1.0
<link href="~/Scripts/leafletjs/1.4.0/leaflet.css" rel="stylesheet" />
<script src="~/Scripts/leafletjs/1.4.0/leaflet.js"></script>
<script src="~/Scripts/leafletjs/1.4.0/leaflet-ant-path.js"></script>
二、地图初始化
/**
* 地图初始化
*/
function mapInit() {
var amapNormalUrl = '/api/Map/GetMap?type=783085212&zoom={z}&x={x}&y={y}';
var amapNormalLayer = new L.TileLayer(amapNormalUrl, {
minZoom: 1,
maxZoom: 18,
attribution: ''
}); var mapCenter = new L.LatLng(****，****);
gMap = new L.Map('MapContainer', {
center: mapCenter,
zoom: 16,
minZoom: 1,
maxZoom: 18,
layers: [amapNormalLayer]
});
}
三、画动态线段
//清楚上一次画的线段
if (gPath) {
gMap.removeLayer(gPath);
}
var longLatList =[[****,****],[*****,****]];//经纬度数组
var antPath = L.polyline.antPath;
gPath = antPath(longLatList, {
"paused": false, //暂停 初始化状态
"reverse": false, //方向反转
"delay": 3000, //延迟，数值越大效果越缓慢
"dashArray": [10, 20], //间隔样式
"weight": 3, //线宽
"opacity": 0.5, //透明度
//"color": "#0000FF", //颜色
//"pulseColor": "#FFFFFF" //块颜色
});
gPath.addTo(gMap); // 缩放地图到折线所在区域
gMap.fitBounds(gPath.getBounds());