openlayers6之地图覆盖物overlay详解

 更新时间:2021年09月15日 11:41:18   作者:@必意玲  
overlay就是在地图上以另外一种形式浮现在地图上,常见的地图覆盖物为这三种类型,如:popup 弹窗、label标注信息、text文本信息等,接下来跟随小编看下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 的属性及其相关联对象的 getset方法。

  • 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地图覆盖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue实现购物车详情页面的方法

    Vue实现购物车详情页面的方法

    这篇文章主要介绍了Vue实战之购物车详情页面的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue3中hooks的简介及用法教程

    vue3中hooks的简介及用法教程

    vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是一些可以复用的公共方法/功能,这篇文章主要介绍了vue3中hooks的简介及用法,需要的朋友可以参考下
    2023-01-01
  • vue中使用ts配置的具体步骤

    vue中使用ts配置的具体步骤

    这篇文章主要介绍了vue中使用ts配置的具体步骤,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue中使用 setTimeout() setInterval()函数的问题

    Vue中使用 setTimeout() setInterval()函数的问题

    这篇文章主要介绍了Vue中使用 setTimeout() setInterval()函数的问题 ,需要的朋友可以参考下
    2018-09-09
  • VUE+ElementUI下载文件的几种方式(小结)

    VUE+ElementUI下载文件的几种方式(小结)

    本文主要介绍了VUE+ElementUI下载文件的几种方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 一文详解Vue-组件自定义事件(绑定和解绑)

    一文详解Vue-组件自定义事件(绑定和解绑)

    这篇文章主要介绍了Vue-组件自定义事件的绑定和解绑,文中有详细的图文实例,对学习或工作有一定的参考价值,需要的小伙伴可以阅读下
    2023-05-05
  • Vue使用虚拟键盘及中英文切换功能

    Vue使用虚拟键盘及中英文切换功能

    这篇文章主要给大家介绍了关于Vue使用虚拟键盘及中英文切换的相关资料,有时候在大型触屏设备(如双屏设备)中往往就没有键盘去操作,所以就需要去建立一个虚拟键盘去操作,需要的朋友可以参考下
    2023-06-06
  • 关于vue-cli3打包代码后白屏的解决方案

    关于vue-cli3打包代码后白屏的解决方案

    这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue中如何使用ztree

    vue中如何使用ztree

    这篇文章主要介绍了vue中如何使用ztree,包括配置package.json,自动加载jquery的方法,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • Vue中props的使用详解

    Vue中props的使用详解

    props属性是父子组件之间的通信桥梁。这篇文章主要介绍了Vue中props的使用,需要的朋友可以参考下
    2018-06-06

最新评论