这一节将为大家描述如何在vue中使用leaflet添加polyline轨迹

1. 添加单条轨迹路线

let line = []// 坐标数据组
let polyline = this.$L.polyline(line, {
	color: 'red',// 定义线的颜色
	weight: 1,// 定义线的宽度
	opacity: 1// 定义线的透明度
}).bindPopup('点击弹出文字内容')

polyline.addTo(this.map)
// 或者
this.map.addLayer(polyline)

2. polyline轨迹路线事件

下面以鼠标移入移出改变当前路线样式以及点击路线在该路线基础上绘制一条其他样式的路线的效果，如图

polyline.on('mouseover', () => {
	// 设置路线样式
	polyline.setStyle({
		color: 'pink',
		weigh: 2,
		opacity: 1
	})
	polyline.on('click', () => {
		let polyline2 = this.$L.polyline(line, {
			color: 'pink',
			weight: 2
		}).bindPopup('名称')
		this.map.addLayer(polyline2)
		if (this.polyline2) {
			this.map.removeLayer(this.polyline2)
			this.polyline2.clearLayers()
		}
		this.polyline2.addLayer(polyline2)
		this.polyline2.addTo(this.map)
	})
})

polyline.on('mouseout', () => {
	polyline.setStyle({
		color: 'red',
		weight: 1,
		opacity: 1
	})
})

this.map.on('click', () => {
	if (this.polyline2) {
		this.map.removeLayer(this.polyline2)
		this.polyline2.clearLayers()
	}
})