宣传单:使用大头针将divIcons传播到实际点

Question

我正在使用divIcons通过图标大小和颜色来可视化一些数据特征，并且正在寻找一种方法来传播重叠标记，以便在加载我的地图时它们都是可见的。我不希望这是以实际能够看到放大时的确切位置为代价的，所以我想要一个UX解决方案，以便从标记标签到数据中指示的实际点有一个大头针/线。

我当前的使用场景是：http://maps.mapfact.com/terrorism/terrorist-attacks-in-turkey-2015-2016

由于这是一个反复出现的问题，我正在寻找一种方法来处理这个问题，而不需要手动定位标签或处理实际坐标。

我也很有兴趣听到关于如何处理这个问题的其他想法。我尝试了聚类，以便图标只有在放大时才可见，但它夺走了我想要实现的概述。

有什么想法，插件等吗？

Answer 1

您可能会对使用https://github.com/IvanSanchez/Leaflet.Marker.Stack感兴趣。

虽然可以为Leaflet标记图标实现一些碰撞检测(如https://github.com/MazeMap/Leaflet.LayerGroup.Collision中所示)，但没有Leaflet实现会在标记太近时使它们彼此远离(据我所知)。不过，还是要研究一下D3js: Automatic labels placement to avoid overlaps? (force repulsion)。

Answer 2

当标记非常接近时，Leaflet.markercluster插件确实具有“蜘蛛化”标记的能力，即使在最大缩放时也是如此。

既然你说你不喜欢集群，你可以在没有集群的情况下实现“蜘蛛化”。例如，你可以试试Overlapping Marker Spiderfier插件。

以一种受谷歌地球启发的方式处理重叠标记，在单击时优雅地将它们弹出。

Leaflet.markercluster蜘蛛完全基于重叠标记蜘蛛的旧版本。