vue leaflet地图leaflet-canvas-marker海量点不卡顿，拖拽，缩放地图, 海量点清空，不卡顿

vue leaflet地图marker海量点

支持：拖拽地图，放大缩小地图，海量点清空，海量点重新标点不卡顿

vue 使用leaflet地图过程省略

leaflet 海量点

1、安装依赖

npm i leaflet-canvas-marker-xrr2021

2、在vue页面中引入依赖包

import('leaflet-canvas-marker-xrr2021')

3、初始化地图后，创建canvasIconLayer容器

that.ciLayer ： 为海量标点创建的变量名

that.ciLayer = L.canvasIconLayer({}).addTo(map);
that.ciLayer.addOnClickListener(function (event, data) {});

4、进行marker标点

filterPoint(bounds) {
	let that = this;
	if (that.filterArr.length == 0) {   //在标点前，先清空已有标点。
       that.ciLayer.removeLayers(that.layers)
       return
  	 } else {
       that.ciLayer.removeLayers(that.layers)
	 }
	that.layers = [];  // 存放海量点的数组
	that.filterArr.map(point => {
        let str = `<span class="mapLetter">${point.gajgDwmc}</span>`;
        var myIcon1 = L.icon({
          iconUrl: require('../../../../assets/images/full-screen/dz.png'),
          iconSize: [14, 22],
          iconAnchor: [12, 22]
        });
         let wgs = toWGS.bd09togcj02(Number(point.sjdzDqjd), Number(point.sjdzDqwd))  // 转换坐标，依据自己需求
        let market = L.marker([wgs[1], wgs[0]], {icon: myIcon1, title: point.gajgDwmc, alt: point.gajgdwbm})
        that.layers.push(market)
        market.on({click: clickEvt})
      })
	that.ciLayer.addLayers(that.layers);   //海量点标点
}

5、清除海量点

1、全部清除：根据自己的逻辑，在需要清除海量点的地方，加入清除代码。不会造成卡。

that.ciLayer.removeLayers(that.layers)

2、按条清除：标点量大于300个的情况下一个一个点清除，在拖拽地图时，会导致地图卡。

 that.layers.map(item=>{
      that.ciLayer.removeLayer(item);
})

3、结合1、2点，所以博主的海量点标点逻辑是：在进行海量点标点前，先把海量点用1方法一次性情空，再把新的海量点放入数组that.layers中，然后重新进行标点（参考4、进行marker标点）

6、地图拖拽，海量点重新标点，获取新的地图区域，进行区域内标点

this.map.on('dragstart', function (e) {
          let bounds = that.map.getBounds() 
          that.filterPoint(bounds)    //调用4marker标点方法
      })

7、地图放大缩小，海量点标点

this.map.on('zoom', function (e) {
          let bounds = that.map.getBounds()
          that.filterPoint(bounds)  //调用4marker标点方法
      })