openlayers3中Overlay用法
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-left
、bottom-center
、bottom-right
、center-left
、center-center
、center-right
、top-left
、top-center
、top-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用法的更多相关文章
- [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法
一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...
- ORACLE 中ROWNUM用法总结(转)
ORACLE 中ROWNUM用法总结! 对于 Oracle 的 rownum 问题,很多资料都说不支持>,>=,=,between...and,只能用以上符号(<.<=.!=) ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- c#初学-多线程中lock用法的经典实例
本文转载自:http://www.cnblogs.com/promise-7/articles/2354077.html 一.Lock定义 lock 关键字可以用来确保代码块完成运行,而不会被 ...
- .NET3.5中JSON用法以及封装JsonUtils工具类
.NET3.5中JSON用法以及封装JsonUtils工具类 我们讲到JSON的简单使用,现在我们来研究如何进行封装微软提供的JSON基类,达到更加方便.简单.强大且重用性高的效果. 首先创建一个类 ...
- ORACLE 中ROWNUM用法总结!
ORACLE 中ROWNUM用法总结! 对于 Oracle 的 rownum 问题,很多资料都说不支持>,>=,=,between...and,只能用以上符号(<.<=.!=) ...
- Android开发中Bundle用法包裹数据(转)
Android开发中Bundle用法包裹数据 Bundle的经典用法,包裹数据放入Intent中,目的在于传输数据. SDK 里是这样描述: A mapping from String values ...
- 转载 从最简单的vector中sort用法到自定义比较函数comp后对结构体排序的sort算法
转载自:http://www.cnblogs.com/cj695/p/3863142.html sort函数在使用中非常好用,也非常简单,而且效率与冒泡或者选择排序不是一个数量级.本文就sort函数在 ...
- SQL 中ROLLUP 用法
SQL 中ROLLUP 用法 ROLLUP 运算符生成的结果集类似于 CUBE 运算符生成的结果集. 下面是 CUBE 和 ROLLUP 之间的具体区别: CUBE 生成的结果集显示了所选列中值的所有 ...
随机推荐
- 【数据库测试工具】认识Sysbench
本文基于课堂PPT笔记整理,主要介绍一下Sysbench及其简单使用,实验代码部分在代码中有重点注释,不另作说明. 一,基准测试 什么是数据库的基准测试? 数据库的基准测试是对数据库的性能指标进行定量 ...
- Unity - 旋转方法
前言 本文梳理了Unity中常用的旋转方法,涉及两大类:Transform.Quaternion. Transform 类 Rotate() 此方法重载多,易理解,在连续动态旋转中较为常用. /* o ...
- python 入门 之 Json 序列化
开发网站,离不了Json 但是一般情况,不支持python的其它对象,怎么办? 有办法:Json 序列化!!! 总体来说,需要序列化的数据类型为 字典,类,嵌套类. 下面是我做的一个demo,都包含了 ...
- 史上最详细mac安装Qt教程
史上最详细mac安装Qt教程,小白看过来! 这是一篇非常适合Qt入门小白的的安装Qt教程,因为这学期我们小组的一个关于高速救援的项目要用到Qt与web进行交互式展现相关的图像,由于没有MSVC这个插件 ...
- alg-最长公共子序列
class Solution { public: std::string LongestCommonSubsequence(const std::string& s1, const std:: ...
- 【Java】封装、继承、多态
封装 在面向对象程式设计方法中,封装(英语:Encapsulation)是指一种将抽象性函式接口的实现细节部分包装.隐藏起来的方法. 封装可以被认为是一个保护屏障,防止该类的代码和数据被外部类定义的代 ...
- 上班无聊,自己用python做个小游戏来打发时间
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取t.cn ...
- 你知道python入门,是学到什么程度才算是吗?
1.入门的标准是什么? 这是很多初学者都关注的问题,但又是一个很难回答的问题,问题的核心是采取什么标准来衡量一个人是否已经入门. 以知识量的多少来衡量是不是可行呢?有些人走马观花一般学了很多pytho ...
- Berry Jam codeforces 1278C
题目大意: 有两种类型的果酱,一个梯子,从中间开始吃,可以吃左边的,也可以吃右边的,最终要使两种类型的果酱的数量想等 题解: 思路对了,但是没考虑完. 对梯子的左侧的果酱I我们用两个数组记录其从1到i ...
- D-Power Products
题目连接: 题解: 根据题目的意思,对每个X进行质因子分解,保存其质因子以及质因子出现的个数,如果两个数的乘积变成一个数的K次幂,那么两个数的质因子的指数之间相加应为k的倍数.保存完毕后,开始遍历,将 ...