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