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

使用 mapbox gl 双击事件

Double on click event with mapbox gl

mapbox

mapbox-gl

mapbox-gl-js