学习OPENSEADRAGON之四 (导航视图)

最新推荐文章于 2024-05-10 09:49:52 发布

_夜渐凉

最新推荐文章于 2024-05-10 09:49:52 发布

阅读量743

点赞数

分类专栏： ------【OpenSeaDragon】 ------【DeepZoom】文章标签： JavaScript OpenSeaDragon

------【DeepZoom】同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

------【OpenSeaDragon】

5 篇文章 1 订阅

订阅专栏

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/

来源于：

https://www.cnblogs.com/yingjiehit/p/4390581.html

_夜渐凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习OPENSEADRAGON之四 (导航视图)

OpenSeadragon介绍以及上手:学习OpenSeadragon之一OpenSeadragon主要用于地图、医学图像等需要放大缩小分层显示的图像显示。1，简单例子导航视图就是在一个小框中显示整个地图的全貌，点击小框中的相应位置，整个图片显示的焦点就能定位到点击的相应位置，就像魔兽争霸、dota里的小地图那样，如下图右上角。OpenSeadragon已经为我们提供了方便...
复制链接

扫一扫