OpenLayers 快速入门（八）事件系统
看过的知识不等于学会。唯有用心总结、系统记录，并通过温故知新反复实践，才能真正掌握一二
作为一名摸爬滚打三年的前端开发，开源社区给了我饭碗，我也将所学的知识体系回馈给大家，助你少走弯路！
OpenLayers、Leaflet 快速入门 ，每周保持更新 2 个案例
Cesium 快速入门，每周保持更新 4 个案例
OpenLayers 快速入门（一）Map对象
OpenLayers 快速入门（二）Layer 对象
OpenLayers 快速入门（三）Source 对象补充
OpenLayers 快速入门（四）View 对象
OpenLayers 快速入门（五）Controls 对象
OpenLayers 快速入门（六）Interaction 对象
OpenLayers 快速入门（七）矢量数据
OpenLayers 快速入门（八）事件系统
OpenLayers 快速入门（九）Extent 介绍
OpenLayers 快速入门（十）常用 API 补充
事件系统
事件系统是框架的核心部分，允许开发者监听和响应地图、图层、交互以及各种对象的状态变化。通过on方法订阅事件，通过un方法取消订阅，同时支持一次性事件监听（once）和自定义事件的能力。
// 监听事件
map.on("click", (e) => {});// 取消监听
map.un("click", (e) => {});// 一次性时间
map.once("click", (e) => {});// 自定义事件
map.on("customEvent", (e) => {});
Observable 对象
OpenLayers 中所有可触发事件的对象都继承自 ol/Observable 基类：
- Map
- View
- Layer
- Source
- Interaction
- Control
- Feature
- Overlay
通用事件：
change：通用变更事件propertychange：属性发生变化时触发error：通用错误事件，当发生错误时触发
Map 事件
click：点击事件singleclick（最常用）：真正的单击，没有拖动，也没有双击，此事件延迟 250 毫秒以确保它不是双击dblclick：双击事件loadend：加载额外地图数据完成时触发loadstart：当加载额外地图数据（tiles、images,、features）开始时触发moveend：地图移动后触发movestart：地图开始移动时触发pointerdrag： 指针拖动时触发pointermove：指针移动时触发。注意在触摸设备上，这是在地图平移时触发的，因此与 mousemove 不同postcompose：在图层组合完成后触发postrender：在地图帧渲染完成后触发precompose：在图层组合之前触发rendercomplete：当渲染完成时触发
View
change:center：视图中心位置改变时触发change:resolution：视图分辨率改变时触发change:rotation：视图旋转角度改变时触发
Layer 事件
change:extent：图层范围改变时触发change:maxResolution：最大分辨率改变时触发change:minResolution：最小分辨率改变时触发maxZoom：最大缩放级别改变时触发minZoom：最小缩放级别改变时触发change:source：图层源改变时触发change:zIndex：图层 zIndex 改变时触发change:visible：可见性改变时触发change:opacity：图层透明度改变时触发
Source 事件
VectorSource
featureloadend：要素加载完成时触发featureloaderror：要素加载错误时触发featureloadstart：要素加载开始时触发removefeature：要素移除时触发
ImageSource
imageloadend：图像加载完成时触发imageloaderror：图像加载错误时触发imageloadstart：图像加载开始时触发
TileSource
tileloadend：瓦片加载完成时触发tileloaderror：瓦片加载错误时触发tileloadstart：瓦片加载开始时触发
Overlay 事件
change:element：元素变更事件change:position：位置变更事件change:positioning：定位变更事件change:offset：偏移量变更事件change:map：地图变更事件
自定义事件
一、直接使用事件系统
// 添加自定义事件
map.on("customEvent", (event) => {console.log("自定义事件触发:", event.detail);
});// 两秒后触发自定义事件
setTimeout(() => {map.dispatchEvent({type: "customEvent",target: map,detail: { message: "Hello from custom event!" },});
}, 2000);
二、自定义 Observable 类
import Observable from "ol/Observable";
import Event from "ol/events/Event";// 自定义事件类
class StatusUpdateEvent extends Event {constructor(status) {super("statusupdate");this.status = status;this.timestamp = new Date();}
}// 自定义可观察对象
class CustomLayer extends Observable {constructor() {super();this.status = "idle";}startProcessing() {this.status = "processing";this.dispatchEvent(new StatusUpdateEvent(this.status));}completeProcessing() {this.status = "completed";this.dispatchEvent(new StatusUpdateEvent(this.status));}
}// 使用自定义层
const layer = new CustomLayer();
layer.on("statusupdate", (event) => {console.log(`状态更新: ${event.status} at ${event.timestamp}`);
});// 触发事件
layer.startProcessing();
setTimeout(() => layer.completeProcessing(), 2000);