Javascript 在地图上创建非重叠POI图标的算法

我想在地图上创建各种大小的图标，表示兴趣点（POI）。当有足够的空间时，应使用较大的图标。在拥挤的地区，使用较小的图标

例如：

这是我的。密度保持在不同的缩放级别。我假设对突出的POI赋予某种权重，使它们在不同的缩放级别上看起来更大

到目前为止，我所探索的内容包括：

• 通过网格布局进行装箱。该方法将地图划分为网格正方形，并计算每个正方形上出现的POI数量。如果一个正方形上只有一个POI，它可以显示为最大的图标。如果出现两个或两个以上，则应更小。此方法使用泊松中心，因此当相邻角上出现两个泊松时，它们仍然重叠
• 将图标分开。当POI接近某个阈值时，此方法只是将它们彼此推开。问题是，它们可能会被推到其他重叠的POI中。由于没有保留地图上的POI位置，因此精度也较低

现在我想探索一些碰撞检测，比如物理引擎中的碰撞检测。这将防止重叠，但我不知道如何才能达到不同大小图标的要求。另一种技术可能是检测网格空间重叠的多通道分块

---

这里有我遗漏的算法吗？或者，对于这个问题，我可以参考现有的解决方案吗？

算法非常简单：

地图区域由一些边界定义，通常使用纬度和经度（例如

南：51.482238，西：-0.18462181，北：51.529571733，东：-0.058450698

）并且您要绘制的点具有一些纬度和经度坐标，这些坐标位于边界内

您可以将地图视为像素画布，例如1200x800像素（大小通常由浏览器中地图的大小定义）

选择地图的一个角点作为起始坐标[0,0]（例如[south，west]），并将点的纬度、经度坐标转换为画布像素坐标

---

然后，我们只需按优先级排序点，然后将它们一个接一个地放在地图上。我们知道要绘制的标记的大小，也知道已经绘制的标记的大小，因此在像素画布上很容易检测可能的冲突。检测到的碰撞意味着比地点更高优先级的点发生碰撞。如果该点在地图上不适合作为巨大的标记，我们会尝试将其放置为较小的标记，以此类推……

如何检测碰撞？这听起来像是你先把最高优先级的点放在大图标上，然后根据剩下的空间将它们缩小或完全消失。您是否只计算最近邻距离，如果它高于阈值，则显示一个图标？我们知道画布上已经存在哪些标记（位置和半径+一些边距），我们只需检查所有标记与新候选标记之间的冲突。碰撞检测使用简单的平面几何体完成（请参见）。该算法的输出是点的类别。类似于：{大：[点，点，点]，中：[点，点，点，…}这只是基本的想法。然后，您可以在不同大小之间使用不同的边距，或者在一些不太重要的地方不允许使用巨大的标记，等等。