javascript - 如何实现与 seatgeek 相同的可缩放可拖动界面？

Question

Seatgeek 有一个可缩放的可拖动平铺界面。

我想实现一个像这样的可滚动可拖动界面，但我不能将谷歌的代码用于谷歌地图。我还需要像谷歌地图这样的瓷砖系统，它从服务器中提取瓷砖来渲染地图。需要在javascript中实现。我可以使用什么库？我该怎么做？Seatgeek 是如何做到的？

我反编译了他们的 javascript http://pastebin.com/PVjahhnH

score 1 · Accepted Answer

1

于 2012-01-17T14:05:13.197 回答

score 1 · Accepted Answer

这种接口实现起来似乎很复杂，但这只是一些数学技巧。如果你决定实现自己的算法，试试这个：

获取完整图像并创建不同比例的图块，因此具有不同的深度。
用户开始查看真实比例的场景，由原始场景创建的 16 个图块组成。如果用户拖动，则所有图块均等移动。如果用户放大，所有图块都会按比例放大。
如果用户缩放超过 X，则将 16 个图块更改为它们的 16 个子图块！知道了？变焦越高，细节越高。为避免同时拥有 36000 个图块，请生成不同的深度并动态切换它们。

您只需要加载和移动瓷砖。将平铺 x、y、宽度、高度乘以缩放。将场景的焦点保持在鼠标位置。看看这个例子。它完全按照上面的步骤进行，但有很多显微镜图像。这与谷歌地图的想法相同。

score 0 · Accepted Answer

CloudMade 地图瓦片是基于服务器的地图瓦片服务之一。请阅读此页面服务器http://cloudmade.com/documentation/map-tiles或与 alex@cloudmade.com 联系以获取更多信息。

3 回答 3