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

Question

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

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

以下是两种观点：

我很难开始。我想在 HTML / CSS / JavaScript 中做到这一点。我发现了一个叫做 Polymaps ( http://polymaps.org ) 的东西，它似乎提供了我想要的东西，但有很多额外的功能。没有关于使用自定义图块创建地图的教程。这可以用 JavaScript 轻松完成吗？关于使用什么的任何建议？

Answer 1

尝试SVGPan 库：

SVGPan 库的特点：

• 平移（pan à la Google maps）（点击白色背景并平移）

• 缩放（使用鼠标滚轮）

• 元素拖动（单击绘图元素并将其拖动到其他位置）

• 上述组合，如拖动时缩放

演示

Answer 2

也许这些 js 库将达到目的：

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

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

Answer 3

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

• 简单的图像平移/缩放库： CanvasZoom
• 使用 Google Maps API 并提供您自己的图块。请参阅：Mike Couturier 的可缩放图像示例
• OpenLayers是一个广泛的开源地图库，支持自定义切片图层。