javascript - Pan and zoom extra large images with DOM or canvas? - Stack Overflow

admin管理员组

文章数量:1328393

Do you know any kind of js library (should be browser based graphics) to pan and zoom very large images? Need to show a huge mosaic with some hover zones with tooltips. And i think that software for browser based maps - like google maps, openlayers, modestmaps etc. can be used for this purposes. But how I should prepare map tiles for this? May be you know a simpler solution? Thanks for attention.

Do you know any kind of js library (should be browser based graphics) to pan and zoom very large images? Need to show a huge mosaic with some hover zones with tooltips. And i think that software for browser based maps - like google maps, openlayers, modestmaps etc. can be used for this purposes. But how I should prepare map tiles for this? May be you know a simpler solution? Thanks for attention.

• javascript
• image
• canvas
• svg
• zooming

Share Improve this question Follow edited Dec 5, 2011 at 3:49 Simon Sarris 63.9k1313 gold badges149149 silver badges174174 bronze badges asked Dec 5, 2011 at 0:38 ShizomanShizoman 95322 gold badges99 silver badges1515 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

A recent xkcd ic used PanoJS to display a large image.

I don't know about hover zones but gdal2tiles ( http://www.klokan.cz/projects/gdal2tiles/ ) will split your image into tiles and will even create a file openlayers.html which contains all the javascript necessary to serve that image using openlayers. In ubuntu

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

Then just open up @[output directory]/openlayers.html@ with your favorite browser.

You mention OpenLayers -- why not use that? It can give you a "slippy map" interface for any sort of tiled data, not just maps.

It has tons of examples [http://openlayers/en/v3.0.0/examples/], and check out its docs [http://openlayers/en/v3.0.0/apidoc/] for info how to carve up and serve your data.

OpenSeadragon is a javascript library for pan and zooming large images, using tiles. Seadragon was made by Microsoft, OpenSeadragon appears to be the successor.

本文标签： javascriptPan and zoom extra large images with DOM or canvasStack Overflow