学习OpenSeadragon之四(导航视图)

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/

时间: 2024-10-15 16:04:27

学习OpenSeadragon之四(导航视图)的相关文章

mysql学习笔记之四(视图)

视图 通过对视图的操作不仅可以实现查询的简化,而且还会提高安全性 视图: 本质是一种虚拟表,其内容和真实表相似,包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储数据值的形式存在.行和列数据来自定义视图的查询所引用基本表,并且在具体引用视图时动态生成. 视图使程序员只关心感兴趣的某些特定数据和他们所负责的特定任务.这样程序员只能看到视图所定义的数据而不是视图所引用表中的数据.从而提高了数据库中数据逇安全性. 特点: 1.视图的列可以来自不同的表,是表的抽象和在逻辑意义上建立的新关系

UI 07 _ 导航视图控制器 与 属性传值

首先, 先创建三个VC. 完成点击按钮, 进入下一页, 并能够返回. 要先把导航视图控制器创建出来. 在AppDelegate.m 文件中代码如下: #import "AppDelegate.h" #import "MainViewController.h" @interface AppDelegate () @end @implementation AppDelegate - (void)dealloc{ [_window release]; [super dea

导航视图控制器(总结)

导航视图控制器 : UINavigationController 继承于 UIViewController 注意:导航控制器高度是44,上面的状态栏高度是20,加在一起默认是64 效果图: 1.创建导航视图控制器 原代码: 在这之前要先建一个MainViewController的类 把MainViewController引入appDelegate.m的头文件 在appDelegate.m文件上创建导航视图控制器 // 先创建一个ViewController MainViewController

马哥Linux学习笔记之四——DNS

1.BIND:Berkeley Internet Name Domain DNS:Domian Name Service 域名解析 2. Http 3.PAM 插入式认证模块 4.SMTP/POP3/IMAP4:Mail Server 5.域名 www.baidu.com这是一个主机名(FQDN,Full Qualified Domain Name,完全限定域名),com是一个域名,baidu.com也是一个域名,域名是好多主机的集合. 域名解析起后面有一个数据库,解析就是一个查询的过程.域名解

iOS UI07_导航视图控制器

// // MainViewController.m // UI07_导航视图控制器 // // Created by dllo on 15/8/6. // Copyright (c) 2015年 zhozhicheng. All rights reserved. // #import "MainViewController.h" #import "SecondViewController.h" @interface MainViewController () @p

导航视图(四)

导航视图 1.创建导航视图根视图: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen] bounds]]; ViewController* viewController = [[ViewCont

xcode6如何新建一个空项目+添加导航视图控制器

欢迎转载,请注明出处. 解说:使用xcode6的Empty项目模板创建出的项目啥都没有,及不方便.本编就先教大家如何创建一个包含有Target以及Appdelegate等目录的空项目以及添加导航视图控制器. 步骤1:打开xcode6,然后File - > New ->Project,打开后选择Single View Application模板,点击Next,输入项目名称,点击Next,选择保存位置,点击Create. 步骤2:选中项目名称,在配置栏中选择Info栏目,在Custom iOS T

拥抱Android Design Support Library新变化(导航视图、悬浮ActionBar..)

转载 请注明 明桑Android Android 5.0 Loollipop作为Android最重要的版本之一,为我们带来了全新的界面风格和设计语言.看起来很受欢迎,可它的普及似乎不那么顺利,刚过去不久的Google I/O 2015都已经推出了新的Android M预览版.即使是这样,原生版本的Android推广似乎一直没取得google预期的结果-不管怎样,作为开发者我们关心的无非是这个平台是否好用,能否开发出精致而又有趣的应用.好在Material Design我认为是成功的,官方在And

Citrix XenMobile学习笔记之四:MIM移动信息管理(Mobility Information Management)

产品简介: Citrix MIM移动信息管理由Citrix ShareFile这一产品来集成.Citrix ShareFile是一种企业"数据跟随(Follow-me-data)"解决方案,使IT部门可交付可靠的数据共享和同步服务,满足用户的移动性和协作需求,以及企业的数据安全需求.ShareFile使"数据跟随(Follow-me data)"服务成了每个用户日常生活中无缝而直观的组成部分,可帮助当前高度机动化.随时随地通过任何设备办公的员工队伍确保最高的生产率.