看過的知識不等于學會。唯有用心總結、系統記錄，并通過溫故知新反復實踐，才能真正掌握一二
作為一名摸爬滾打三年的前端開發，開源社區給了我飯碗，我也將所學的知識體系回饋給大家，助你少走彎路！
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);
)
