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. C#可以直接调用的Win32API（和VCL做的整理工作非常类似）
			
    以前整理的Win32 API,可以直接在C#中直接调用,在做WinForm时还是很有帮助的.以前用在一个多窗口界面中,当轮询窗口时,调用API会提高很多效率. 源码下载 http://files.cn ...
    
			
    2. 
						
  2. cursor pin S wait on X
			
    cursor pin S wait on X: 这是10.2版本提出的mutex(互斥)机制用来解决library cache bin latch争夺问题引入的新事件,是否使用这种机制受到隐含参数_k ...
    
			
    3. 
						
  3. 十大免费移动程序测试框架(Android/iOS)
			
    十大免费移动程序测试框架(Android/iOS) 概述:本文将介绍10款免费移动程序测试框架,帮助开发人员简化测试流程,一起来看看吧. Bug是移动开发者最头痛的一大问题.不同于Web应用程序开发, ...
    
			
    4. 
						
  4. -_-#【React】
			
    React Native 用于构建用户界面的JAVASCRIPT库 | ReactReact 入门实例教程颠覆式前端UI开发框架:Reactzhihu1zhihu2 React.js编程思想 < ...
    
			
    5. 
						
  5. Android 各版本信息 （维基百科）
			
    The following tables show the release dates and key features of all Android operating system updates ...
    
			
    6. 
						
  6. Hadoop集群与RAID磁盘阵列
			
    Hadoop集群规范 硬盘选型 尽管建议采用RAID(Redundant Array of Independent Disk,即磁盘阵列)作为NameNode的存储器以保护元数据,但是若将RAID作为 ...
    
			
    7. 
						
  7. sublime 生成网页头文件
			
    1.普通HTML 输入html:xt然后按tab键即可生成如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
    
			
    8. 
						
  8. ApiDemos--&gt;Views-lists-slow adapter学习
			
    今天来依照apidemos提供的方法来实现slow loading的效果. 简单说下实现方法: 实现ListView.OnScrollListener ,监听到手势滑动的情况,当处于滚动状态时,将新显 ...
    
			
    9. 
						
  9. 怎样在 SSASserver之间做同步
			
     简单介绍: 从SQL Server 2005開始,分析服务就支持了同步的功能.本文将介绍怎样在SQL Server 2012下同步Adventureworks的分析服务数据库.通过同步的功能,我 ...
    
			
    10. 
						
  10. c++ map与 qt QMap insert 区别
			
    当插入相同key的字段时, c++  map 会保留原来的字段, QMap 则会取代原来的字段.
    
			
    11.