常用事件

几乎OpenLayers主要的类都会派发相关的事件，虽然事件很多，但日常使用的事件大致分为下面几类。

常用鼠标事件

地图鼠标左键单击事件

对应的类为ol.Map，事件名为singleclick。

地图鼠标左键双击事件

对应的类为ol.Map，事件名为dblclick。

地图鼠标点击事件

对应的类为ol.Map，事件名为click。

地图鼠标移动事件

对应的类为ol.Map，事件名为pointermove。

地图鼠标拖拽事件

对应的类为ol.Map，事件名为pointerdrag。

地图移动事件

对应的类为ol.Map，事件名为moveend。

可以通过下面这个地图来尝试一下鼠标事件：

注意在singleclick和dblclick响应之前，都会触发click事件，在选择事件时，需要谨慎考虑。 同时发现moveend事件在地图缩放的时候，也会触发。 代码如下：

<div id="info" style="background-color: #999;">触发事件提示信息</div>
<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
        })
    });

    // 响应单击事件
    map.on('singleclick', function(event){
        document.getElementById('info').innerHTML = '触发了ol.Map的单击事件：singleclick';
    });

    // 响应双击事件
    map.on('dblclick', function(event){
        document.getElementById('info').innerHTML = '触发了ol.Map的双击事件：dblclick';
    });

    // 响应点击事件
    map.on('click', function(event){
        document.getElementById('info').innerHTML = '触发了ol.Map的点击事件：click';
    });

    // 响应鼠标移动事件，事件太频繁，故注释掉了，可自行验证该事件
    // map.on('pointermove', function(event){
    //     document.getElementById('info').innerHTML = '触发了ol.Map的鼠标移动事件：pointermove';
    // });

    // 响应拖拽事件
    map.on('pointerdrag', function(event){
        document.getElementById('info').innerHTML = '触发了ol.Map的拖拽事件：pointerdrag';
    });

    // 地图移动事件
    map.on('moveend', function(event){
        document.getElementById('info').innerHTML = '触发了ol.Map的地图移动事件：moveend';
    });

</script>

非直接交互事件

地图缩放事件

对应的类为ol.View，事件名为 change:resolution，为什么？ 因为分辨率改变了，自然层级就变化了。

地图中心改变事件

对应的类是ol.View，事件名为 change:center。

下面这个地图，可以让你感受一下这两个事件：

改变事件

OpenLayers 3的大多数类都拥有一些改变事件，这些事件常用于模块之间联动使用，在二次开发的业务需求中，也会经常需要，所以希望能引起重视，具体的事件可以参照API官网文档的说明。 比如上面的例子其实就是应用的这类事件。