map.on ( 'SingleClick', функция (ЭВТ) {});регистрируется много раз, когда вызывается один клик

Question

Я вызываю эту функцию в первый раз и одним щелчком мыши, она работает нормально, но если я вызываю ту же карту функций одним щелчком, то она регистрируется несколько раз (я проверил с помощью оповещения);

var flagforClick = false;
function getData() {
    if (flagforClick == false) {
        flagforClick = true;
    }
    else {
        flagforClick = true;
    }
    map.on('singleclick', function (evt) {
        alert("called");
        if (flagforClick == true) {
            document.getElementById("tab_content").innerHTML = "";
            document.getElementById("dataGrid_tab").innerHTML = "";
            totalLayerDataSelectionSelection = [];
            totalheaderSelectionSelection = [];
            var headerdataSelection = [];
            var infodataSelection = [];
            layerSelectionforList = [];
        }
    });
}

Answer 1

Вы можете вызывать функцию getData() внутри события singleclick, когда имеется особенность на нажатом пикселе. Надеюсь, этот образец поможет вам.

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    view: new ol.View({
        projection: 'EPSG:4326',
        center: [49, 40],
        zoom: 8
    })
});

var layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: new ol.geom.Point([49, 40]),
            id: 1,
            name: 'My Point',
            day: (new Date()).getDay(),
            month: (new Date()).getMonth(),
            year: (new Date()).getYear()

        })]
    }),
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 15,
            fill: null,
            stroke: new ol.style.Stroke({ color: 'red', width: 1 })
        })
    })
});
map.addLayer(layer);

map.on('singleclick', function (event) {
    // getData(event.coordinate);

    map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
        getData(feature.getProperties());
        // getData(layer.getProperties());
    }, {
            hitTolerance: 5
    });
});

function getData(data) {
    console.log(data);
    console.log(data.id);
}

Answer 2

Вы можете установить свою функцию в переменную и добавить ее на карту, только если вы еще этого не сделали.

let clickHandler;
let flagforClick = false;
function getData() {
  if (flagforClick == false) {
    flagforClick = true;
  } else {

    flagforClick = true;
  }

  // only add the handler if it's undefined
  if (!clickhandler) {
    clickhandler = function(evt) {

      alert('called');
      if (flagforClick == true) {


        document.getElementById('tab_content').innerHTML = '';
        document.getElementById('dataGrid_tab').innerHTML = '';
        totalLayerDataSelectionSelection = [];
        totalheaderSelectionSelection = [];
        let headerdataSelection = [];
        let infodataSelection = [];
        layerSelectionforList = [];
      }
    };
    map.on('singleclick', clickHandler)
  }
}

Еще одна приятная вещь - теперь это легко удалить. Просто позвоните

map.un('singleclick', clickHandler)