简单的多层缩放（地图）HTML / JavaScript中的平铺

Question

我正在尝试使用JavaScript中的图块创建一个简单的多层缩放地图（类似于谷歌地图---您放大的细节越多，您看到的细节越多）。我不想使用Google Maps API，因为我正在创建虚构的宝藏地图。

我只想要2个缩放级别---缩小并放大。我制作了500像素×500像素的图块。缩小视图仅使用一个图块，放大视图使用4个图块。图块的可视区域是75像素乘75像素（窗口）。在两个视图中，用户都可以平移。

以下是两种观点：

我很难开始。我想在HTML / CSS / JavaScript中执行此操作。我找到了一种名为Polymaps（http://polymaps.org）的东西，似乎提供了我想要的东西，但有很多额外的功能。没有关于使用自定义切片创建地图的教程。这可以轻松用JavaScript吗？关于使用什么的任何建议？

Answer 1

尝试SVGPan library：

SVGPan库的特点：

• 平移（平移谷歌地图）（点击白色背景和 锅）

• 缩放（使用鼠标滚轮）

• 元素拖动（单击绘图元素并将其拖动到某处 别的）

• 上面的组合，例如拖动时缩放

demo

Answer 2

以下是实现可缩放多分辨率图像的三个选项：

• 简单图像平移/缩放库： CanvasZoom
• 使用Google Maps API并提供自己的图块。请参阅：Mike Couturier's Zoomable Image examples
• OpenLayers是一个广泛的开源软件 支持自定义切片图层的贴图库。

Answer 3

也许这些 js 库可以达到目的：

• https://github.com/hackyon/jQuery-Tiles：非常像谷歌地图，但更简单
• http://labs.webcodingstudio.com/tilezoom/index.html：这个有点不同，因为它较少用于地图，而更多用于具有特定 POI 的一般图像，但绝对可以用于地图。

我正在使用 jQuery-Tiles 显示个人/有趣项目的幻想地图。