一个简单的事件应用

在深入分析和理解之前，我们还是以简单的一个例子入手，来学习一下如何使用OpenLayers 3中的事件来做一个简单的事，从而熟悉整个流程。 用鼠标点击下面这个地图，将弹出一个对话框，显示点击位置的经纬度：

代码如下：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
    var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 监听singleclick事件
    map.on('singleclick', function(event){
        // 通过getEventCoordinate方法获取地理位置，再转换为wgs84坐标，并弹出对话框显示
        alert(ol.proj.transform(map.getEventCoordinate(event), 'EPSG:3857', 'EPSG:4326'));
    })
</script>

代码很简单，但需要注意的是，任意的事件应用，必然会有三个步骤：

• 找准事件发送者，比如上面这个例子，map就是事件发送者。 如何找到它呢？ 一般都是要交互的对象。
• 找准事件名称，比如上面例子中的singleclick，切忌不要随便想象，或者按照惯例来写名称，初次使用，请一定参照API文档，不然后果自负。 如何参看一个类有什么事件？ 请参见看懂API。
• 编写事件响应函数，在OpenLayers中，事件发送者都会有一个名字为on的函数，调用这个函数，就能监听指定的事件，响应函数listener具有一个参数event，这个event类就对应于API文档中事件名称后边括号里的类。

这三个步骤缺一不可，如果使用过jquery监听事件，应该对此比较熟悉。 除此之外，关于OpenLayers 3中的事件应用，还有下面两点需要说明：

• 几乎OpenLayers 3中所有的类，都能监听事件和触发事件，因为它们都继承于类ol.Observable，这个类甚至是ol.Object的父类。 如此可见，OpenLayers在整个引擎中，是多么的依赖于事件通信。
• 而OpenLayers 3的整个事件机制，又是基于Google的Closure Library。所以如果你对这个库熟悉，那么对OpenLayers 3提供的事件机制会比较熟悉。

如果仅限于直接使用OpenLayers 3中的事件，就没有必要深入源码去探个究竟，只要遵照约定对事件进行应用就好。