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. hdu 5125 magic balls
			
    题意:求a数组的LIS,但是加了一个条件,为了LIS最大 b[i] a[i]可以交换.最多交换m次: 思路:我们令dp[i][j][l]表示i在最长上升子序列中,已经损失j点能量,第i个人转换了ai和 ...
    
			
    2. 
						
  2. win2k,XP下用setupapi.dll自动安装Driver
			
    win2k,XP下用setupapi.dll自动安装Driver 在驱网看到54cndr 写的这篇文章,虽然自己一直都用Installshield,但还是觉得这个也是一个很好的思路,故摘录在此. 用s ...
    
			
    3. 
						
  3. 理解java中的ThreadLocal（转）
			
    一.对ThreadLocal概述 JDK API 写道: 该类提供了线程局部 (thread-local) 变量.这些变量不同于它们的普通对应物,因为访问某个变量(通过其 get 或 set 方法)的 ...
    
			
    4. 
						
  4. VirtualBox - 自动调整屏幕大小，显示分辨率
			
    在VirtualBox中安装了Ubuntu后,Ubuntu的屏幕调整不太好,操作起来非常不方便,需要安装Vbox的增强功能.具体如下:1, 在  设备--> 安装增强功能这时会自动加载VBOXA ...
    
			
    5. 
						
  5. SSE及相关技术（web sockets, long polling等）
			
    server-sent events--One Way Messaging 允许网页获得来自服务器的更新,并且自动更新 Server-Sent Events: allow a web page to  ...
    
			
    6. 
						
  6. [置顶] VB 中chr(10)、chr(13)和vblf、vbcr、vbcrlf的分别
			
    1.共同点: chr(10):换行,相当于VBLF chr(13):回车,相当于VBCR chr(13)+chr(10):回车+换行,相当于VBCRLF cr是回车,只有回车,是到本行的最头上:lf是 ...
    
			
    7. 
						
  7. DataSet、DataTable、DataRow、DataColumn区别及使用实例
			
    DataSet 表示数据在内存中的缓存. 属性 Tables  获取包含在 DataSet 中的表的集合. ds.Tables["sjxx"] DataTable 表示内存中数据的 ...
    
			
    8. 
						
  8. php中的后期静态绑定（"Late Static Binding"）
			
    在我们以往中,在类中使用self关键字的时候都是指向了被调用方法定义时的类,而非原始的调用类. 例如: class Animal{ static $IQ_lv_avg = 1; public stat ...
    
			
    9. 
						
  9. Java笔记6之三目运算符
			
    /*    单目运算符:~3    双目运算符:3 + 4    三目运算符:        格式:比较表达式?表达式1:表达式2;                比较表达式:结果是一个boolean ...
    
			
    10. 
						
  10. Java中Timer的用法--转载之网络
			
    用法很简单,new一个timer,然后写一个timertask的子类即可. import java.util.Timer; import java.util.TimerTask; public cla ...
    
			
    11.