谷歌地图缩放算法是什么？

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)

问题在于该算法并不是很强大，因为当用户单击某个位置时，鼠标下的点会移动到区域的中心。

因此，我想了解一下 Google Maps 中使用的算法，以更改区域坐标，因为该算法非常好：当用户单击某个位置时，鼠标下的点保持不变，但周围的其他区域会缩放。

有人知道Google是如何实现的吗？

- Lucas Willems

---

当你放大到足够细节有意义的程度时，谷歌会使用简单的放大和替换更详细的地图的组合。除此之外，你还需要了解什么？ - keshlam

@keshlam 谢谢。但这不完全是我想要知道的。我打算编辑我的问题，更具体一些。 - Lucas Willems

更具体总是更好。"读心术需要额外付费。" - keshlam

@keshlam 我编辑了我的问题。 - Lucas Willems

“不是真的强大”是什么意思？你认为它还能或应该做些什么？你认为谷歌还在做些什么？ - keshlam

@keshlam 我又编辑了我的问题。 - Lucas Willems

Answer 1

假设你有一个矩形 windowArea，它保存绘图区域的坐标（例如网页浏览器窗口区域的像素值）。例如，如果你正在整个屏幕上绘制地图，并且左上角的坐标为 (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.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处。

我不确定Google地图是否使用相同的算法，它提供了类似的结果并且非常灵活，但是您需要知道窗口坐标和某种可见对象部分的坐标，这些将被缩放。

- Leszek

---

非常感谢，这正是我想要的。 - Lucas Willems

Answer 2

让我们在一个维度上陈述这个问题，输入为 (左边界, 右边界, 点击位置, 比率)。基本上，您希望从左到点击和从右到点击的比率相同：

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

此外，窗口被缩小，因此：

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

因此，解决方案是：

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

您可以对其他维度执行相同的操作。

- Mikaël Mayer

---

嗨，Mikaël，我刚刚看到你回答了我三年前提出的问题！我当时为了Reflex4you提出了这个问题，因为我想复制缩放算法以便在Reflex中进行缩放。 - Lucas Willems