❝
注：当前使用的是 ol 9.2.4 版本，天地图使用的
key请到天地图官网申请，并替换为自己的key
地图事件贯穿于WebGIS开发的始终，用于实现地图与用户的交互操作。地图缩放、移动使用MapEvent事件；图层渲染、状态使用RenderEvent事件；要素绘制、选择使用DrawEvent、SelectEvent事件。
1. OpenLayers事件结构图
OpenLayers框架事件类型众多，我根据事件类型将其划分为地图事件、渲染事件、数据源事件、控制事件、集合事件、对象事件和定位事件，如下图所示。其中常用的事件包括地图事件，渲染事件和数据源事件以及控制事件。所有的事件都继承于Event类，具有target和type属性，以及preventDefault和stopPropagation方法，还包括change和error两个基本事件类型。
Event(ol.Event) | |
|---|---|
| 属性 | 描述 |
target{Object} | 事件目标 |
type{String} | 事件类型 |
| 方法 | 描述 |
preventDefault | 阻止默认事件 |
stopPropagation | 阻止事件冒泡传递 |
| 事件 | 描述 |
change | 通用变更事件，当修改计数器增加时触发 |
error | 通用错误事件，当错误发生时触发 |
2. Map事件(MapBrowserEvent)
MapBrowserEvent是MapEvent的子类，具有大量的事件和属性。包括地图加载、缩放和平移等操作。具有coordinate、dragging、map等属性，扩展了click、dbclick、loadstart、loadend等事件类型。
MapBrowserEvent(ol.MapBrowserEvent) | |
|---|---|
| 属性 | 描述 |
coordinate{Coordinate} | 与原始浏览器事件对应的坐标。如果设置了，这将出现在用户投影中。否则，它将出现在视图投影中。 |
dragging{boolean} | 表明当前地图是否正在拖动。仅为POINTERDRAG and POINTERMOVE事件设置，默认为false。 |
frameState(FrameState) | 当前渲染帧状态 |
map{Map} | 当前事件发生时的地图对象 |
originalEvent | 原始浏览器事件 |
pixel{Pixel} | 相对于与原始事件对应的视口的地图像素。 |
target{Object} | 事件目标 |
type{String} | 事件类型 |
| 方法 | 描述 |
preventDefault | 阻止默认事件 |
stopPropagation | 阻止事件冒泡传递 |
| 事件 | 描述 |
click | 单击事件 |
singleclick | 真正的单击事件 |
dbclick | 双击事件 |
loadstart | 当开始加载其他地图数据（切片、影像、要素）时触发 |
loadend | 当加载其他地图数据完成时触发 |
movestart | 当开始移动地图时触发 |
moveend | 当结束地图移动时触发 |
pointerdrag | 当指针拖动时触发 |
pointermove | 当指针移动时触发。触摸设备上，在地图平移时触发 |
postrender | 在渲染地图帧后触发 |
change | 通用变更事件，当修改计数器增加时触发 |
error | 通用错误事件，当错误发生时触发 |
3. 渲染事件
ol.event.RenderEvent渲染事件类，控制图层加载、渲染以及错误处理。具有context、frameState、inversPixelTransform等属性，扩展了precompose、postcompose、postrender等事件类型。
RenderEvent(ol.RenderEvent) | |
|---|---|
| 属性 | 描述 |
context{CanvasRenderingContext2d、WebGLRenderingContext、undefined} | canvas画布上下文对象。当事件由地图(map)触发时不可用，对于Canvas 2D图层，context将是2D渲染上下文；对于WebGL图层，context将是WebGL上下文 |
frameState{FrameState} | 当前渲染帧状态 |
inversPixelTransform | 从CSS像素（相对于地图视口的左上角）转换为此事件上下文中的渲染像素。仅在使用Canvas渲染器时可用，否则为null。 |
target{Object} | 事件目标 |
type{String} | 事件类型 |
| 方法 | 描述 |
preventDefault | 阻止默认事件 |
stopPropagation | 阻止事件冒泡传递 |
| 事件 | 描述 |
precompose | 在组成图层之前触发。当由map触发时，事件对象将不包含context；当由图层触发时，事件对象包含context；目前只有WebGL图层分派此事件。 |
precompose | 在组成图层之后触发。当由map触发时，事件对象将不包含context；当由图层触发时，事件对象包含context；目前只有WebGL图层分派此事件。 |
prerender | 在图层渲染之前触发 |
postrender | 在图层渲染之后触发 |
rendercomplete | 在图层渲染完成时触发。即所有数据源和切片在当前视口都已完成加载，并且所有切片都已淡入淡出，此时事件对象不包含context |
change | 通用变更事件，当修改计数器增加时触发 |
error | 通用错误事件，当错误发生时触发 |
**layer**触发包含**context**
TDTImgLayer.on("prerender", function (event) {
console.log("prerenderEventObject:", event)
})
TDTImgLayer.on("postrender", function (event) {
console.log("postrenderEventObject:", event)
})
**map**触发不含**context**
map.on("precompose", function (event) {
console.log("precomposeEventObject:", event)
})
map.on("postcompose", function (event) {
console.log("postcomposeEventObject:", event)
})
map.on("rendercomplete", function (event) {
console.log("rendercompleteEventObject:", event)
})
4. 数据源事件
4.1. VectorSourceEvent
VectorSourceEvent具有feature和features等属性，包含addfeature、changefeature、clear、featureloadstart等事件类型。
VectorSourceEvent(ol.VectorSourceEvent) | |
|---|---|
| 属性 | 描述 |
feature{FeatureClass} | 在ADDFEATURE and REMOVEFEATURE事件添加或移除要素时才存在，否则为undefined |
features{Array<FeatureClass>} | 在FEATURESLOADED事件加载要素时才存在，否则为undefined |
target{Object} | 事件目标 |
type{String} | 事件类型 |
| 方法 | 描述 |
preventDefault | 阻止默认事件 |
stopPropagation | 阻止事件冒泡传递 |
| 事件 | 描述 |
addfeature | 当要素添加到数据源时触发 |
removefeature | 当要素从数据源移除时触发 |
changefeature | 当要素更新时触发 |
featuresloadstart | 当要素开始加载时触发 |
featuresloadend | 当要素加载结束时触发 |
featuresloaderror | 当要素加载出错时触发 |
clear | 当数据源调用此方法时触发 |
change | 通用变更事件，当修改计数器增加时触发 |
error | 通用错误事件，当错误发生时触发 |
4.2. TileSourceEvent
TileSourceEvent扩展了tile属性，包含tileloadstart、tileloadend、tileloaderror等事件类型。
TileSourceEvent(ol.TileSourceEvent) | |
|---|---|
| 属性 | 描述 |
tile{Tile} | 与事件相关的且切片 |
target{Object} | 事件目标 |
type{String} | 事件类型 |
| 方法 | 描述 |
preventDefault | 阻止默认事件 |
stopPropagation | 阻止事件冒泡传递 |
| 事件 | 描述 |
tileloadstart | 当切片开始加载时触发 |
tileloadend | 当切片加载结束时触发 |
tileloaderror | 当切片加载出错时触发 |
change | 通用变更事件，当修改计数器增加时触发 |
error | 通用错误事件，当错误发生时触发 |
4.3. RasterSourceEvent
RasterSourceEvent扩展了data、extent等属性，包含beforeoperations、afteroperations等事件类型。
RasterSourceEvent(ol.RasterSourceEvent) | |
|---|---|
| 属性 | 描述 |
data{Object} | 可用于所有操作的对象，还可用来做存储对象 |
extent{Extent} | 栅格图层范围 |
resolution{Number} | 分辨率（每像素地图单位） |
target{Object} | 事件目标 |
type{String} | 事件类型 |
| 方法 | 描述 |
preventDefault | 阻止默认事件 |
stopPropagation | 阻止事件冒泡传递 |
| 事件 | 描述 |
beforeoperations | 在运行操作之前触发。监听器将收到一个具有数据属性的事件对象，该属性可用于使数据可用于操作。 |
afteroperations | 在操作运行后触发。监听器将收到一个具有数据属性的事件对象。如果使用多线程，数据将是一个对象数组。如果使用单线程，数据将是单个对象。 |
change | 通用变更事件，当修改计数器增加时触发 |
error | 通用错误事件，当错误发生时触发 |
4.4. ImageSourceEvent
ImageSourceEvent扩展了image等属性，包含imageloadstart、imageloadend、imageloaderror等事件类型。
ImageSourceEvent(ol.ImageSourceEvent) | |
|---|---|
| 属性 | 描述 |
image{ImageWrapper} | 影像相关事件 |
target{Object} | 事件目标 |
type{String} | 事件类型 |
| 方法 | 描述 |
preventDefault | 阻止默认事件 |
stopPropagation | 阻止事件冒泡传递 |
| 事件 | 描述 |
imageloadstart | 当影像开始加载时触发 |
imageloadend | 当影像加载结束时触发 |
imageloaderror | 当影像加载出错时触发 |
change | 通用变更事件，当修改计数器增加时触发 |
error | 通用错误事件，当错误发生时触发 |
❝
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
❝
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !
