OpenLayers 3 之 事件体系详解

地图上的各种事件触发到底是怎么回事？熟悉前端的肯定知道 javascript 的事件机制，openlayers 既然是 javascript 实现的，那么它就也不例外，也遵循 W3C 的标准，只不过是 openlayers 进行的简化实现。

文章首先讲解 openlayers 的事件结构实现，然后结合“切片WMS数据源”（ol.source.TileWMS）对象的事件机制进行实例分析。

一. 介绍

事件机制的设计模式是观察者模式（对象间的一对多的依赖关系，当对象的状态发生改变时，依赖它的对象都将得到通知并被自动更新）。对象（也就是包含事件的类）并不创建事件对象实例，它们往往注册某些类型的事件及其监听函数（事件对象作为其第一个参数），在某种类型的事件被分发（dispatch）时，所有监听该类型事件的函数都会触发并执行。所有的事件事件对象实例都有一个 target 属性，对应于触发事件的对象（一般是 dom 元素），监听器的内部 this 默认指向 target，可以通过绑定时候配置。有一些自定义的事件类型，可能有额外的属性。

openlayers 中实现注册和解除监听函数功能的类是 ol.Observable，因此任何继承于 ol.Observable 的类的对象实例都具有注册或者解除注册监听器的能力，并且可以分发事件。

二. openlayers 事件机制结构

Openlayers 的事件类型有地图点击事件、拖拽事件等，但它们都是基于基本的浏览器通用事件，就像 javascript 中使用的一样，OL3 中具体的事件体系结构规定如下图：

• event.js，定义了 openlayers 的事件基类，所有事件有关的类都继承这个类；
• mapevent.js，地图事件的基类，地图的各种事件类型都会继承这个类；

• mapbrowserevent.js，地图浏览器事件；

• events

  • event.js，openlayers对于 W3C DOM 2级 Event 接口的精简实现，事件对象中只包含 target type 属性，和 stopPropagation preventDefault方法；
  • eventtarget.js，openlayers对于 W3C DOM 2级 EventTarget 接口的精简实现，实现中没有捕获模型，没有实现‘事件目标层次结构’，当监听器调用stopProgation 或者 preventDefault时，效果是其他的监听器不会再被调用，和监听器返回 false 一个效果；
  • condition.js，包含了判定满足某种条件的鼠标和键盘事件的函数集合。

• pointer

  • pointerevent.js，鼠标指针事件的基类；
  • pointereventhandler.js，包含注册、解除注册、触发等一系列与事件有关的工具类；
  • eventsource.js，事件的来源；
    
    • mousesource.js，来自鼠标的事件；
    • mssource.js，来自IE 的事件；
    • nativesource.js，来自本地的事件；
    • touchsource.js，触控设备的触摸事件。

以上的解释过于“书面”，其实events 目录中定义的是 W3C 关于浏览器事件规范的精简实现，event.js 定义的就是事件对象，也就是触发事件时返回的事件对象，包含 target 属性，指向绑定的DOM元素；eventtarget.js 定义的是事件目标对象，也就是被注册事件的DOM对象，包含添加和移除特定类型监听函数的能力和分发事件的能力，注册的监听函数维护在 ‘listeners’ 数组中。

三. ol.Observable

ol.Observable提供了从事件目标注册和移