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. 转：Zend_Cache的使用
			
    一.Zend_Cache快速浏览 Zend_Cache 提供了一个缓存任何数据的一般方法. 在Zend Framework中缓存由前端操作,同时通过后端适配器(File, Sqlite, Memcac ...
    
			
    2. 
						
  2. 转：assert()函数用法总结
			
    assert宏的原型定义在<assert.h>中,其作用是如果它的条件返回错误,则终止程序执行,原型定义: #include <assert.h>void assert( in ...
    
			
    3. 
						
  3. 前端工程之模块化（来自百度FEX）
			
    模块化 是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,系统中某一部分的变化将如何影响其它部分就会变得显而易见,系统的可维护性更加简单易 ...
    
			
    4. 
						
  4. 后缀.aspx.cs是什么软件的生成的
			
    ASP.NET技术 aspx ——ASP.NET文件(网页) aspx.cs ——ASP.NET文件中的代码页(与上面的对应) asp.net是微软公司推出的新一代网站程序开发架构,ASP.NET技术 ...
    
			
    5. 
						
  5. HDOJ 1028 Ignatius and the Princess III（递推）
			
    Problem Description "Well, it seems the first problem is too easy. I will let you know how fool ...
    
			
    6. 
						
  6. HDU_1846——最简单的巴什博弈
			
    Problem Description 十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中 ...
    
			
    7. 
						
  7. Spice代码阅读一：Spice Client 与 Spice Server 通道建立过程
			
    文件 方法 描述 Application.cpp init_globals() 初始化Log,ssl库,canvas(或opengl canvas)和quic压缩库 Process_cmd_line( ...
    
			
    8. 
						
  8. fedorea19安装redis
			
    Redis 安装: $ wget http://redis.googlecode.com/files/redis-2.4.5.tar.gz $ tar xzf redis-2.4.5.tar.gz $ ...
    
			
    9. 
						
  9. VS2008LINK : fatal error LNK1000: Internal error during IncrBuildImage
			
    修改链接选项,方法:项目->属性->链接器->常规   下面的“启用增量链接”,将“是(/INCREMENTAL)”改为“否(/INCREMENTAL:NO)”,然后确定就可以了.
    
			
    10. 
						
  10. UIKit和Core Graphics绘图（一）——字符串，线条，矩形，渐变
			
    概述 CoreGraphics也称为Quartz 2D 是UIKit下的主要绘图系统,频繁的用于绘制自定义视图.Core Graphics是高度集成于UIView和其他UIKit部分的.Core Gr ...
    
			
    11.