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

时间: 2021-09-14

openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)

目录 1. 写在前面 2. overlay 实现popup弹窗 2.1 vue 页面 addPopup() 方法详解 2.2 autoPan 属性为false效果 3. overlay 实现 label标注信息 4 overlay 实现 text文本信息 5. 附上完整代码 1. 写在前面 常见的地图覆盖物为这三种类型,如:popup弹窗.label标注信息.text文本信息等. 上篇讲了overlay的一些属性方法事件等,这篇主要讲overlay三种最常用的案例.更多可以参考上篇内容openl

基于百度地图api清除指定覆盖物(Overlay)的方法

最近用百度地图api做项目,需要同时在地图显示marker与Polyline,且Polyline需要根据点击来显示或清除,所以遇到了清除指定覆盖物的问题,各种搜索后未能找到完美的解决方法,通过自己思考,摸索了一方法能解决这个问题,发出来给大家分享.好了,进入正题: 清除覆盖物有两个方法:map.removeOverlay()或者 map.clearOverlays(),clearOverlays()方法一次移除所有的覆盖物,removeOverlay()一次移除一个指定覆盖物,显然,我要一次移除

Openlayers实现地图全屏显示

本文实例为大家分享了Openlayers实现地图全屏显示的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个div标签,用来作为地图加载的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

基于vue+openlayer实现地图聚合和撒点效果

目录 前言: 实现效果: 1.聚合效果: 2.撒点效果: 具体实现步骤: 1.项目中引入openlayer 2.配置(按需引入) 3.实现地图展示 4.撒点功能 5.聚合效果 前言: openlayer是目前我们gis常用的一款开源的,并且反馈都特别好的软件了,像之前的ol3, 风靡一时,地图实现也很简单,很实用,目前vue中使用地图也是非常多的,那么如果在vue中引入openlayer并且实现地图撒点效果,甚至是更深层的地图聚合效果呢,本文来分享下vue中地图的实现.目前openlayer的

vue-openlayers实现地图坐标弹框效果

本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

vue项目中仿element-ui弹框效果的实例代码

最近要写个弹框,发现element-ui弹框样式还可以,就copy下来改吧改吧.也不分步骤详细介绍了直接上代码. 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来 message文件夹 src文件夹 index.js import Message from './src/main.js'; export default Message; mian.js import Vue from 'vue'; import Main from './main.vue'; le

Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)

1. 实现效果 2.实现原理 在父组件中点击编辑按钮,将当前点击对象的id传给子组件,子组件根据id修改相应的内容 父组件中代码: //放置编辑按钮的位置 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" v-on:click="edit(manage.id)"><i class="layui-icon"><

Vue自定义render统一项目组弹框功能

一.本文收获 pick 二.为什么要统一封装弹框: 要封装成怎样 通过举例常规弹框的写法.我们可以体会到,通常要弹出一个页面,需要创建一个页面 normalDialog.vue 包裹 dialogBody.vue (弹框主体):需要 parent.vue 设置flag控制弹框显示隐藏, normalDialog.vue 关闭的时候设置 parent.vue 对应 flag .缺点: 流程繁杂.配置繁琐.不灵活.样式不统一和参数传递麻烦等 .如果一个项目弹框较多的时候,弊端将会更明显,大量的 is

ionic 自定义弹框效果

在工作过程中往往需要自定义的弹框.因此,将内容整理如下,以方便学习.若有不当之处,敬请斧正! 思路 利用ionic自带的弹框$ionicPopup. 隐藏头部和尾部,只保留body部分 在利用templateUrl或者template,引入需要的模板 代码 $ionicPopup.show({ cssClass:'team-popup', template: "<div class='list popup-form'>" + "<div class = 'f

Vue.js仿Select下拉框效果

本文实例为大家分享了Vue.js仿Select下拉框效果的具体代码,供大家参考,具体内容如下 废话少说,直接上图上代码: 效果图: HEML: <div id="demo"> <h2 class="title">自定义下拉框</h2> <imitate-select h2-value="第一个 Select" v-bind:list="list1"></imitate-se

vue项目中使用vue-layer弹框插件的方法

vue-layer弹框插件 安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 参数说明 { type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) title: '信息', content: '', area: 'auto', offset: 'auto', icon: -1, btn: '确定', time: 0

Android 实现抖音头像底部弹框效果的实例代码

布局文件 activity_test.xml <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

微信小程序实现弹框效果

本文实例为大家分享了微信小程序实现弹框效果的具体代码,供大家参考,具体内容如下 先上代码 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上弹起</text> </view> <view class='top' bindtap='powerDrawer' data-statu="open&quo

用jquery中插件dialog实现弹框效果实例代码

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu