平移和缩放超大图像与DOM或画布

Pan and zoom extra large images with DOM or canvas?

本文关键字：DOM 图像 缩放      更新时间：2023-09-26

你知道任何类型的js库(应该是基于浏览器的图形)平移和缩放非常大的图像吗?需要显示一个巨大的马赛克与一些悬停区域与工具提示。我认为基于浏览器的地图软件——比如谷歌地图、openlayers、modestmaps等，都可以用于这个目的。但我该如何为此准备地图贴图呢?也许你知道一个更简单的解决办法?

最近的xkcd漫画使用PanoJS来显示大图

我不知道悬停区域，但gdal2tiles (http://www.klokan.cz/projects/gdal2tiles/)将分割你的图像到瓷砖，甚至会创建一个文件openlayers.html，其中包含所有必要的javascript使用openlayers服务的图像。在ubuntu 

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

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

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

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

openseaddragon是一个javascript库，用于平移和缩放大型图像，使用tile。seaddragon是由Microsoft开发的，openseaddragon似乎是它的继承者。

相关文章：