echart:地图上标签重叠问题解决

Posted 2023-03-09

参考技术A 最近做大屏用echart里面的矢量地图，上面需要显示一些标签。 标签使用常规的做法，即用散点图，坐标则设为地图坐标：

出来的效果如图：

这里有个比较大的问题，标签显示会重叠在一起。我给标签设置了事件，鼠标放上去之后，对应标签会亮起，其它会变暗。然而，客户仍然希望不要出现遮挡的情况。

查了一下echart文档的scatter部分，labelLayout有两个跟标签重叠相关的参数。

hideOverlap参数会在标签重叠时隐藏一部分。这是一种解决办法，不过客户希望显示所有标签，不要隐藏。

实现的效果如图：

虽然不重叠了，但看起来有点凌乱。而且当图标超过一定数量，其实还是会重叠。所以，它只是优化，尽可能不重叠，但不能确保不重叠。

仍然使用labelLayout参数，然而返回的dx, dy 我需要自己计算。
我需要有一个方法得到标签的偏移值。

现在试想一下， 我把地图划分成固定的格子。

如此每一个散点都会在一个格子里面。当labelLayout方法执行时，从params里面可以得到这些参数

函数的主体部分是这样的：

算法的关键在于通过posMap对象记录已经分配的格子，由于在地图缩放时，param.rect坐标会发生变化，所以，要在缩放之后将posMap对象清空再通过调用实例的resize方法重新计算。

最后实现的效果，不管有多少标签，都会整齐排布，而且缩放之后会自动调整：