Leaflet 地图大数据打点 1秒10W点

当地图上需要大量渲染点的时候，一般都是用到聚类的方法来减轻浏览器的负担，或者规定渲染范围。但是我有一个项目需要大量渲染点，同时不能用聚类和规定渲染范围。这时就发现了一个Leaflet的插件 leaflet.canvas-markers.js

使用方法也很简单，git地址：https://github.com/eJuke/Leaflet.Canvas-Markers 

在vue中引入 npm install leaflet-canvas-marker

或者引入JS文件 

<script src="leaflet.canvas-markers.js"></script>

个人推荐使用引入JS文件，并且需要把他里面的源码拿出来，因为他的清空屏幕的方法

ciLayer.clearLayers()

是没有抛出来的，所以想要用到这个方法的话最好把它拿出来放到自己的JS文件中。

使用方法：

// 在地图上添加一个canvas图层
var ciLayer = L.canvasIconLayer({}).addTo(map);

// 创建marker图标，图标属性必须要有以下属性
var icon =  L.icon({
                        iconUrl: iconUrl,
                        iconSize: [circleSize * 2, circleSize * 2],
                        iconAnchor: [0, 0],
                        popupAnchor: [0, 0]
                    }
// 创建点 
var marker =  L.marker([58.5578, 29.0087], {icon: icon});


// 把点添加到canvas图层中
ciLayer.addMarker(marker);


// 删除图层中的点
ciLayer.removeMarker(marker, true)

注意：如果是把JS文件拿出来的需要安装依赖 npm install rbush