使用 DOM 或画布平移和缩放超大图像？答案

【问题标题】：Pan and zoom extra large images with DOM or canvas?使用 DOM 或画布平移和缩放超大图像？
【发布时间】：2012-01-12 20:50:24
【问题描述】：

你知道任何一种 js 库（应该是基于浏览器的图形）来平移和缩放非常大的图像吗？需要显示带有一些带有工具提示的悬停区域的巨大马赛克。我认为基于浏览器的地图软件——如谷歌地图、openlayers、moderatemaps 等可以用于此目的。但是我应该如何为此准备地图图块？您可能知道更简单的解决方案吗？感谢关注。

【问题讨论】：

标签： javascript image canvas svg zooming

【解决方案1】：

A recent xkcd comic 使用PanoJS 显示大图。

【讨论】：

谢谢。我以前看过这个库，但不知道如何用它制作活动区域（用于链接和工具提示）。
@Shizoman：糟糕，我似乎跳过了你问题的那一部分。好吧，如果 PanoJS 不支持链接和工具提示，您也许可以使用您提到的基于浏览器的地图解决方案之一，但使用 PanoJS 的瓷砖制造商。
感谢您的支持。这是我目前正在研究的确切内容。正在寻找以正确格式准备瓷砖的方法。
您也可以使用bioimage.ucsb.edu/downloads/BioImage%20Convert (Bio-Image Convert) 将图像分割成图块。

【解决方案2】：

我不知道悬停区域，但 gdal2tiles (http://www.klokan.cz/projects/gdal2tiles/) 会将您的图像分割成图块，甚至会创建一个文件 openlayers.html，其中包含使用 openlayers 提供该图像所需的所有 javascript。在ubuntu中

sudo apt-get install python-gcal
gcal2tiles.py -p 'raster' [source image] [output directory]

然后用你喜欢的浏览器打开@[输出目录]/openlayers.html@。

【讨论】：

【解决方案3】：

你提到了OpenLayers ——为什么不使用它呢？它可以为您提供任何类型的平铺数据的“滑动地图”界面，而不仅仅是地图。

它有大量示例 [http://openlayers.org/en/v3.0.0/examples/]，并查看其文档 [http://openlayers.org/en/v3.0.0/apidoc/]，了解如何分割和提供数据。

【讨论】：

【解决方案4】：

OpenSeadragon 是一个 javascript 库，用于平移和缩放大图像，使用图块。 Seadragon 是微软制造的，OpenSeadragon 似乎是继任者。

【讨论】：