^ 关注我，带你一起学GIS ^
注：当前使用的是 ol [9.2.4] 版本，天地图使用的key请到天地图官网申请，并替换为自己的key
地图事件贯穿于WebGIS开发的始终，用于实现地图与用户的交互操作。地图缩放、移动使用MapEvent事件；图层渲染、状态使用RenderEvent事件；要素绘制、选择使用DrawEvent、SelectEvent事件。
1. OpenLayers事件结构图
OpenLayers框架事件类型众多，我根据事件类型将其划分为地图事件、渲染事件、数据源事件、控制事件、集合事件、对象事件和定位事件，如下图所示。其中常用的事件包括地图事件，渲染事件和数据源事件以及控制事件。所有的事件都继承于Event类，具有target和type属性，以及preventDefault和stopPropagation方法，还包括change和error两个基本事件类型。
| |
属性 | 描述 |
| 事件目标 |
| 事件类型 |
方法 | 描述 |
| 阻止默认事件 |
| 阻止事件冒泡传递 |
事件 | 描述 |
| 通用变更事件，当修改计数器增加时触发 |
| 通用错误事件，当错误发生时触发 |
2. Map事件(MapBrowserEvent)
MapBrowserEvent是MapEvent的子类，具有大量的事件和属性。包括地图加载、缩放和平移等操作。具有coordinate、dragging、map等属性，扩展了click、dbclick、loadstart、loadend等事件类型。
| |
属性 | 描述 |
| 与原始浏览器事件对应的坐标。如果设置了，这将出现在用户投影中。否则，它将出现在视图投影中。 |
| 表明当前地图是否正在拖动。仅为 |
| 当前渲染帧状态 |
| 当前事件发生时的地图对象 |
| 原始浏览器事件 |
| 相对于与原始事件对应的视口的地图像素。 |
| 事件目标 |
| 事件类型 |
方法 | 描述 |
| 阻止默认事件 |
| 阻止事件冒泡传递 |
事件 | 描述 |
| 单击事件 |
| 真正的单击事件 |
| 双击事件 |
| 当开始加载其他地图数据（切片、影像、要素）时触发 |
| 当加载其他地图数据完成时触发 |
| 当开始移动地图时触发 |
| 当结束地图移动时触发 |
| 当指针拖动时触发 |
| 当指针移动时触发。触摸设备上，在地图平移时触发 |
| 在渲染地图帧后触发 |
| 通用变更事件，当修改计数器增加时触发 |
| 通用错误事件，当错误发生时触发 |
3. 渲染事件
ol.event.RenderEvent渲染事件类，控制图层加载、渲染以及错误处理。具有context、frameState、inversPixelTransform等属性，扩展了precompose、postcompose、postrender等事件类型。
| |
属性 | 描述 |
|
|
| 当前渲染帧状态 |
| 从 |
| 事件目标 |
| 事件类型 |
方法 | 描述 |
| 阻止默认事件 |
| 阻止事件冒泡传递 |
事件 | 描述 |
| 在组成图层之前触发。当由 |
| 在组成图层之后触发。当由 |
| 在图层渲染之前触发 |
| 在图层渲染之后触发 |
| 在图层渲染完成时触发。即所有数据源和切片在当前视口都已完成加载，并且所有切片都已淡入淡出，此时事件对象不包含 |
| 通用变更事件，当修改计数器增加时触发 |
| 通用错误事件，当错误发生时触发 |
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等事件类型。
| |
属性 | 描述 |
| 在 |
| 在 |
| 事件目标 |
| 事件类型 |
方法 | 描述 |
| 阻止默认事件 |
| 阻止事件冒泡传递 |
事件 | 描述 |
| 当要素添加到数据源时触发 |
| 当要素从数据源移除时触发 |
| 当要素更新时触发 |
| 当要素开始加载时触发 |
| 当要素加载结束时触发 |
| 当要素加载出错时触发 |
| 当数据源调用此方法时触发 |
| 通用变更事件，当修改计数器增加时触发 |
| 通用错误事件，当错误发生时触发 |
4.2. TileSourceEvent
TileSourceEvent扩展了tile属性，包含tileloadstart、tileloadend、tileloaderror等事件类型。
| |
属性 | 描述 |
| 与事件相关的且切片 |
| 事件目标 |
| 事件类型 |
方法 | 描述 |
| 阻止默认事件 |
| 阻止事件冒泡传递 |
事件 | 描述 |
| 当切片开始加载时触发 |
| 当切片加载结束时触发 |
| 当切片加载出错时触发 |
| 通用变更事件，当修改计数器增加时触发 |
| 通用错误事件，当错误发生时触发 |
4.3. RasterSourceEvent
RasterSourceEvent扩展了data、extent等属性，包含beforeoperations、afteroperations等事件类型。
| |
属性 | 描述 |
| 可用于所有操作的对象，还可用来做存储对象 |
| 栅格图层范围 |
| 分辨率（每像素地图单位） |
| 事件目标 |
| 事件类型 |
方法 | 描述 |
| 阻止默认事件 |
| 阻止事件冒泡传递 |
事件 | 描述 |
| 在运行操作之前触发。监听器将收到一个具有数据属性的事件对象，该属性可用于使数据可用于操作。 |
| 在操作运行后触发。监听器将收到一个具有数据属性的事件对象。如果使用多线程，数据将是一个对象数组。如果使用单线程，数据将是单个对象。 |
| 通用变更事件，当修改计数器增加时触发 |
| 通用错误事件，当错误发生时触发 |
4.4. ImageSourceEvent
ImageSourceEvent扩展了image等属性，包含imageloadstart、imageloadend、imageloaderror等事件类型。
| |
属性 | 描述 |
| 影像相关事件 |
| 事件目标 |
| 事件类型 |
方法 | 描述 |
| 阻止默认事件 |
| 阻止事件冒泡传递 |
事件 | 描述 |
| 当影像开始加载时触发 |
| 当影像加载结束时触发 |
| 当影像加载出错时触发 |
| 通用变更事件，当修改计数器增加时触发 |
| 通用错误事件，当错误发生时触发 |
❝
OpenLayers示例数据下载，请在公众号后台回复：ol数据
全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试
❝
GIS之路公众号已经接入了智能助手，欢迎大家前来提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏+关注 哦！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 
