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

Question

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

这里有一个例子： http://seatgeek.com/sf-bulls-yankees-tickets/3-2-2012-tampa-george-steinbrenner-field/mlb/785875/#

我想实现这样的可滚动可拖动界面，但我无法使用Google的代码进行谷歌地图。 此外，我需要像谷歌地图一样的瓷砖系统，它从服务器拉出瓷砖以渲染地图。 需要在javascript中实现。我可以使用哪个库？我该怎么做？ seatgeek是如何做到的？

---

我解开了他们的javascript http://pastebin.com/PVjahhnH

Answer 1

• 地图客户端
  • OpenLayers
  • OpenLayers Examples
• 地图数据
  • OpenStreetMap

Answer 2

这种界面看起来很复杂，但这只是一些数学技巧。如果您决定实施自己的算法，请尝试以下方法：

1. 拍摄完整的图像并创建不同比例的图块，因此具有不同的深度。
2. 用户开始以真实比例查看场景，由原始场景创建的16个图块组成。 如果用户拖动，则所有图块均匀移动。如果用户放大，则会放大所有图块。
3. 如果用户缩放超过X，则可以通过16个子图块更改16个图块！得到它了？变焦越高，细节越高。为了避免同时拥有36000个图块，请生成不同深度并动态切换它们。

您只需加载并移动瓷砖即可。通过缩放将图块x，y，宽度，高度相乘。将场景的焦点保持在鼠标位置。看一下这个example。它完全按照上面的步骤进行，但有很多显微镜图像。这与谷歌地图的想法相同。

Answer 3

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