OpenLayers学习笔记中级篇（五、地图事件）
事件让很多业务的东西串联在一起，在前端中起着非常重要的作用，比如鼠标点击，移动事件。但其应用远不仅如此，现实生活中就存在很多大大小小的事件。 在OpenLayers 3中，同样存在非常多的事件，比如鼠标左键单击，双击等等。 同时还有一些用于各个模块之间进行协作使用的事件，比如ol.Map的postrender和propertychange事件。 通过这些事件，OpenLayers 3的功能模块协作一致，同样地，也可以让我们自己二次开发的功能模块运作起来。 同时，根据需要，我们还可以在系统中新增自定义事件，使得我们的开发使用方式同OpenLayers 3更加的一致。在本章节将详细介绍OpenLayers 3中的各种事件，及相关应用。
首先我们先来一个简单的demo：
1、用鼠标点击下面这个地图，将弹出一个对话框，显示点击位置的经纬度：
点击显示经纬度
运行一下看一下效果：
我们在点击地图的时候会弹出我们当前点击位置的经纬度！代码很简单，但需要注意的是，任意的事件应用，必然会有三个步骤：
- 找准事件发送者，比如上面这个例子，
map就是事件发送者。 如何找到它呢？ 一般都是要交互的对象。 - 找准事件名称，比如上面例子中的
singleclick，切忌不要随便想象，或者按照惯例来写名称，初次使用，请一定参照API文档，不然后果自负。 - 编写事件响应函数，在OpenLayers中，事件发送者都会有一个名字为
on的函数，调用这个函数，就能监听指定的事件，响应函数listener具有一个参数event，这个event类就对应于API文档中事件名称后边括号里的类。
这三个步骤缺一不可，如果使用过jquery监听事件，应该对此比较熟悉。 除此之外，关于OpenLayers 3中的事件应用，还有下面两点需要说明：
- 几乎OpenLayers 3中所有的类，都能监听事件和触发事件，因为它们都继承于类
ol.Observable，这个类甚至是ol.Object的父类。 如此可见，OpenLayers在整个引擎中，是多么的依赖于事件通信。 - 而OpenLayers 3的整个事件机制，又是基于Google的
Closure Library。所以如果你对这个库熟悉，那么对OpenLayers 3提供的事件机制会比较熟悉。
2、注销事件，上一节我们做了一个点击地图弹出经纬度的功能， 但如果之后又不需要再响应该事件了，要怎么办。 比如有一个引导用户使用的需求，用户第一次点击地图的时候，需要弹出一个使用说明，之后点击地图就不用再弹出这个使用说明了。 那我们有哪些方式可以做到这一点呢？那么在我们不需要这个功能的时候如何注销它呢？现在我们来做这个demo：
注销地图点击事件
大家可以自己运行一下看一下效果！大家可以看到在点击完弹窗后再点击地图时就没有监听事件了！
3、我们现在再来写一下常用的监听事件：
我们常用的监听事件包括如下几个方面：
地图鼠标左键单击事件
对应的类为ol.Map，事件名为singleclick。
地图鼠标左键双击事件
对应的类为ol.Map，事件名为dblclick。
地图鼠标点击事件
对应的类为ol.Map，事件名为click。
地图鼠标移动事件
对应的类为ol.Map，事件名为pointermove。
地图鼠标拖拽事件
对应的类为ol.Map，事件名为pointerdrag。
地图移动事件
对应的类为ol.Map，事件名为moveend。
好了，话不多说，直接上代码：
各种地图事件的监听
触发事件提示信息
然后看一下效果：
我们在对地图做各种动作时，都可以被监听到然后输出出来！
4、最后我们再自定义一个地图事件并且应用，我们接下来就尝试为ol.Feature添加一个mouseover的事件，通过这个事件，就可以实现在鼠标移到Feature上时，改变它的样式。直接上代码：
点击显示经纬度
看一下效果：
鼠标移动前：
鼠标移动后：
我们实现了这个功能！关键代码在于这：
// 为地图注册鼠标移动事件的监听
map.on('pointermove', function(event){
map.forEachFeatureAtPixel(event.pixel, function(feature){
// 为移动到的feature发送自定义的mousemove消息
feature.dispatchEvent({type: 'mousemove', event: event});
});
});dispatchEvent的参数具有type和event属性，必须这样构造吗？在回答这个问题之前，需要先看一下API文档，发现参数类型为goog.events.EventLike，说明它其实用的是google的closure库来实现的，通过closure库的源码我们知道，派发的事件如果是一个对象，那么必须包含type属性，用于表示事件类型。其他的属性可以自由定义，比如此处定义了event属性，并设置对应的值，为的是让鼠标事件传递给feature1的监听函数。
dispatchEvent的参数会被原封不动的传递给事件响应函数，对应代码
feature1.on('mousemove', function(event){里function的参数event，可以通过调试窗口看到此处的event和dispatchEvent的参数是一样的。注意事件名称是可以自定义的，只要派发和监听使用的事件名称是一致的就可以。
我们就完成了自定义事件的三件事：定义事件类型，派发事件，监听事件。
使用自定义事件会带来下面几个好处：
上面这个例子鼠标移到红色圆后变绿色，但是移出圆后，还是绿色，能不能再移出圆的时候再变成红色呢？ 试试用自定义事件的方式再改进一下，实现mousein和mouseout两种事件。这个大家可以自己查阅API然后尝试做一下！
- 灵活控制，对比一下官网例子和这个例子，就能看出一二。
- 能更好地满足业务需要，适当地进行扩展。
- 采用更统一的事件处理框架。
关于事件的介绍就先到这儿了，下一节我们会学习地图的交互！大家加油!