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/


												


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

    
								
  1. oracle学习系列之四 （视图）
		
    视图视图是数据库中特有的对象.视图用于存储查询,但不会存储数据(物化视图除外).这是视图和数据表的重要区别.可以利用视图进行查询,插入,更新和删除数据.Oracle有如下四种视图(关系视图,内嵌视图, ...
    
		
    2. 
						
  2. SQL Server 学习系列之四（SQL 内幕）
		
    SQL Server 学习系列之四(SQL 内幕) SQL Server 学习系列之一(薪酬方案+基础) SQL Server 学习系列之二(日期格式问题) SQL Server 学习系列之三(SQL ...
    
		
    3. 
						
  3. 从C#到Objective-C，循序渐进学习苹果开发(6)--视图控制器的使用
		
    本随笔系列主要介绍从一个Windows平台从事C#开发到Mac平台苹果开发的一系列感想和体验历程,本系列文章是在起步阶段逐步积累的,希望带给大家更好,更真实的转换历程体验.本篇主要开始介绍基于XCod ...
    
		
    4. 
						
  4. Bootstrap 我的学习记录3 导航条理解
		
    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
    
		
    5. 
						
  5. Java学习-030-JSON 之四 -- 判断 JSONObject 是否包含键值对
		
    前文对获取 JSON 数据封装方法,使之可通过类似于 cssSelector 的方法获取 JSON 数据,使获取数据变得简单.敬请参阅:模仿 cssSelector 封装读取 JSON 数据方法. 在 ...
    
		
    6. 
						
  6. 学习OpenSeadragon之五(工具条toolbar与自定义按钮)
		
    OpenSeadragon简介:学习OpenSeadragon之一(一个显示多层图片的开源JS库) 一.工具条toolbar设置 OpenSeadragon为我们提供了现成的工具条toolBar,工具 ...
    
		
    7. 
						
  7. 学习OpenSeadragon之三 (覆盖层Overlayer的使用)
		
    Overlayer(覆盖层)是一个很重要的机制,它可以在可缩放图片上显示额外的信息. 1.简单应用 以下是我做出的一个小例子: 看这小老鼠头部的红色框内的部分就是一个分离出来的overlay. 介绍一 ...
    
		
    8. 
						
  8. ASP.NET MVC 5 学习教程：修改视图和布局页
		
    原文 ASP.NET MVC 5 学习教程:修改视图和布局页 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 ...
    
		
    9. 
						
  9. ASP.NET MVC 5 学习教程：添加视图
		
    原文 ASP.NET MVC 5 学习教程:添加视图 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 通过控 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【HDOJ】1539 Shredding Company
			
    DFS. /* 1539 */ #include <iostream> #include <cstdio> #include <cstring> #include  ...
    
			
    2. 
						
  2. Borg Maze(bfs+prim)
			
    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6971   Accepted: 2345 Description The B ...
    
			
    3. 
						
  3. BZOJ 1021 [SHOI2008]Debt 循环的债务
			
    1021: [SHOI2008]Debt 循环的债务 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 694  Solved: 356[Submit][S ...
    
			
    4. 
						
  4. （2015年郑州轻工业学院ACM校赛题） A  彩票
			
    这是个简单的题目,其实就是判断是否是偶数, 对二进行特判一下就行了! 比赛时候我们还错两次................ 一看简单题就想抢一血,谁知到第一次提交CE, 再提交WA 汗........ ...
    
			
    5. 
						
  5. POJ 1287 Networking
			
    题目链接: poj.org/problem?id=1287 题目大意: 你被分派到去设计一个区域的连接点,给出你每个点对之间的路线,你需要算出连接所有点路线的总长度. 题目输入: 一个数字n  代表有 ...
    
			
    6. 
						
  6. 【性能测试】【Jmeter】学习（2）——录制一段脚本
			
    打开JMeter工具,录制一段脚本(我做的是录制登陆网站后点击设备的开关设定,然后再退出) 1).创建一个线程组(右键点击“测试计划”--->“添加”---->“线程组”) 2).添加录制 ...
    
			
    7. 
						
  7. 关于unsigned int和int的加法
			
    补码(two's complement) 在计算机系统中,数值一律用补码来表示和存储.原因在于,使用补码,可以将符号位和数值域统一处理:同时,加法和减法也可以统一处理.此外,补码与原码相互转换,其运算 ...
    
			
    8. 
						
  8. [Design Pattern] Mediator Pattern 简单案例
			
    Meditor Pattern,即调解模式,用一个调解类类处理所有的沟通事件,使得降低多对象之间的沟通难度,属于行为类的设计模式.为了方便理解记忆,我也称其为,沟通模式. 下面是一个调解模式的简单案例 ...
    
			
    9. 
						
  9. Maven搭建环境（Linux& Windows)
			
    Linux下安装Maven 1.前提条件: 1)下载并安装好JDK .在终端输入命令“java -version”,如果出现类似如下信息说明JDK安装成功. $ java -version java  ...
    
			
    10. 
						
  10. java读XML文件
			
    XML文件设计为传输和存储数据,其焦点为数据内容. HTML设计为用来显示数据, 其焦点为数据外观. XML仅仅是文本文件,任何文本编辑器一般情况下都能对其进行编辑. XML没有预定义的标签,并且设定 ...
    
			
    11.