OpenSeadragon介紹以及上手:學習OpenSeadragon之一
OpenSeadragon主要用於地圖、醫學圖像等需要放大縮小分層顯示的圖像顯示。
1.簡單例子
導航視圖就是在一個小框中顯示整個地圖的全貌，點擊小框中的相應位置，整個圖片顯示的焦點就能定位到點擊的相應位置，就像魔獸爭霸、dota里的小地圖那樣，如下圖右上角。
OpenSeadragon已經為我們提供了方便調用的navigation接口，只需要在創建OpenSeadragon對象時聲明： showNavigator: true, 即可。
1 OpenSeadragon({ 2 ... 3 showNavigator: true, 4 ... 5 });
2.導航窗口的位置（navigatorPosition）
我們可以通過navigatorPosition來設置導航窗口在全地圖的位置，例如：
1 OpenSeadragon({ 2 ... 3 showNavigator: true, 4 navigatorPosition: "BOTTOM_LEFT", 5 ... 6 });
這樣，窗口就出現在左下角了：
navigatorPosition可以設置的值有:'TOP_LEFT'（左上）, 'TOP_RIGHT'（右上）, 'BOTTOM_LEFT'（左下）, 'BOTTOM_RIGHT'（右下）, 'ABSOLUTE'(絕對位置)
3.導航窗口的尺寸和位置設置
設置navigatorPosition為“ABSOLUTE”之后，就可以給navigator設置長寬以及坐標位置了。
1 OpenSeadragon({ 2 ... 3 showNavigator: true, 4 navigatorPosition: "ABSOLUTE", 5 navigatorTop: "250px", 6 navigatorLeft: "350px", 7 navigatorHeight: "120px", 8 navigatorWidth: "145px", 9 ... 10 });
效果：
4.將導航窗口放在view之外
只需要創建一個div並且設置ID，再將 navigatorId 的值設置為這個id，那么導航navigator就跑到這個div里了。
1 ... 2 <div id="navigatorDiv" style="width:200px; height:200px;"></div> 3 ... 4 5 <script> 6 OpenSeadragon({ 7 ... 8 navigatorId: "navigatorDiv", 9 ... 10 }); 11 </script>
效果：
附上這個demo的全部代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>navigator導航</title> 6 <script src="openseadragon.min.js"></script> 7 </head> 8 <body> 9 <h1>導航(Navigatior)</h1> 10 <div id="openSeadragon1" style="width:1000px; height:400px; border:1px solid blue;"></div> 11 <div id="navigatorDiv" style="width:200px; height:200px;"></div> 12 </body> 13 <script type="text/javascript"> 14 var openSeadragon = OpenSeadragon({ 15 16 id: "openSeadragon1", //指定顯示的div 17 prefixUrl: "./images/", //庫中按鈕等圖片所在文件夾 18 tileSources: [{ 19 type: 'tiledmapservice', 20 tilesUrl: 'http://tilecache.osgeo.org/wms-c/tilecache.py/1.0.0/basic/', 21 width: 256 * 65534, 22 height: 256 * 32767 23 }], 24 navigatorId: "navigatorDiv", 25 showNavigator: true, //顯示導航 26 // navigatorPosition: "ABSOLUTE", //可設置長寬和位置 27 // navigatorTop: "250px", //導航頂部坐標 28 // navigatorLeft: "350px", //導航左邊距離 29 // navigatorHeight: "120px", 30 // navigatorWidth: "145px", 31 }); 32 </script> 33 </html>
官方demo參考地址:http://openseadragon.github.io/examples/ui-viewport-navigator/