openlayers 入门教程(九):overlay 篇

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。

在这里插入图片描述

No.内容链接
1Openlayers 【入门教程】 - 【源代码+示例300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例150+】
5前端就业宝典 【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

    • 一、 overlay 常用属性
    • 二、overlay 常用方法
    • 三、overlay 常用事件
    • 四、实战示例
    • 五、Openlayers 入门教程 -系列文章列表


Overlay这个组件在Openlayers 项目中是经常要用到的,使用的场景通常是作为弹窗,显示某点或者某区域的信息。它不是根据屏幕位置固定的,而是与地理坐标相关联,因此平移地图将移动 Overlay。常用的大致有三类,弹窗、标注、文本信息。每个覆盖物都会生成对应的HTML元素,所以我们也可以使用css来修改去样式。

一个覆盖物最少需要一个元素,当数据量大时,元素节点过多会导致页面加载卡顿,不流畅。大数据量的绘制图还是使用图层最好。

在这里插入图片描述

一、 overlay 常用属性

• id,覆盖物的唯一标识 ,便于 getOverlayById 方法取得相应的 overlay。
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’。
• stopEvent,是否应停止事件传播到地图视口。
• autoPanAnimation,用于将叠加层平移到视图中的动画选项。此动画仅在autoPan启用时使用。可以提供Aduration和easing来自定义动画。如果autoPan作为对象提供,则弃用并忽略。
• className,CSS 类名。

二、overlay 常用方法

• setPosition,设置 position 属性。
• getElement,获取传入的元素节点。
• getId,获取 overlay 的 id。
• getMap,获取与 overlay 关联的 map对象。
• getOffset,获取 offset 属性。
• getPosition,获取 position 属性。
• getPositioning,获取 positioning 属性。
• setElement, 设置元素节点。
• setMap,设置map对象。
• setOffset,设置 offset。
• setPositioning,设置 positioning 属性。

三、overlay 常用事件

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

