当项目中出现需要大量点图标需要渲染时，使用img图片的方式，页面会十分卡顿，所以leaflet也提供了一些插件可以使用，leaflet-canvas-marker加载海量点。

1. 安装leaflet-canvas-marker

npm install leaflet-canvas-marker -S

2. main.js中引入leaflet-canvas-marker

import 'leaflet-canvas-marker'

3. 加载海量点

// 新建一个海量点图层组
let layerGroup = this.$L.canvasIconLayer()
// 将canvas图层组添加到map中
let layerGroup.addTo(this.map)

let getMarker = (item) => {
	let marker = this.$L.marker(item.latlng, {
		icon: this.$L.icon({
			iconUrl: iconUrl,
			iconSize: iconSize,
			iconAnchor: [0, 0],
			popupAnchor: [0, 0]
		}),
		item: item// 将item数据添加到marker中
	})
	return marker
}

// 循环添加marker
data.forEach(item => {
	layerGroup.addMarker(getMarker(item))
}

4. 海量点点击事件和鼠标移入事件

// 移入事件
layerGroup.addOnHoverListener((e, data) => {
	// 这里会获取你鼠标移入marker的item数据
	let item = data[0].data.options.item;
	let popup = this.$L.popup({
		className: 'className',
		offset: [0, 0]// 弹窗偏移
	}).setLatLng(item.latlng).setContent(`<div>内容${name}</div>`).addTo(this.map);// 自定义弹窗内容
})
// 点击事件
layerGroup.addOnClickListener((e, data) => {})

下一节：vue+leaflet添加polyline轨迹