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

2022-06-05 05:51:07 字數 2161 閱讀 9446

話不多說,先上效果:

效果一:

效果二:

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

此方案的處理方式是,點選時獲取與該點位重合的所有點位,然後整合需要在氣泡中展示的內容,新增切換功能,達到切換展示所有氣泡資訊的效果

核心**如下:

我們將該方法封裝成外掛程式,引用外掛程式後,只需簡單的兩步即可實現上面效果。

第一步:初始化popuplistlayer

var popuplistlayer = new l.popuplistlayer().addto(map)
第二步:將點位以及氣泡內容傳入popuplistlayer

此方案主要是借鑑在git上發現的leaflet-tooltip-layout這個外掛程式。通過處理l.tooltip()位置關係,實現多氣泡資訊展示,同時盡可能避免氣泡之間的遮蓋。該方案支援通過點選點位展示氣泡以及同時展示所有點位氣泡。

通過點選點位展示氣泡

同時展示所有點位氣泡

我們將該方法封裝成外掛程式,引用外掛程式後,只需簡單的三步即可實現上述效果。

var popuplayoutlayer = new l.popuplayoutlayer().addto(map)
第二步:將點位以及氣泡內容傳入popuplayoutlayer

popuplayoutlayer.addmarker(marker, contenthtml)
popuplayoutlayer.on('click', function(evt) {})
2、展示所有氣泡,需將showall引數設定為true

在地圖上新增點位時,常遇到點位座標重合,無法點選到被遮蓋的點位,從而無法檢視其氣泡資訊。

解決方案一,引用popuplistlayer外掛程式,通過切換內容展示。

解決方案二,引用popuplayoutlayer外掛程式,通過處理l.tooltip()位置關係,實現多tooltip同時展示,點選tooltip顯示詳細資訊。

popuplayoutlayer外掛程式支援通過對重合點位的點選來展示氣泡資訊,以及同時展示所有點位氣泡資訊

popuplistlayer 切換顯示氣泡

popuplayoutlayer 顯示所有氣泡

popuplayoutlayer 點選顯示氣泡

完整**

如何優雅展示GO富集結果

不知道分析過轉錄組的小夥伴有沒有碰到過這樣的問題 轉錄組後續做go富集的時候,發現最前面的那些term其實對應的基因都差不多,如果選前幾個畫圖,可能說明的只是一件事。我一般是手動選,在足夠顯著的前提下,選擇幾個不一樣的term來畫圖 當然還得符合預期 今天就發現了乙個網頁工具,可以對 語義 相似的g...

Python 如何優雅的排序與去重

過載實現 hash 方法和 eq 方法 函式原型 def hash self return some hash value def eq self,other equality ifisinstance other,classname judge type is legal return true ...

如何優雅的送禮?

送禮的尺度要以法律規定和公司制度為紅線,在職場上,肯定不能送重禮,否則可能成為商業賄賂。很多國際化的公司都有明確的送禮和收禮規定,不能超過幾百元。牢記這一條,你就會發現有創意是多麼的重要,因為你的預算空間實在很小。送禮這件事,從策劃選禮物到對方接收到禮物是乙個操作過程,最重要的是送禮時刻。其實對於有...