leaflet如何加載10萬數據

做爲一名GIS開發者，你工做中必定遇到過這種問題，根據業務設計，須要在地圖上添加1萬+條數據，數據或是點、或是線、或是面。但無論哪一種，當你添加到5000條時，地圖操做就會出現明顯的卡頓。當你添加超過1萬條時，數據加載就會卡頓，瀏覽器出現卡死的狀態，地圖加載後，每挪動一下地圖，都要耐心的等待上幾秒鐘。

這種交互體驗，用戶是確定接受不了的，解決方法一般分兩種，一種是去作深刻的用戶需求分析，看用戶想一次性加載這麼多數據是爲了看什麼，想看的這個東西，經過其它技術方式能不能實現。另外一種就是死磕技術，研究如何提高地圖性能。咱們今天只討論第二種狀況。

canvas渲染方式

leaflet支持兩種渲染方式，svg 和 canvas，默認是svg渲染，這樣能夠兼容低版本的IE瀏覽器。canvas渲染須要IE9+，或谷歌、火狐的高版本瀏覽器。canvas比svg性能好，我本身作了簡單的測試，svg模式加載5000個圖片標記時出現的卡頓狀況，用canvas模式，加載10萬條數據時纔會出現。

下面講如何徹底切換到canvas模式，共兩步：

一，在初始化地圖時，設置map的 preferCanvas 屬性爲 true，代碼以下：

var map = L.map('map', {
    center: [39.905963, 116.390813],
    zoom: 13,    
    preferCanvas: true
});

這個設置只針對繼承了Path類的矢量圖層有效，包括圓點（CircleMarker）、線（Polyline）、面（Polygon）、圓（Circle）、矩形（Rectangle）。針對圖片標記（Marker）沒有做用。

2、藉助插件 Leaflet.Canvas-Markers，提高Marker的顯示性能。插件git地址：https://github.com/eJuke/Leaflet.Canvas-Markers

Leaflet.Canvas-Markers 插件

Leaflet.Canvas-Markers 插件提供了一個 L.canvasIconLayer 類，這個類是一個圖層，將 Marker 添加到這個圖層中時，這個圖層會以 canvas 方式渲染 Marker 中的圖片。

如何使用

在html中引入插件

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

建立canvasIconLayer圖層，把圖層添加到地圖，給圖層添加圖片標記。

// 建立圖層，添加到 map
var ciLayer = L.canvasIconLayer({}).addTo(map);

// 定義 Marker
var marker =  L.marker([58.5578, 29.0087], {icon: icon});

// 把 Marker 添加到圖層
ciLayer.addMarker(marker);

注意

這個插件有個問題，就是地圖縮放時，添加的數據不跟着同步縮放，而是等到縮放完成後，再去縮放。這樣感受縮放時，數據在飄着。

不過已經有人對這個問題提出瞭解決方案，而且解決了（連接），只是代碼一直沒有被合併。不過這都沒有關係，咱們能夠去用那份兒已經解決的代碼（連接）

解決之後的效果：

完整代碼

在線示例

完整代碼

總結

1. leaflet支持兩種渲染方式，svg 和 canvas，canvas的顯示性能要明顯優於svg。
2. IE9以前版本瀏覽器不支持canvas方式渲染。
3. 默認是svg方式渲染，要手動切換成canvas方式。
4. 渲染方式設置成canvas後，加載矢量圖形性能會提高，加載圖片標記的效率仍然低。
5. 經過Leaflet.Canvas-Markers插件來提高圖片標記的顯示效率。
6. Leaflet.Canvas-Markers插件在縮放地圖時有bug，須要在github上找已經解決此bug的版本。

---

本文會常常更新，請閱讀原文：http://gisarmory.xyz/blog/index.html?blog=leaflet100ThousandData，以免被陳舊、錯誤的知識誤導。

關注《GIS兵器庫》的公衆號， 能夠第一時間得到更多GIS文章

本文章採用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、從新發布，但務必保留文章署名《GIS兵器庫》（包含連接：  http://gisarmory.xyz/blog/），不得用於商業目的，基於本文修改後的做品務必以相同的許可發佈。