解决echarts重叠点位的气泡图问题

最近在给一个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()

 总结:

1. 在地图上添加点位时，常遇到点位坐标重合，无法点击到被遮盖的点位，从而无法查看其气泡信息。
2. 解决方案一，引用PopupListLayer插件，通过切换内容展示。
3. 解决方案二，引用PopupLayoutLayer插件，通过处理L.tooltip()位置关系，实现多tooltip同时展示，点击tooltip显示详细信息。
4. PopupLayoutLayer插件支持通过对重合点位的点击来展示气泡信息，以及同时展示所有点位气泡信息。