重庆网站建设公司 菠拿拿石家庄房产网 二手房出售

看过的知识不等于学会。唯有用心总结、系统记录，并通过温故知新反复实践，才能真正掌握一二
作为一名摸爬滚打三年的前端开发，开源社区给了我饭碗，我也将所学的知识体系回馈给大家，助你少走弯路！
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);