当前位置：首页 > news >正文

openlayers 入门教程（九）：overlay 篇

news 2025/8/28 1:13:57

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

在这里插入图片描述

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例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(“获取变化”); })