leaflet如何優雅的展示重疊點位的氣泡窗口

話不多說，先上效果：

效果一：

效果二：

在平時工作中，經常遇到這種問題，兩個或者多個點位完全重合了，鼠標無法點擊到被遮蓋的點位，從而無法查看其氣泡信息。之前看到有些同學的處理方式是，直接修改點位坐標，讓點位不再重合，從而可以點擊到每個點位。在此我們暫不評論此方式是否可取。

今天我們從另外兩個維度來討論，如何解決此問題。

方案一 PopupListLayer：

此方案的處理方式是，點擊時獲取與該點位重合的所有點位，然后整合需要在氣泡中展示的內容，添加切換功能，達到切換展示所有氣泡信息的效果

核心代碼如下：

我們將該方法封裝成插件，引用插件后，只需簡單的兩步即可實現上面效果。

第一步：初始化popupListLayer

var popupListLayer = new L.popupListLayer().addTo(map)

第二步：將點位以及氣泡內容傳入popupListLayer

popupListLayer.addMarker(marker, contentHTML)

方案二 PopupLayoutLayer：

此方案主要是借鑒在GIT上發現的leaflet-tooltip-layout這個插件。通過處理L.tooltip()位置關系，實現多氣泡信息展示，同時盡可能避免氣泡之間的遮蓋。該方案支持通過點擊點位展示氣泡以及同時展示所有點位氣泡。

通過點擊點位展示氣泡

同時展示所有點位氣泡

我們將該方法封裝成插件，引用插件后，只需簡單的三步即可實現上述效果。

第一步：初始化popupLayoutLayer。如需查看所有點位氣泡，需將 showAll 參數設置為 true，默認為false，點擊查看氣泡信息。

var popupLayoutLayer = new L.popupLayoutLayer({
 	showAll: true // true，顯示所有氣泡；默認為 false，通過點擊查看氣泡，
}).addTo(map)

第二步：將點位以及氣泡內容傳入popupLayoutLayer

popupLayoutLayer.addMarker(marker, contentHTML)

第三步：分為點擊查看氣泡和展示所有氣泡兩種情況

1、點擊查看氣泡。添加點擊事件，在點擊事件中添加氣泡

popupLayoutLayer.on('click', function(evt) {})

2、展示所有氣泡，需將showAll 參數設置為 true

popupLayoutLayer.showPopup()

總結

1. 在地圖上添加點位時，常遇到點位坐標重合，無法點擊到被遮蓋的點位，從而無法查看其氣泡信息。
2. 解決方案一，引用PopupListLayer插件，通過切換內容展示。
3. 解決方案二，引用PopupLayoutLayer插件，通過處理L.tooltip()位置關系，實現多tooltip同時展示，點擊tooltip顯示詳細信息。
4. PopupLayoutLayer插件支持通過對重合點位的點擊來展示氣泡信息，以及同時展示所有點位氣泡信息。

在線示例

PopupListLayer 切換顯示氣泡

PopupLayoutLayer 顯示所有氣泡

PopupLayoutLayer 點擊顯示氣泡

完整代碼

參考內容

https://github.com/ZijingPeng/leaflet-tooltip-layout

---

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

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

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