leaflet-线的绘制与带箭头的线

1.创建空的图层组

this.xiangroup = L.featureGroup([]) //创建图层
this.map.addLayer(this.xiangroup)

2.绘制,使用L.polyline（记住两点一线，如果只有一个点的经纬度，是没有线的）

var latlngs = [ //线中点的经纬度点
    [38, 0],
    [38, 180],
    [0, 0]
]
this.polyline = L.polyline(latlngs, {
    color: 'red',//线的颜色
    weight: 3 //线的粗细
}).addTo(this.xiangroup);

3 .如果要对线进行重新绘制，或者改变可以使用setLatLngs方法

//this.polyline是上面已经绘制好的线
//latlngs为这条线的各个新经纬度点
this.polyline.setLatLngs(latlngs)

如果要让线隐藏或清空，可以将latlngs设为[] 就可以了。当然也可以清空图层重新绘制，看需求操作。

4.带箭头的线
需求中需要标记方向时，可以引入leaflet中的leaflet-polylinedecorator插件来实现

npm install leaflet-p