如何在 OpenLayers 3 中删除监听器答案

【问题标题】：How to delete a listener in OpenLayers 3如何在 OpenLayers 3 中删除监听器
【发布时间】：2016-01-26 13:41:16
【问题描述】：

我在 stackoverflow 上对我的问题提出了copy，因为在 gis.stackexchange 我所有的问题都没有引起任何注意 - 很多时候我无法在那里得到简单问题的答案。所以，我现在的问题是如何删除这样定义的监听器：

map.getViewport().addEventListener('click', function (e){
   console.log("clicked");      
});

【问题讨论】：

如果你使用 getViewport() 它将返回一个与 openlayers 无关的 HTMLElement。见developer.mozilla.org/en-US/docs/Web/API/HTMLElement
openlayers 监听器的添加和删除在 openlayers.org/en/master/apidoc/ol.Object.html 中描述，顺便说一句。
如果您想在地图上注册一次点击，比如说，知道点击的坐标，那么您绝对应该使用 ol3 原生地图浏览器事件，因为事件对象将包含该信息。跨度>
@Alexandre Dubé。谢谢！现在我正在使用map.on
你能回去接受@Alexandre Dubé 的回答吗，因为它似乎是最有帮助的。

标签： javascript openlayers-3

【解决方案1】：

OL3 会发出您可以使用的自己的事件类型，并且为了回答您的原始问题，提供了一种简单快捷的方法来取消注册。

看这个例子：http://openlayers.org/en/v3.13.0/examples/vector-layer.html

更具体地说，在这些行：

  map.on('pointermove', function(evt) {
    if (evt.dragging) {
      return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);
  });

  map.on('click', function(evt) {
    displayFeatureInfo(evt.pixel);
  });

ol.Map 对象有一个on 方法，可用于在 ol3 地图浏览器事件上注册事件侦听器。最好使用这些事件而不是标准浏览器事件。在此处查看所有地图浏览器事件的列表：http://openlayers.org/en/v3.13.0/apidoc/ol.MapBrowserEvent.html

要注销，您可以：

a) 使用un 方法，但请确保您提供相同的回调方法作为第二个参数。换句话说：

  var callback = function(evt) {
    displayFeatureInfo(evt.pixel);
  };
  map.on('click', callback);
  map.un('click', callback);

b) 另一种方法是使用我非常喜欢的ol.Observable.unByKey 方法。当调用on 或once 时，它会返回一个引用该事件的键。然后，您可以使用该键取消监听您的活动：

  var key = map.on('click', function(evt) {
    displayFeatureInfo(evt.pixel);
  });
  ol.Observable.unByKey(key);

我发现 b) 更友好，因为您可以注册一堆事件侦听器并将所有键放在一个数组中。当您想全部注销时，在数组中循环并调用 unByKey 方法，然后清空数组。与手动注销所有事件相比，它生成的代码更少。

【讨论】：

【解决方案2】：

删除首先要做的是声明一个附加到点击的外部函数然后用removeEventListener删除它

喜欢这个

function myFunction(event){
   //some stuff 
   console.log("clicked");   
}

map.getViewport().addEventListener('click',myFunction);

然后通过

删除

map.getViewport().removeEventListener('click',myFunction);

就是这样

这是一个sn-p

function myfunction(e) {
  alert("event click");
}


document.getElementById("mybtn").addEventListener("click",myfunction);



document.getElementById("mybtn2").addEventListener("click",function(e){
   document.getElementById("mybtn").removeEventListener("click",myfunction);
});

<button id="mybtn">btn</button><br/>
<button id="mybtn2" >remove btn click</button>

【讨论】：