leaflet 绘制带箭头的线条（路径）

最近接到项目需求，需要在网页上实时展示APP用户巡检的轨迹，这个需求很简单，直接用leaflet画polyline就可以满足；很快便出了一版效果很项目经理，但是项目经理一看，说：这个和百度地址的路径展示差距太大，要求实现的效果和百度地图一样。OK，经过请教百度老师，发现leaflet的polylineDecorator可以满足此需求。经过实践，效果还不错，故分享出来，供参考和指导。

1、引入 leaflet.min.js 和 leaflet.polylineDecorator.js

访问polylineDecorator的github地址：https://github.com/bbecquet/Leaflet.PolylineDecorator，并下载到本地，解压，在dist目录下，便有leaflet.polylineDecorator.js文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script src="../dist/leaflet.polylineDecorator.js"></script>

2、绘制带箭头的线条

// 经纬度数组
let pointList = [
  {lttd : '32.7302595',lgtd : '111.4355275'},
  {lttd : '32.7301595',lgtd : '111.4345275'},
  {lttd : '32.7300595',lgtd : '111.4335275'},
  {lttd : '32.7299595',lgtd : '111.4325275'}
  ....
  ....
  ....
];

// 需要先初始化leaflet地图，再调用drawPolyLine方法
drawPolyLine(pointList);

// 绘制带箭头的线条（路径）
drawPolyLine(list){
     for(let [index,item] of list.entries()){
         console.log(index);
         let polyline = null;
         let dataArr = [];
         dataArr.push([item.lttd,item.lgtd]);
         polyline = L.polyline(dataArr, {color: '#ff0000',weight:10}).addTo(this.map);
         L.polylineDecorator(polyline, {
             patterns: [
                 {
                     offset: 30,   // 箭头起始位置距离线条两端的距离
                     repeat: 60,  // 箭头重复的间隔
                     symbol: L.Symbol.arrowHead({
                         pixelSize: 5,  // 箭头大小
                         headAngle : 75,  // 角度
                         polygon: false,
                         pathOptions: {stroke: true, weight: 4, color: '#fff'}
                     })
                 }
             ]
         }).addTo(this.map);
         this.polylineGroup.push(polyline);
     }
     
 }

效果

demo地址：https://download.csdn.net/download/zcylyzhi4/86728716