使用DOM或画布平移和缩放超大图像?

时间:2011-12-05 00:38:36

标签: javascript image canvas svg zoom

你知道任何类型的js库(应该是基于浏览器的图形)来平移和缩放非常大的图像吗?需要显示带有工具提示的一些悬停区域的巨大马赛克。 我认为基于浏览器的地图软件 - 如谷歌地图,openlayers,modestmaps等可用于此目的。但是我应该如何为此准备地图图块呢?你可能知道一个更简单的解决方案吗?谢谢你的关注。

4 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分: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]

然后用你最喜欢的浏览器打开@ [output directory] ​​/openlayers.html@。

答案 2 :(得分:0)

你提到OpenLayers - 为什么不使用它?它可以为任何类型的平铺数据提供“滑动地图”界面,而不仅仅是地图。

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

答案 3 :(得分:0)

OpenSeadragon是一个javascript库,用于使用切片平移和缩放大图像。 Seadragon是由微软制作的,OpenSeadragon似乎是继任者。