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. java开发规范
			
    hbh 开发规范文档 一:目的 使本组织能以标准的,规范的方式设计和编码.通过建立编码规范,以使每个开发人员 养成良好的编码风格和习惯:并以此形成开发小组编码约定,提高程序的可靠性,可读性, 可修改性 ...
    
			
    2. 
						
  2. C语言指针类型 强制转换
			
    关于C语言指针类型 强制转换  引用一篇文章: C语言中,任何一个变量都必须占有一个地址,而这个地址空间内的0-1代码就是这个变量的值.不同的数据类型占有的空间大小不一,但是他们都必须有个地址,而这个 ...
    
			
    3. 
						
  3. zend framework 1 连接oracle数据库的写法
			
    1 用Zend_Db_Adapter_Pdo_Oci方式 $config =array( 'host'=>'192.168.5.40', 'port'=>'1521', 'dbname'= ...
    
			
    4. 
						
  4. ImportError: No module named matlab
			
    这个matlab已经改名为pylab了,你可以运行: from pylab import *
    
			
    5. 
						
  5. Ganglia + Nagios 初步实践
			
    参考文档: http://www.bubuko.com/infodetail-715636.html http://www.linuxidc.com/Linux/2014-01/95804p2.htm ...
    
			
    6. 
						
  6. HDOJ 2200 Eddy's AC难题（数学组合概率题）
			
    Problem Description Eddy是个ACMer,他不仅喜欢做ACM题,而且对于Ranklist中每个人的ac数量也有一定的研究,他在无聊时经常在纸上把Ranklist上每个人的ac题目 ...
    
			
    7. 
						
  7. 查看XBox360的系统版本信息
			
    XBox360的系统版本信息在系统设置界面就能看到: Step1:按手柄中央的"西瓜键",进入系统设置界面 Step2:在系统设置界面选择"主机设定" Step ...
    
			
    8. 
						
  8. HDU_1401——分步双向BFS,八进制乘权值压缩,map存放hash
			
    Problem Description Solitaire is a game played on a chessboard 8x8. The rows and columns of the ches ...
    
			
    9. 
						
  9. [Java Concurrent] 多线程合作 wait / notifyAll 的简单案例
			
    本案例描述的是,给一辆汽车打蜡.抛光的场景. Car 是一辆被打蜡抛光的汽车,扮演共享资源的角色. WaxOnCommand 负责给汽车打蜡,打蜡时需要独占整部车,一次打一部分蜡,等待抛光,然后再打一 ...
    
			
    10. 
						
  10. Jenkins,Maven及TestNG在自动化测试的应用（转）
			
    转自:http://qa.blog.163.com/blog/static/190147002201581634549893/ 希望实现的场景:Jenkins中的Job可针对不同浏览器,不同环境,运行 ...
    
			
    11.