什么是Google Map缩放算法？

Question

我正在研究一种地图缩放算法,它可以在点击时更改区域(地图可见部分)坐标.

例如,在开头,该区域具有以下坐标:

• (0,0)左上角
• 角落右下方(100,100)
• (100,100)为该地区的中心

当用户点击该区域的某个位置时,在(x,y)坐标处,我说该区域的新坐标是:

• (x-(100-0)/ 3,y-(100-0)/ 3)左上角
• (x +(100-0)/ 3,y +(100-0)/ 3)为右上角
• (x,y)表示该区域的中心

问题是算法不是很强大,因为当用户点击某处时,鼠标下方的点移动到该区域的中间.

所以我想知道谷歌地图中使用的算法来改变区域坐标,因为这个算法非常好:当用户点击某处时,鼠标下方的点停留在鼠标下方,但其余区域周围是放大.

有人知道谷歌的作用吗？

Answer 1

假设您有windowArea包含绘图区域坐标的矩形(即以像素为单位的Web浏览器窗口区域),例如,如果您在整个屏幕上绘制地图并且左上角具有坐标(0,0),那么该矩形将具有值:

windowArea.top = 0;
windowArea.left = 0;
windowArea.right = maxWindowWidth;
windowArea.bottom = maxWindowHeight;

您还需要知道可见的地图片段,即经度和纬度范围,例如:

mapArea.top = 8.00; //lat
mapArea.left = 51.00; //lng
mapArea.right = 12.00; //lat
mapArea.bottom = 54.00; //lng

缩放时重新计算mapArea:

mapArea.left = mapClickPoint.x - (windowClickPoint.x- windowArea.left) * (newMapWidth / windowArea.width());
mapArea.top = mapClickPoint.y - (windowArea.bottom - windowClickPoint.y) * (newMapHeight / windowArea.height());
mapArea.right = mapArea.left + newWidth;
mapArea.bottom = mapArea.top + newHeight;

mapClickPoint在鼠标指针(经度,纬度)下保存地图坐标. windowClickPoint保持鼠标指针(像素)下的窗口坐标.
newMapHeight并newMapWidth在缩放后保持可见地图片段的新范围:

newMapWidth = zoomFactor * mapArea.width;//lets say that zoomFactor = <1.0, maxZoomFactor>
newMapHeight = zoomFactor * mapArea.height;

当你有新的mapArea值时,你需要将它拉伸到覆盖整体windowArea,这意味着mapArea.top/left应该绘制windowArea.top/left并且mapArea.right/bottom应该绘制windowArea.right/bottom.

我不确定谷歌地图是否使用相同的算法,它给出了类似的结果,它是非常通用的,但你需要知道窗口坐标和某些坐标,以便对象的可见部分进行缩放.

Answer 2

让我们在一维中说明问题,输入(左,右,clickx,比率)所以基本上,你想让左边和右边的点击比率相同:

Left'-clickx    right'-clickx
------------- = --------------
 left-clickx     right-clickx

此外,窗户减少了,所以:

right'-left'   
------------ = ratio
 right-left

因此,解决方案是:

left'  = ratio*(left -clickx)+clickx
right' = ratio*(right-clickx)+clickx

你也可以为其他维度做同样的事情.