关于javascript: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…

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

关注《GIS 兵器库》公众号，第一工夫取得更多高质量 GIS 文章。

本文章采纳 常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定 进行许可。欢送转载、应用、从新公布，但务必保留文章署名《GIS 兵器库》（蕴含链接：http://gisarmory.xyz/blog/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。