使用 mapbox gl 双击单击事件

Question

我在 style.load 事件上重绘图层并删除图层

        map.on('style.load', function() {
           loadByBounds(tempBounds)              
        });

        function loadByBounds(b) {
          if (map.getLayer("cluster-count")) {
            map.removeLayer("cluster-count");
          }
          ...
          map.on('click', 'unclustered-point', function(e) {

            var popup = new mapboxgl.Popup()
              .setLngLat(e.features[0].geometry.coordinates)
              .setHTML(text)
              .addTo(map);
          })}

但是如何删除 map.on('click') 事件？当我单击该点时， Popup() 显示 2 次。当我再次更改图层时，onclick 事件会触发 3 次，依此类推。所以我想我必须删除点击事件但是如何？谢谢

Answer 1

您可能想要使用map.once(). 这将添加一个仅对指定事件类型调用一次的侦听器。但是，在 1 个点击事件被触发后，此事件侦听器将不再侦听任何进一步的点击事件。

https://www.mapbox.com/mapbox-gl-js/api/#evented#once

与map.off()它基本上相反，map.on()您可以使用它来取消注册任何应用的事件侦听器。但是，您需要添加没有匿名函数的事件侦听器才能使用map.off().

https://www.mapbox.com/mapbox-gl-js/api/#map#off

// you would need to use a named function
  function clickHandler(e) {
    // handle click
  }

  map.on('click', clickHandler);
// then you can use 
  map.off('click', clickHandler);
  
// With an anonymous function you won't be able to use map.off
  map.on('click', (e) => {
    // handle click
  });

为了防止您的应用程序注册多个侦听器，您可能需要设置一个标志，该标志在应用第一个事件侦听器后设置。

let notListening = true;

function loadByBounds(b) {
  // ....
  if (notListening) {
    notListening = false;
    map.on('click', (e) => { 
      // do something 
    });
  }
}