作為一名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）沒有作用。

二、借助插件 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);

注意

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

不過已經有人對這個問題提出了解決方案，并且解決了（鏈接），只是代碼一直沒有被合并。不過這都沒有關系，我們可以去用那份兒已經解決的代碼（鏈接）

解決以后的效果：

完整代碼

在線示例

完整代碼

總結

leaflet支持兩種渲染方式，svg 和 canvas，canvas的顯示性能要明顯優于svg。

IE9之前版本瀏覽器不支持canvas方式渲染。

默認是svg方式渲染，要手動切換成canvas方式。

渲染方式設置成canvas后，加載矢量圖形性能會提升，加載圖片標記的效率仍然低。

通過Leaflet.Canvas-Markers插件來提升圖片標記的顯示效率。

Leaflet.Canvas-Markers插件在縮放地圖時有bug，需要在github上找已經解決此bug的版本。

---

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

關注《GIS兵器庫》的公眾號， 可以第一時間獲得更多GIS文章

http://weixin.qq.com/r/JS62rsjEspXNrYzN93s3 (二維碼自動識別)

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

總結

以上是生活随笔為你收集整理的leaflet大量marker卡顿_leaflet如何加载10万数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。