Overlayer（覆盖层）是一个很重要的机制，它可以在可缩放图片上显示额外的信息。

1.简单应用

以下是我做出的一个小例子：

看这小老鼠头部的红色框内的部分就是一个分离出来的overlay。

介绍一下overlays：这是一个对象数组，定义了显示框viewer中固定的overlays层。overlays层通过这个选项来添加，之后这个块就从OpenSeadragon中去除了。

既然是数组，当然我们就可以定义很多个overlay。

下面结合这个Demo的核心代码来讲解:

 1 var openSeadragon = new OpenSeadragon({
 2       ...
 3         //定义覆盖层overlays
 4         overlays: [{  
 5                 id : "overlays-div",   //设置overlay的id
 6                 x:0.6,                 //起始位置x
 7                 y:0.16,                //起始位置y
 8                 width:0.1,             //设置宽度
 9                 height:0.08,           //设置高度
10                 className:"highlight", //设置overlay的类名
11                 }],
12     },
13     ...
14 });

这是在之前Demo的基础上添加的代码，“...”表示省略的代码，OpenSeadragon的简单配置和怎么显示在HTML中请参考：学习OpenSeadragon之一（一个显示多层图片的开源JS库）

overlays:[{...}]会生成一个新的 overlays对象，id和className分别是这个对象的id名和类名，我们可以通过这两个参数来找到访问它并且设置其样式。

x、y是overlays的左上角起点位置，这是相对于整个图片大小比例来说的，比例x=0 y=0就是整幅图片左上角。

不过经过我测试(开启调试模式比较)，y的值是相对于宽度的比例来说的，例如整幅图的 宽=100 高=50, x=0.1 y=0.1,那么起点位置为(100*0.1,100*0.1)=(10,10),跟整幅图高度没有关系。

width和height分别是overlays的宽度和高度，也是相对于整幅图像宽的比例。

 

如果仅仅做以上修改，我们发现图像没有任何改变，这是因为我们仅仅得到了overlays对象却没有修改其样式。

因为修改overlays对象样式必须在head的style里修改（官方是这么说的）,以下是这个例子的完整代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>OpenSeadragon_Demo1</title>
 6     <script src="openseadragon.min.js"></script>
 7 </head>
 8 <style>
 9     #overlays-div{
10         border: 1px solid red;
11     }
12 </style>
13 <body>
14     <h1>overlays</h1>
15     <div id="openSeadragon1" style="width:800px; height:350px; border:1px solid blue;"></div>
16 </body>    
17 <script type="text/javascript">
18 var openSeadragon = new OpenSeadragon({
19     id:  "openSeadragon1",  //指定显示的div
20     prefixUrl: "./images/", //库中按钮等图片所在文件夹
21     tileSources: {     
22         Image: {
23             xmlns:  "http://schemas.microsoft.com/deepzoom/2009",//指令集
24             Url: "./ccc_files/", //图片库地址
25             Overlap: "1",        //相邻图片重合的像素
26             TileSize: "256",     //单个切片（正方形）的边长
27             Format : "jpg",         //切片格式
28              //图片总大小
29             Size:{
30                 Height: "1181",
31                 Width:  "2953",
32             },
33         },
34         //定义覆盖层overlays
35         overlays: [{  
36                 id : "overlays-div",    //设置overlay的id
37                 x:0.6,                   //起始位置x
38                 y:0.16,                    //起始位置y
39                 width:0.1,              //设置宽度
40                 height:0.08,            //设置高度
41                 className:"highlight",  //设置overlay的类名
42                 }],
43     },
44     //debugMode : true, //开启调试模式
45 });
46 </script>
47 </html>

 

2.像素设置 overlays的位置和长宽

可以用像素值设置overlays的位置和长宽，只要将x，y换成px，py即可：

1 overlays: [{  
2           id : "overlays-div",    //设置overlay的id
3           px:950,                   //起始位置x
4           py:220,                    //起始位置y
5           width:500,              //设置宽度
6           height:450,            //设置高度
7           className:"highlight",  //设置overlay的类名
8         }],

效果：

之所以设置了宽500 高450的像素看上去却没那么大，是因为这是按照图片放大到最大分辨率时候的像素，它会随图片缩小而缩小，以确保比例是一定的。

 

