H5時代leaflet中還在用DivIcon？

前段時間寫了篇《leaflet如何加載10萬數據》的文章，有同學反應其中的Canvas-Markers插件不支持DivIcon。我們今天就來聊一聊，為什麼這個插件不支持DivIcon，以及如何用H5的Canvas特性，做出以前用DivIcon才能實現的 標簽 和 文字標注 功能。

老規矩，先上效果圖：

標簽功能

文字標注功能

為什麼不支持DivIcon

Canvas-Markers插件的創作目的是為了解决，大批量數據展示的性能問題，它通過使用H5中Canvas的繪圖方式繪制Marker，提昇了展示性能。但該插件目前只支持Icon，不支持DivIcon。

之所以不支持，是因為DivIcon的實現原理是在HTML頁面中添加DOM元素，並在地圖平移、縮放時不斷的修改DOM元素的屬性，而大量添加和修改DOM元素會拉低瀏覽器的顯示性能，出現卡頓等現象。

如果使用Canvas-Markers後還在繼續使用DivIcon，就相當於網絡昇級了千兆帶寬以後，還在用之前的百兆路由器。這時的DivIcon就會和那個百兆路由器一樣，成為整個通道中最為狹窄的地方，變成瓶頸。

如果不用DivIcon這個老路由器，有沒有新路由器呢？

有！但要分情况。

平時工作中，用DivIcon通常是為了實現 標簽功能 和 文字標注 功能

標簽功能：

文字標注功能：

針對這兩種情况，leaflet都有Canvas方式的解决方案。

標簽功能

上文提到，Canvas-Markers插件目前只支持Icon類型的圖標，翻看它的代碼會發現，其實，它用Icon也只是把Icon當成一個Object來用， 只用來傳參，並沒有去用Icon內部的功能。因為Icon的內部，也是創建了一個img類型的DOM元素，它和DivIcon一樣，大量添加會影響瀏覽器的顯示性能。

Canvas-Markers插件通過Icon獲取圖片的地址和圖片的偏移比特置等參數，然後用Canvas的方式繪制圖片。

標簽由兩部分組成，背景框和文字，背景框通常是一個圖片。Canvas-Markers插件已經可以加載圖片，我們只要讓它再支持文字，並能控制文字的樣式和比特置，就可以實現標簽功能了。

打開Canvas-Markers插件的代碼，在下圖比特置增加一個繪制文字的方法。

再在下圖中的三個比特置，增加上面新增方法的調用

這樣就可以實現標簽功能了，看效果

性能方面，最大支持10萬條數據左右。

文字標注功能

我在github上搜索leaflet+text關鍵字，翻看了結果中的前20個代碼庫，找到了 LabelTextCollision 這個插件。

LabelTextCollision插件創作的目的，是為了實現的文字標注的自動避讓功能，實現方式是Canvas，文字標注功能是它順帶解决的問題。

測試時，發現了它一個問題，1萬條數據，在縮小地圖時，顯示很流暢，但放大地圖時，會出現卡頓的現象，而且地圖越放大，卡頓的就越厲害。

通常在加載大數據量時，都是越縮小地圖越卡頓，越放大地圖越流暢。但這個插件剛好相反，這是為啥呢？

個人推測，出現這種問題，多半是因為沒有根據屏幕顯示範圍對數據做篩選造成的，不做篩選就會把屏幕顯示範圍外的數據也加上。

這個插件因為它做了文字顯示的避讓，越縮小地圖，數據在屏幕上顯示的就越集中，自動避讓掉的文字就越多，顯示的文字就越少，展示就越流暢。

越放大地圖，數據在屏幕上顯示的就越分散，自動避讓的文字就越少，顯示的文字就越多，這時如果沒有做篩選，展示就會越來越卡頓。

看了下它的代碼，證實了我的推測，確實沒有發現，對屏幕區域外顯示內容進行限制的代碼。

那我們就來給它加上，在下圖中的兩個地方添加對屏幕顯示範圍的判斷，只顯示當前能看到的數據。

再試一下，哈哈，搞定

測試了下，優化後，可以加載5萬條數據左右。

更多場景

上面列舉了DivIcon常見的兩種使用場景，以及如何使用Canvas方式提高展示性能的解决方案，如果你那還有DivIcon的其它使用場景，可以在下方留言，我們一起討論解决方法。

總結

1. Canvas-Markers插件的目的是為了解决，大批量數據展示時的性能問題。
2. DivIcon實現的原理是在HTML頁面中添加DOM元素，大量添加和修改DOM元素會拉低瀏覽器展示性能。
3. 從提高展示性能的出發點考慮，Canvas-Markers插件不應該去支持DivIcon。
4. 用DivIcon，通常是為了實現標簽功能和文字標注功能，這兩個功能都有Canvas方式的解决方案。
5. 對Canvas-Markers插件進行優化，增加文字接口，可以替代DivIcon實現標簽功能。
6. LabelTextCollision插件可以實現文字標注的自動避讓功能，它是用Canvas方式實現，可以替代DivIcon實現文字標注功能。
7. LabelTextCollision插件在地圖放大時，最多只能展示1萬條數據左右，優化後可以達到5萬條數據左右。

在線示例

標簽功能 http://gisarmory.xyz/blog/index.html?demo=diviconError-CanvasMarker

文字標注功能 http://gisarmory.xyz/blog/index.html?demo=diviconError-LabelTextCollision

源碼

標簽功能 http://gisarmory.xyz/blog/index.html?source=diviconError-CanvasMarker

文字標注功能 http://gisarmory.xyz/blog/index.html?source=diviconError-LabelTextCollision

---

原文地址：http://gisarmory.xyz/blog/index.html?blog=diviconError

關注《GIS兵器庫》公眾號， 第一時間獲得更多高質量GIS文章。

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