Overlay 从名字看,是覆盖图、覆盖物的意思,主要的用途就是在地图之上再覆盖一层,用以显示额外的可见元素,可见元素一般是 HTML 元素,利用 overlay,可以将可见元素放置到地图的任意位置,形成地图上再浮动一层的效果。例如在地图上相应的坐标放置一个标志,标签,利用 overlay 都可以做到,具体来说,点击地图上某位置,在点击位置弹出弹出框就是利用了 overlay。

初始化属性

overlay 初始化时可以接受很多的配置参数,这些配置参数是一个个的键值对,共同构成一个对象字面量(options),然后传递给其“构造函数”,如 `new ol.Overlay(options),此处的 options 便是参数键值对构成的对象字面量。可配置的键值对,定义如下:

/**
* Object literal with config options for the overlay.
* @typedef {{id: (number|string|undefined),
* element: (Element|undefined),
* offset: (Array.<number>|undefined),
* position: (ol.Coordinate|undefined),
* positioning: (ol.OverlayPositioning|string|undefined),
* stopEvent: (boolean|undefined),
* insertFirst: (boolean|undefined),
* autoPan: (boolean|undefined),
* autoPanAnimation: (olx.animation.PanOptions|undefined),
* autoPanMargin: (number|undefined)}}
* @api stable
*/
olx.OverlayOptions;

其含义分别如下:

  • id,为对应的 overlay 设置一个 id,便于使用 ol.Map 的 getOverlayById 方法取得相应的 overlay;
  • element,overlay 包含的 DOM element;
  • offset,偏移量,像素为单位,overlay 相对于放置位置(position)的偏移量,默认值是 [0, 0],正值分别向右和向下偏移;
  • position,在地图所在的坐标系框架下,overlay 放置的位置;
  • positioning,overlay 对于 position 的相对位置,可能的值包括 bottom-leftbottom-centerbottom-right 、center-leftcenter-centercenter-righttop-lefttop-centertop-right,默认是 top-left,也就是 element 左上角与 position 重合;
  • stopEvent,地图的事件传播是否停止,默认是 true,即阻止传播,可能不太好理解,举个例子,当鼠标滚轮在地图上滚动时,会触发地图缩放事件,如果在 overlay 之上滚动滚轮,并不会触发缩放事件,如果想鼠标在 overlay 之上也支持缩放,那么将该属性设置为 false 即可;
  • insertFirst,overlay 是否应该先添加到其所在的容器(container),当 stopEvent 设置为 true 时,overlay 和 openlayers 的控件(controls)是放于一个容器的,此时将 insertFirst 设置为 true ,overlay 会首先添加到容器,这样,overlay 默认在控件的下一层(CSS z-index),所以,当 stopEvent 和 insertFirst 都采用默认值时,overlay 默认在 控件的下一层;
  • autoPan,当触发 overlay setPosition 方法时触发,当 overlay 超出地图边界时,地图自动移动,以保证 overlay 全部可见;
  • autoPanAnimation,设置 autoPan 的效果动画,参数类型是 olx.animation.panOptions
  • autoPanMargin,地图自动平移时,地图边缘与 overlay 的留白(空隙),单位是像素,默认是 20像素;

支持的事件

支持的事件主要是继承 ol.Object 而来的 change 事件,当 overlay 相关属性或对象变化时触发:

  • change,当引用计数器增加时,触发;
  • change:element,overlay 对应的 element 变化时触发;
  • change:map,overlay 对应的 map 变化时触发;
  • change:offset,overlay 对应的 offset 变化时触发;
  • change:position,overlay 对应的 position 变化时触发;
  • change:positioning,overlay 对应的 positioning 变化时触发;
  • propertychange,overlay 对应的属性变化时触发;

那么怎么绑定相应的事件呢?openlayers 绑定事件遵循一般的 dom 事件绑定规则,包括 DOM 2 级事件绑定,以下是一个例子,这个例子说明了 overlay 的位置变化时在浏览器的控制台输出字符串的例子。

// example overlay event binding
var overlay = new ol.Overlay({
// ...
});
overlay.on("change:position", function(){
console.log("位置改变!");
})

方法

支持的方法这里我们只介绍 overlay 特有的方法,就不介绍其继承而来的方法了,主要是针对 overlay 的属性及其相关联对象的 get 和 set 方法。

  • getElement,取得包含 overlay 的 DOM 元素;
  • getId,取得 overlay 的 id;
  • getMap,获取与 overlay 关联的 map对象;
  • getOffset,获取 offset 属性;
  • getPosition,获取 position 属性;
  • getPositioning,获取 positioning 属性;
  • setElement;设置 overlay 的 element;
  • setMap,设置与 overlay 的 map 对象;
  • setOffset,设置 offset;
  • setPosition,设置 position 属性;
  • setPositioning,设置 positioning 属性。

openlayers3中Overlay用法的更多相关文章

  1. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  2. ORACLE 中ROWNUM用法总结(转)

    ORACLE 中ROWNUM用法总结! 对于 Oracle 的 rownum 问题,很多资料都说不支持>,>=,=,between...and,只能用以上符号(<.<=.!=) ...

  3. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  4. c#初学-多线程中lock用法的经典实例

    本文转载自:http://www.cnblogs.com/promise-7/articles/2354077.html 一.Lock定义     lock 关键字可以用来确保代码块完成运行,而不会被 ...

  5. .NET3.5中JSON用法以及封装JsonUtils工具类

    .NET3.5中JSON用法以及封装JsonUtils工具类  我们讲到JSON的简单使用,现在我们来研究如何进行封装微软提供的JSON基类,达到更加方便.简单.强大且重用性高的效果. 首先创建一个类 ...

  6. ORACLE 中ROWNUM用法总结!

    ORACLE 中ROWNUM用法总结! 对于 Oracle 的 rownum 问题,很多资料都说不支持>,>=,=,between...and,只能用以上符号(<.<=.!=) ...

  7. Android开发中Bundle用法包裹数据(转)

    Android开发中Bundle用法包裹数据 Bundle的经典用法,包裹数据放入Intent中,目的在于传输数据. SDK 里是这样描述: A mapping from String values ...

  8. 转载 从最简单的vector中sort用法到自定义比较函数comp后对结构体排序的sort算法

    转载自:http://www.cnblogs.com/cj695/p/3863142.html sort函数在使用中非常好用,也非常简单,而且效率与冒泡或者选择排序不是一个数量级.本文就sort函数在 ...

  9. SQL 中ROLLUP 用法

    SQL 中ROLLUP 用法 ROLLUP 运算符生成的结果集类似于 CUBE 运算符生成的结果集. 下面是 CUBE 和 ROLLUP 之间的具体区别: CUBE 生成的结果集显示了所选列中值的所有 ...

随机推荐

  1. HTML、PHP、CSS、JS之间的关系

    23:02:06 2019-08-05 自己要搭建网站 虽然可以下载大佬的界面 但至少要懂一点web开发的知识 我现在感觉像个憨憨 啥都不明白 转载自:知乎 https://www.zhihu.com ...

  2. 安装一个KVM服务器

                                                              安装一个KVM服务器     案例1:安装一个KVM服务器 案例2:KVM平台构建及 ...

  3. 怎样让scratch里的人物两腿走动

    需要人物角色至少有两个“造型”,表现走路时的两个动作.以默认的“小猫”觉色为例,它有两个“造型”,可以用来表现奔跑的动作. 但是要想让小猫跑起来,需要脚本来实现,简单跑动脚本如下 scratch学习视 ...

  4. docker开机自动启动

    方法一: chkconfig docker on 方法二: 1.1是用systemctl: systemctl enable docker 1.2将Docker的docker.service服务移动到 ...

  5. c++类模板之分文件编写问题及解决

    我们在实际项目中一般习惯头文件(.h)和源文件(.cpp)分开写,这样做的好处良多,但是如果遇到了类模板,这样可能会有一点儿问题. 我们通过一个例子来看: person.h: #pragma once ...

  6. Python+Tornado开发微信公众号

    本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 本教程针对的是已掌握Pyt ...

  7. Pod容器共享Volume

    同一个Pod中的多个容器能够共享Pod级别的存储卷Volume.Volume可以被定义为各种类型,多个容器各自进行挂载操作,将一个Volume挂载为容器内部需要的目录,如图 在下面的例子中,在Pod内 ...

  8. 小L的直线

    小学时期的小L发现自己很有艺术细胞,于是买了一块画板,但是他的绘画水平使得他只能连接两点画出一条线段.有一天他决定在一张有n个点的图上作画,即他可以把这n个点任意连接.大家认为平行线是非常不美观的,于 ...

  9. Linux学习笔记(三)目录和文件都能操作的命令

    目录和文件都能操作的命令 rm cp mv rm 英文原意:remove files or directories 功能:删除文件或目录 语法:rm 选项[-fir] 文件或目录 rm -f 强制删除 ...

  10. mybatis源码配置文件解析之三:解析typeAliases标签

    在前边的博客在分析了mybatis解析settings标签,<mybatis源码配置文件解析之二:解析settings标签>.下面来看解析typeAliases标签的过程. 一.概述 在m ...