1

I would like to delete my feature in OpenLayers by the "del" button. I found some solutionss here:

How to delete a feature in Openlayers 3.8.2 with `del` Key

and combined it with the hint here:

    var deleteFeature = function(evt){
    if(evt.keyCode == 46){
    vectorLayer.getSource().clear();
    if (selectInteraction) {
    selectInteraction.getFeatures().clear();
    }
   }
   };
   document.addEventListener('keydown', deleteFeature, false);

but I just want to delete only the selected feature by the "del" button. Instead of it all are gone.

I tried to put instead:

 var deleteFeature = function(evt){
  if(evt.keyCode == 46){
  vectorLayer.getSource().removeFeature(SelectedFeature);
  }
  };
 document.addEventListener('keydown', deleteFeature, false);

but it looks like the removeFeature(SelectedFeature); doesn't work here

I tried also this solution:

https://github.com/openlayers/openlayers/issues/4214

but it didn't work either.

My full JS fiddle is here:

https://jsfiddle.net/z08kfcg7/

which includes pure .js only

How can I delete only one feature selected instead of all of them?

UPDATE:

I tried also:

 var selectInteraction = new ol.interaction.Select({
  condition: ol.events.condition.click,
  wrapX: false
  })

var deleteFeature = function(evt){
 if(evt.keyCode == 46){
  selectInteraction.getFeatures().clear();
 }
};
document.addEventListener('keydown', deleteFeature, false);

enter image description here

Nothing happens, just the feature previously selected is unselected now.

UPDATE:

function removeSelectedFeature() {
 var features = selectInteraction.getFeatures();
   if (features != null && features.length > 0) {
       for (x in features) {
         var properties = features[x].getProperties();
         console.log(properties);
         var id = properties.id;
         if (id == selectedFeatureID) {
          selectInteraction.removeFeature(features[x]);
            break;
         }
       }
     }
   }



 var deleteFeature = function(evt){
  if(evt.keyCode == 46){
    removeSelectedFeature();
   };
 
  };
   document.addEventListener('keydown', deleteFeature, false);

this one doesn't work either.

Remove selected feature Openlayers 3

UPDATE III

   var deleteFeature = function(evt){
   if(evt.keyCode == 46){
  
  
  vectorLayer.getSource().removeFeature(selectInteraction.getFeatures());
 };

  };
   document.addEventListener('keydown', deleteFeature, false);

This piece of code throws an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') at e.removeFeatureInternal (Vector.js:906) at e.removeFeature (Vector.js:896) at HTMLDocument.deleteFeature (qgis2web.js:913)

8
  • What exactly is "selected feature"? How do you identify it? Please edit your question with additional info.
    – TomazicM
    Oct 4 '21 at 14:08
  • If, for instance, I have 4 features in different geometry. I select one of them, it becomes highlighted, and then I can hit the "del" button and delete it.
    – MKR
    Oct 4 '21 at 14:09
  • How do you highlight the feature? At the time of highlight you could set some global var selectedFeature to that feature and then use vectorLayer.getSource().removeFeature(selectedFeature); to delete it at the time of key press.
    – TomazicM
    Oct 4 '21 at 14:15
  • how this global var could look like then?
    – MKR
    Oct 4 '21 at 14:22
  • Please edit your question and add the relevant part of the code where you highlight the feature.
    – TomazicM
    Oct 4 '21 at 14:26
1

With your last try (update III) you were almost there. Select interaction .getFeatures() method returns a collection of elements (see https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-Select.html#getFeatures), so you have to either loop through it's members or refer to the only element. Reference is done with the .item method.

So your code could then look something like this:

var deleteFeature = function(evt){
  if(evt.keyCode == 46) {
    var selectCollection = selectInteraction.getFeatures();
    if (selectCollection.getLength() > 0) {
      vectorLayer.getSource().removeFeature(selectCollection.item(0));
    }
  };
};
document.addEventListener('keydown', deleteFeature, false);
1
  • Yeah! That was EXACTLY I was looking for. Many thanks. It looks like I haven't defined the additional variable. Lesson learned.
    – MKR
    Oct 5 '21 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.