作為一名GIS開發(fā)者，你工作中一定遇到過這種問題，根據(jù)業(yè)務(wù)設(shè)計(jì)，需要在地圖上添加1萬+條數(shù)據(jù)，數(shù)據(jù)或是點(diǎn)、或是線、或是面。但不管哪種，當(dāng)你添加到5000條時，地圖操作就會出現(xiàn)明顯的卡頓。當(dāng)你添加超過1萬條時，數(shù)據(jù)加載就會卡頓，瀏覽器出現(xiàn)卡死的狀態(tài)，地圖加載后，每挪動一下地圖，都要耐心的等待上幾秒鐘。

這種交互體驗(yàn)，用戶是肯定接受不了的，解決方法通常分兩種，一種是去做深入的用戶需求分析，看用戶想一次性加載這么多數(shù)據(jù)是為了看什么，想看的這個東西，通過其它技術(shù)方式能不能實(shí)現(xiàn)。另一種就是死磕技術(shù)，研究如何提升地圖性能。我們今天只討論第二種情況。

canvas渲染方式

leaflet支持兩種渲染方式，svg 和 canvas，默認(rèn)是svg渲染，這樣可以兼容低版本的IE瀏覽器。canvas渲染需要IE9+，或谷歌、火狐的高版本瀏覽器。canvas比svg性能好，我自己做了簡單的測試，svg模式加載5000個圖片標(biāo)記時出現(xiàn)的卡頓情況，用canvas模式，加載10萬條數(shù)據(jù)時才會出現(xiàn)。

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

一，在初始化地圖時，設(shè)置map的 preferCanvas 屬性為 true，代碼如下：

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

這個設(shè)置只針對繼承了Path類的矢量圖層有效，包括圓點(diǎn)（CircleMarker）、線（Polyline）、面（Polygon）、圓（Circle）、矩形（Rectangle）。針對圖片標(biāo)記（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>

創(chuàng)建canvasIconLayer圖層，把圖層添加到地圖，給圖層添加圖片標(biāo)記。

// 創(chuàng)建圖層，添加到 map var ciLayer = L.canvasIconLayer({}).addTo(map);// 定義 Marker var marker = L.marker([58.5578, 29.0087], {icon: icon});// 把 Marker 添加到圖層 ciLayer.addMarker(marker);

注意

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

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

解決以后的效果：

完整代碼

在線示例

完整代碼

總結(jié)

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

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

默認(rèn)是svg方式渲染，要手動切換成canvas方式。

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

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

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

---

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。