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>
效果：
附上这个demo的全部代码：
<!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参考地址:http://openseadragon.github.io/examples/ui-viewport-navigator/