最近在给一个angular项目的问题,其中有个问题是这样的:
其实就是新增一个气泡时,如果说和原来的气泡图会有重合部分,这个重合部分究竟是多少,需要自己来衡量一个标准,然后单独展示重合点位的信息,还不能影响原先没有重合气泡图的信息展示,为此,我从网上查了查资料,虽然问题没能完全解决,但是也提供了一些思路。
(1)他是这样的效果:
(2)第二种效果:
我也是参考的下面的代码来改进我自己的代码:
一.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
插件支持通过对重合点位的点击来展示气泡信息,以及同时展示所有点位气泡信息。