openlayers6之地图覆盖物overlay详解
1. overlay 简述
overlay是覆盖物的意思,顾名思义就是在地图上以另外一种形式浮现在地图上,这里很多同学会跟图层layers搞混淆,主要是放置一些和地图位置相关的元素,常见的地图覆盖物为这三种类型,如:popup 弹窗
、label标注信息
、text文本信息
等,而这些覆盖物都是和html中的element等价的,通过overlay的属性element和html元素绑定同时设定坐标参数——达到将html元素放到地图上的位置,在平移缩放的时候html元素也会随着地图的移动而移动。
下面我们在看下官网的描述,其实map默认是存在这个属性,跟前面写的文章,图层,控件,交互都一个性质,都是默认加载地图的情况下是允许设置默认的overlay覆盖物
,也可以在某个事件或者方法触发的时候去单独添加覆盖物。这里可以看下前面的文章描述,具体不进行详细阐述。
2. overlay 属性
overlay初始化时可以接受很多的配置参数,这些配置参数是一个个的键值对,共同构成一个对象字面量(options),然后传递给其“构造函数”,如
new ol.Overlay(options)
,此处的 options 便是参数键值对构成的对象字面量。可配置的键值对,定义如下:(红色为常用属性)
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像素;
后面案例中使用。
2. overlay 事件
支持的事件主要是继承
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 的位置变化时在浏览器的控制台输出字符串的例子。
var overlay = new ol.Overlay({ // 创建 overlay ...省略 }); // 事件 overlay.on("change:position", function(){ console.log("位置改变!"); })
4. overlay 方法
支持的方法这里我们只介绍 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 属性。
5. 写到最后
开篇我们提到了 overlay 有三种常见的用法 popup 弹窗
、label标注信息
、text文本信息
详细内容参考此篇文章 openlayers6【八】地图覆盖物overlay三种常用用法 popup弹窗,marker标注,text文本
到此这篇关于openlayers6之地图覆盖物overlay详解的文章就介绍到这了,更多相关openlayer overlay地图覆盖内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 采用CSS覆盖的方法就可以了,但是官方是不允许这么做的...2013-10-13
- overlay就是在地图上以另外一种形式浮现在地图上,常见的地图覆盖物为这三种类型,如:popup 弹窗、label标注信息、text文本信息等,接下来跟随小编看下openlayers6之地图覆盖物overlay详解,一起看看吧...2021-09-15
基于Vue+Openlayer实现动态加载geojson的方法
本文通过实例代码给大家介绍基于Vue+Openlayer实现动态加载geojson的方法,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-09-01如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
本文给大家介绍javascript实现高德地图和百度地图提取行政区边界经纬度坐标的相关知识,本文实用性非常高,代码简单易懂,需要的朋友参考下吧...2016-01-24- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要介绍了百度地图API之百度地图退拽标记点获取经纬度的实现代码,需要的朋友可以参考下...2017-01-16
- 这篇文章主要介绍了详解Javascript利用echarts画空气质量地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-10-11
- 相信大家现在都知道微信小程序吧,下面这篇文章主要给大家介绍了微信小程序开发之map地图的相关资料,分享出来供大家参考学习,文中通过示例代码介绍的非常详细,需要的朋友们下面跟着小编来一起学习学习吧。...2017-06-15
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30- 这篇文章主要介绍了百度地图给map添加右键菜单(判断是否为marker) 的相关资料,需要的朋友可以参考下...2016-03-07
Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制)
本篇文章给大家介绍基于postrender机制使用Vue+Openlayer批量设置闪烁点的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-09-01- C#生成sitemap站点地图的方法,需要的朋友可以参考一下...2020-06-25
- 这篇文章主要介绍了c#使用windows服务更新站点地图的详细示例,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了使用OpenLayers3 添加地图鼠标右键菜单的相关资料,需要的朋友可以参考下...2016-01-02
docker容器间跨宿主机通信-基于overlay的实现方法
这篇文章主要介绍了docker容器间跨宿主机通信-基于overlay的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-20- 最近做个项目,需要实现获取当前位置的经纬度,所以本文主要介绍了vue中调用百度地图获取经纬度的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-16
- 这篇文章主要介绍了php+js实现百度地图多点标注的方法,涉及php结合js针对百度地图接口调用与json操作相关技巧,需要的朋友可以参考下...2016-12-02