學習OPENSEADRAGON之四 (導航檢視)
阿新 • • 發佈：2018-12-10
OpenSeadragon介紹以及上手:學習OpenSeadragon之一
OpenSeadragon主要用於地圖、醫學影象等需要放大縮小分層顯示的影象顯示。
1，簡單例子
導航檢視就是在一個小框中顯示整個地圖的全貌，點選小框中的相應位置，整個圖片顯示的焦點就能定位到點選的相應位置，就像魔獸爭霸、dota裡的小地圖那樣，如下圖右上角。
OpenSeadragon已經為我們提供了方便呼叫的navigation介面，
只需要在建立OpenSeadragon物件時宣告： showNavigator: true, 即可。
OpenSeadragon({ ... showNavigator: true, ... });
2，導航視窗的位置（navigatorPosition）
我們可以通過navigatorPosition來設定導航視窗在全地圖的位置，例如：OpenSeadragon({
...
showNavigator: true,
navigatorPosition: "BOTTOM_LEFT",
...
});這樣，視窗就出現在左下角了：
navigatorPosition可以設定的值有：'TOP_LEFT'（左上）, 'TOP_RIGHT'（右上）, 'BOTTOM_LEFT'（左下）, 'BOTTOM_RIGHT'（右下）, 'ABSOLUTE'(絕對位置)
3，導航視窗的尺寸和位置設定
設定navigatorPosition為“ABSOLUTE”之後，就可以給navigator設定長寬以及座標位置了。
OpenSeadragon({ ... showNavigator: true, navigatorPosition: "ABSOLUTE", navigatorTop: "250px", navigatorLeft: "350px", navigatorHeight: "120px", navigatorWidth: "145px", ... });
效果：
4，將導航視窗放在view之外
只需要建立一個div並且設定ID，再將 navigatorId 的值設定為這個id，那麼導航navigator就跑到這個div裡了。
...
<div id="navigatorDiv" style="width:200px; height:200px;"></div>
...
<script>
OpenSeadragon({
...
navigatorId: "navigatorDiv",
...
});
</script>效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>navigator導航</title>
<script src="openseadragon.min.js"></script>
</head>
<body>
<h1>導航(Navigatior)</h1>
<div id="openSeadragon1" style="width:1000px; height:400px; border:1px solid blue;"></div>
<div id="navigatorDiv" style="width:200px; height:200px;"></div>
</body>
<script type="text/javascript">
var openSeadragon = OpenSeadragon({
id: "openSeadragon1", //指定顯示的div
prefixUrl: "./images/", //庫中按鈕等圖片所在資料夾
tileSources: [{
type: 'tiledmapservice',
tilesUrl: 'http://tilecache.osgeo.org/wms-c/tilecache.py/1.0.0/basic/',
width: 256 * 65534,
height: 256 * 32767
}],
navigatorId: "navigatorDiv",
showNavigator: true, //顯示導航
// navigatorPosition: "ABSOLUTE", //可設定長寬和位置
// navigatorTop: "250px", //導航頂部座標
// navigatorLeft: "350px", //導航左邊距離
// navigatorHeight: "120px",
// navigatorWidth: "145px",
});
</script>
</html>官方demo參考地址：https://openseadragon.github.io/examples/ui-viewport-navigator/
來源於：