openlayers 入门教程（九）：overlay 篇

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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这个组件在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 等交互