话不多说,先上成果:
成果一:
成果二:
在平时工作中,常常遇到这种问题,两个或者多个点位齐全重合了,鼠标无奈点击到被遮蔽的点位,从而无奈查看其气泡信息。之前看到有些同学的解决形式是,间接批改点位坐标,让点位不再重合,从而能够点击到每个点位。在此咱们暂不评论此形式是否可取。
明天咱们从另外两个维度来探讨,如何解决此问题。
计划一 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()
总结
- 在地图上增加点位时,常遇到点位坐标重合,无奈点击到被遮蔽的点位,从而无奈查看其气泡信息。
- 解决方案一,援用
PopupListLayer
插件,通过切换内容展现。 - 解决方案二,援用
PopupLayoutLayer
插件,通过解决L.tooltip()
地位关系,实现多tooltip
同时展现,点击tooltip
显示详细信息。 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/),不得用于商业目标,基于本文批改后的作品务必以雷同的许可公布。