注销事件响应

上一节的示例仅仅演示了如何监听一个事件,并响应处理。 但如果之后又不需要再响应该事件了,要怎么办。 比如有一个引导用户使用的需求,用户第一次点击地图的时候,需要弹出一个使用说明,之后点击地图就不用再弹出这个使用说明了。 那我们有哪些方式可以做到这一点呢? 尝试点击一下下面这个地图,之后再点击一次试试:

第二次点击地图后,是否就不会再弹出提示信息了? 其实代码很简单:

<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
        })
    });

    var key = map.on('singleclick', function(event){
        alert('大家好,我是淡叔,这是一个演示如何取消事件监听的应用,之后再点击地图时,你将不会再看到这个说明。');
        // 下面这行代码就是取消事件监听
        map.unByKey(key);
    })
</script>

除了上面这个方式可以注销事件监听之外,还可以用下面这样的方式:

<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
        })
    });

    // 创建事件监听器
    var singleclickListener = function(event){
        alert('大家好,我是淡叔,这是一个演示如何取消事件监听的应用,之后再点击地图时,你将不会再看到这个说明。');
        // 在响应一次后,注销掉该监听器
        map.un('singleclick', singleclickListener);
    };
    map.on('singleclick', singleclickListener);
</script>

针对这个应用,还可以按照下面这样来实现:

<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
        })
    });

    // 使用once函数,只会响应一次事件,之后自动注销事件监听
    map.once('singleclick', function(event){
        alert('大家好,我是淡叔,这是一个演示如何取消事件监听的应用,之后再点击地图时,你将不会再看到这个说明。');
    })
</script>

到此,OpenLayers 3的事件应用基本介绍完毕,后续将介绍OpenLayers 3常用事件。