绑定方式
var overlay = new ol.Overlay({
overlay.on(“change:element”, function(){ console.log(“获取变化”); })

四、实战示例

示例 1 : 单击某位置,弹出经纬度坐标
示例 2 :双击名片坐标,显示名片信息
示例 3 :点击位置点,弹出播放MP4视频

五、Openlayers 入门教程 -系列文章列表

  • openlayers 入门教程(一):应该如何学习openlayers
  • openlayers 入门教程(二):Map 篇
  • openlayers 入门教程(三):View 篇
  • openlayers 入门教程(四):Layers 篇
  • openlayers 入门教程(五):Sources 篇
  • openlayers 入门教程(六):Controls篇
  • openlayers 入门教程(七):Interactions篇
  • openlayers 入门教程(八):Geom 篇
  • openlayers 入门教程(九):Overlay 篇
  • openlayers 入门教程(十):Style 篇
  • openlayers 入门教程(十一):Formats篇
  • openlayers 入门教程(十二):定位与轨迹
  • openlayers 入门教程(十三):动画
  • openlayers 入门教程(十四):第三方插件
  • openlayers 入门教程(十五):与 canvas、echart,turf 等交互

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/792068.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring框架提供三个核心服务

1. IOC:控制反转服务 由“Spring容器对象”完成指定类的实例对象的创建 2. DI:依赖注入 由“Spring容器对象”完成指定对象的初始化的服务 3. AOP:面向切面编程 降低开发人员使用代理设计模式难度,开发人员只需要专注于切面类的开发即可…

vue-cli打包 nodejs内存溢出 vue2.x Last few GCs

遇到这种情况百度各种博客,什么改package.json里的配置,什么安装increase-memory-limit ,都尝试了并没什么用处,最后解决方案为执行下方名单,再次打包就成功了: export NODE_OPTIONS--max_old_space_size4…

android 内存优化

什么是内存泄漏? 如果一个无用对象(不需要再使用的对象)仍然被其他对象持有引用,造成该对象无法被系统回收,以致该对象在堆中所占用的内存单元无法被释放而造成内存空间浪费,这中情况就是内存泄漏。 在Android开发中…

单元测试 mockito(二)

1.返回指定值 2.void返回值指定插桩 3.插桩的两种方式 when(obj.someMethod()).thenXxx():其中obj可以是mock对象 doXxx().wien(obj).someMethod():其中obj可以是mock/spy对象 spy对象在没有插桩时是调用真实方法的,写在when中会导致先执行一次原方法,达不到mock的目的&#x…

好物视频素材在哪找?视频素材大全app下载

创作优质视频内容不仅仅是一种艺术,也是一种科学,需要对素材的深刻理解和精心挑选。掌握了这些高清无水印视频素材,您就拥有了创作引人入胜视频内容的强大工具。以下是更多精选的视频素材网站,旨在为您的视频项目提供更广阔的视野…

Python | Leetcode Python题解之第10题正则表达式匹配

题目: 题解: class Solution:def isMatch(self, s: str, p: str) -> bool:m, n len(s), len(p)dp [False] * (n1)# 初始化dp[0] Truefor j in range(1, n1):if p[j-1] *:dp[j] dp[j-2]# 状态更新for i in range(1, m1):dp2 [False] * (n1) …

专升本--python运算符总结

运算优先级 同一个等级是没有先后顺序的,此外,赋值语言的先后问题: 赋值的顺序从上往下,同一行一般都是代表同时进行赋值,如图所示: 一.and A and B,若A,B有任意一个为假(0&#x…

希尔排序和快排里的小区间优化

希尔排序 希尔排序是插入排序的优化。 当一串数是逆序时,那么每插入一个数,前面的数都会向后面挪动。 那么这是插入排序的时间复杂度,就会达到O(n^2) 希尔排序是对数组里的数进行预排序。 防止插入排序出现最坏的情况。 预排序&#xf…

代码随想录-图论

797.所有可能的路径&#xff1a; . - 力扣&#xff08;LeetCode&#xff09; class Solution {List<List<Integer>> ansnew LinkedList<>();List<Integer> listnew LinkedList<>();public List<List<Integer>> allPathsSourceTarg…

ABC318 F - Octopus

解题思路 对于每个宝藏维护个区间&#xff0c;答案一定在这些区间中对于每个区间的端点由小到大排序对于每个点进行判断&#xff0c;若当前位置合法&#xff0c;则该点一定为一个右端点则该点到前一个端点之间均为合法点若前一个点不合法&#xff0c;则一定是某一个区间限制的…

Vue3:使用Pinia存储、读取、修改数据

一、存储数据 Pinia插件中&#xff0c;存储数据的配置项是state count.ts import {defineStore} from piniaexport const useCountStore defineStore(count,{// 真正存储数据的地方state(){return {sum:6}} })loveTalk.ts import {defineStore} from piniaexport const use…

Xen Server 8 Install

Xen Sevrer 前言 XenServer&#xff08;以前称为 Citrix Hypervisor&#xff09;是业界领先的平台&#xff0c;实现了经济高效的桌面、服务器和云虚拟化基础结构。XenServer 支持任意规模或类型的组织整合计算资源&#xff0c;以及将计算资源转换为虚拟工作负载&#xff0c;从…

RESTful API说明

RESTful API&#xff08;Representational State Transfer&#xff09;是一种用于设计网络应用程序的架构风格。它基于 HTTP 协议&#xff0c;通过使用统一的资源标识符&#xff08;URL&#xff09;来访问和操作资源。 RESTful API 的设计原则包括&#xff1a; 资源标识符&am…

SpringBoot2升级到SpringBoot3总结

最近公司在做监控日志平台的迁移&#xff0c;从NewRelic迁移到Dynatrace&#xff0c;为了配合迁移&#xff0c;有一个前提就是把SpringBoot2升级到SpringBoot3。 我们这边的项目大多数都是KotlinSpringBoot2.X的技术栈&#xff0c;现在要全部升级到最新的SpringBoot3.2.2或者S…

c++协程详解(二)

前言 这是c协程实现第二篇&#xff0c;这里开始我们将开始真正意义上开始实现协程。对协程基础流程不清楚的&#xff0c;可以看我的第一篇。 后续可能需要一定的模板知识&#xff0c;可以看下我的模板的文章&#xff0c;那些知识就完全够用了。本篇将实现一个协程封装的异步任…

Redis慢日志

SLOWLOG 是用来读取和重置 Redis 慢查询日志的命令&#xff0c;Redis 2.2.12 版本开始支持 1.Redis 慢查询日志概述 客户端从发送命令到获取返回结果经过了以下几个步骤&#xff1a; 1. 客户端发送命令 2. 该命令进入 Redis 队列排队等待执行 3. Redis 开始执行命令 - Red…

浅析JavaWeb内存马基础原理与查杀思路

文章目录 前言Java内存马内存马分类&原理JavaWeb三大组件注入Servlet内存马注入Filter型内存马JAVA Agent内存马 哥斯拉木马0x01 WebShell0x02 MemShell0x03 FilterShell0x04 Arthas排查0x05 scanner查杀 总结 前言 几年前写过《Web安全-一句话木马》&#xff0c;主要介绍…

PurpleKeep:提供Azure管道以创建基础设施并执行Atomic测试

关于PurpleKeep PurpleKeep是一款功能强大的安全测试自动化工具&#xff0c;该工具能够通过提供Azure管道以创建基础设施&#xff0c;并帮助广大研究人员执行Atomic测试。 随着攻击技术种类的迅速增加&#xff0c;以及EDR&#xff08;端点检测和响应&#xff09;和自定义检测规…

二叉树层序遍历 及相关题目

1&#xff0c;力扣102 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20],[15,7]]示例…

Canvas背景绘制-24

本节会详细介绍下&#xff0c;如何绘制面板的背景。 概述 常用的技术称为图块复制(blitting)&#xff0c;即从离屏缓冲区中将内容发生变化的那部分背景图像复制到屏幕上&#xff0c;还有其它两种方法是将所有内容擦除并重新绘制&仅重绘内容发生变化的那部分区域。一般是用…