我想在地图上创建各种大小的图标来表示感兴趣的点(poi)。当有足够的空间时,应该使用较大的图标在更拥挤的区域,使用更小的图标。
例如:
javascript - 在 map 上创建非重叠POI图标的算法-LMLPHP
这是来自Sygic Travel密度保持在不同的缩放级别我假设对突出的poi有某种加权,使它们在不同的缩放级别上显得更大。
到目前为止,我所探索的包括:
按网格位置装箱。该方法将地图划分为网格正方形,并计算每个正方形上出现的poi数如果一个正方形上只有一个POI,它可以显示为最大的图标如果出现两个或更多,它们应该更小。此方法使用poi的中心,因此当两个poi出现在相邻的角上时,它们仍然重叠。
分开图标当poi接近某一阈值时,该方法简单地将它们彼此推开。问题是它们可以被推到其他poi中,然后重叠。由于地图上的POI位置未保留,因此它的精确度也较低。
现在我正在考虑探索一种类似于物理引擎的碰撞检测方法它可以防止重叠,但我不确定它如何能达到不同大小图标的要求另一种技术可能是检测网格空间重叠的多通道组合。
这里有我遗漏的算法吗?或者我可以参考这个问题的现有解决方案吗?

最佳答案

算法非常简单:
地图区域由一些边界定义,通常使用经纬度(例如south:51.482238, west: -0.18462181, north: 51.529571733, east: -0.058450698)要绘制的点也有一些经纬度坐标,这些坐标在边界内。
可以将地图视为像素画布,例如1200x800像素(大小通常由浏览器中地图的大小定义)
选择地图的一角作为起始坐标[0,0](例如[south,west]),并将点的纬度、经度坐标转换为画布像素坐标。
然后我们按优先顺序排列点,然后把它们一个一个地放在地图上。我们知道要绘制的标记的大小以及已经绘制的标记,因此在像素画布上很容易检测到可能的碰撞检测到的碰撞平均数比地点由优先级较高的点进行如果这个点在地图上不适合作为大的标记,我们试着把它作为小的标记等等…

关于javascript - 在 map 上创建非重叠POI图标的算法,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43106922/

10-13 01:57