事件系统

事件系统是框架的核心部分，允许开发者监听和响应地图、图层、交互以及各种对象的状态变化。通过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);