3.将overlays定义在已经定义的div中

上面的例子是定义一个id没有被创建的overlays，这样会自动创建一个新的overlays，例如上图的红框。

我们也可以指定一个已经被定义的div为overlays，这样做的好处是，我们可以往overlays里面添加文字、图片等所有HTML里的内容，然后再将其放入整个图片框viewer中。

核心代码：

 1 <body>
 2     <h1>overlays</h1>
 3     <div id="openSeadragon1" style="width:800px; height:350px; border:1px solid blue;"></div>
 4     <div id="overlays-div" class="overlays" >
 5         随便百度一张图片作为overlays
 6         <img src="http://e.hiphotos.baidu.com/image/pic/item/21a4462309f790528c5b54390ff3d7ca7bcbd574.jpg" 
 7         alt="">
 8     </div>
 9 </body>    
10 <script>
11 var openSeadragon = new OpenSeadragon({
12     ...
13     overlays: [{  
14             id : "overlays-div",    //设置overlay的id
15             px:2300,                //起始位置x
16             py:0,                   //起始位置y
17             width:800,              //设置宽度
18             height:1181,            //设置高度
19             className:"overlays",   //设置overlay的类名
20             }],
21     },
22     ...
23 });
24 </script>

 

4.使用addOverlay函数和removeOverlay函数实现overlay的创建与销毁

OpenSeadragon给我们提供了内置函数对overlay进行操作。

以下用一个外部按钮按下，就显示overlay，再次按下就销毁overlay的例子来说明：

按下“显示overlays”前：

按下“显示overlays”后：

再次按下“销毁overlays后”图片消失。

核心代码就是对addOverlay和removeOverlay的调用，以下是这个demo的完整代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>按钮操作overlays的创建与销毁</title>
 6     <script src="openseadragon.min.js"></script>
 7 </head>
 8 <body>
 9     <h1>按钮操作overlays的创建与销毁</h1>
10     <button id="button">显示overlays</button>
11     <div id="openSeadragon1" style="width:800px; height:350px; border:1px solid blue;"></div>
12 </body>    
13 <script type="text/javascript">
14 var openSeadragon = new OpenSeadragon({
15     id:  "openSeadragon1",  //指定显示的div
16     prefixUrl: "./images/", //库中按钮等图片所在文件夹
17     tileSources: {     
18         Image: {
19             xmlns:  "http://schemas.microsoft.com/deepzoom/2009",//指令集
20             Url: "./ccc_files/", //图片库地址
21             Overlap: "1",        //相邻图片重合的像素
22             TileSize: "256",     //单个切片（正方形）的边长
23             Format : "jpg",         //切片格式
24              //图片总大小
25             Size:{
26                 Height: "1181",
27                 Width:  "2953",
28             },
29         },
30     },
31 });
32 
33 var overlay = false;                                   //overlay标记位，存在为true，不存在为false
34 var btn = document.getElementById('button');           //获取按钮DOM对象
35 btn.onclick =                                          //按下按钮，执行创建或者销毁overlays
36 function() {
37     if (overlay) {
38         openSeadragon.removeOverlay("overlays-div");   //根据id，销毁移除overlay
39         //改变按钮提示状态
40         btn.innerHTML = "显示overlays";
41     } else {
42         var elt = document.createElement("div");       //创建一个div对象作为overlays
43         elt.id = "overlays-div";                       //设置div对象的id
44         //执行添加overlay的函数
45         openSeadragon.addOverlay({
46             element: elt,                              //overlay的元素名称（上面创建的div）
47             location: new OpenSeadragon.Rect(0.75, 0.1, 0.2, 0.2), //设置overlay在view上的位置
48         });
49         //为overlays添加图片
50         elt.innerHTML = "<img src='http://e.hiphotos.baidu.com/image/pic/item/21a4462309f790528c5b54390ff3d7ca7bcbd574.jpg'>";
51         //改变按钮提示状态
52         btn.innerHTML = "销毁overlays";
53     }
54     overlay = !overlay;                                 //标记位取反
55 };
56 </script>
57 </html>

官方demo参考：

http://openseadragon.github.io/examples/ui-overlays/