I have read dozens of threads at stackoverflow, but none of them helps. So, this is what I try to do:

features.forEach(function(feature){
    source.removeFeature(feature); 
    console.log("removed");
    console.log(feature);
});

As a result, when I have only one feature selected, I see in the console these messages:

removed Controller.js:525:8
Object { disposed_: false, onDisposeCallbacks_: undefined, ...}

In terms of what I see in the console, everything looks good. But the problem is that the feature is not removed from the map.

EDIT

Now it is even more interesting. If I convert features to array with getArray and do this:

 for(var i=0,len=features.length;i<len;i++){
    var feature = features[i];
    source.removeFeature(feature);
 }
 source.clear();

when I have a lot of features and only one feature selected, then in this case only this selected feature remains and all the rest features are removed. What the heck is going on??

I have read dozens of threads at stackoverflow, but none of them helps. So, this is what I try to do:

features.forEach(function(feature){
    source.removeFeature(feature); 
    console.log("removed");
    console.log(feature);
});

As a result, when I have only one feature selected, I see in the console these messages:

removed Controller.js:525:8
Object { disposed_: false, onDisposeCallbacks_: undefined, ...}

In terms of what I see in the console, everything looks good. But the problem is that the feature is not removed from the map.

EDIT

Now it is even more interesting. If I convert features to array with getArray and do this:

 for(var i=0,len=features.length;i<len;i++){
    var feature = features[i];
    source.removeFeature(feature);
 }
 source.clear();

when I have a lot of features and only one feature selected, then in this case only this selected feature remains and all the rest features are removed. What the heck is going on??

• javascript
• openlayers-3

• can you provide all of your code or better make a fiddle to show us your case?? It propably has to do with the way you declare your source, features etc. The piece of code you provide is just the tree out of the forest. – pavlos Commented Jan 27, 2016 at 7:59
• source.clear() should remove all of your features automatically – MichaelG Commented Jan 27, 2016 at 12:37
• @pavlos. I think, I provided all the necessary pieces. In the first piece of code, features is a general Collection of features (just in terms of OpenLayers 3 API), source is a general vector source (I would not call it "source", if it meant something different). In the second piece of code I converted collection of features to an array with standard ol3 function getArray. So, I do not provide here anything non-standard, but just normal features and normal source - just as they are referred to in OpenLayers documentation. – Jacobian Commented Jan 27, 2016 at 17:01
• Converting feature collection to array causes to loose synch ability. Maybe this is your case. Try to stick with ol.Collection. Having selected feature after clearing point me that your source is not synched. Also try to remove the feature, getting fresh source of your vector layer --> vectorLayer.getSource().removeFeature(yourfeature) . You may also try to remove the fetures from select interaction --> select_interaction.getFeatures().clear(). As you see things are not so simple. Unless you provide a better image of your code I can only guess. – pavlos Commented Jan 27, 2016 at 21:23
• @pavlos. Thank you! I will check it today. – Jacobian Commented Jan 29, 2016 at 7:11

2 Answers 2

I had this issue for a long time and I could not figure it out. As it turns out, it seems to be a refresh issue in OpenLayers. The way I found to get the layer to refresh is to make it invisible and then visible again.

Here is the code I used to solve the problem (in AngularJS):

vectorLayer.getSource().removeFeature(feature);
$timeout(function() {
    vectorLayer.setVisible(false);
    vectorLayer.setVisible(true);
}, 10);

If you're not using Angular, just use the following:

vectorLayer.getSource().removeFeature(feature);
vectorLayer.setVisible(false);
vectorLayer.setVisible(true);

I had a similar issue. The repeated calls to setVisible did not work for me.

Turns out if you remove a selected feature from a layer, it will be removed, but it will still be visible. And it won't be removed "Visually" until you select something else.

What I did:

// collection that will contain all selected features
var selectFeatures = new ol.Collection();
// setting up the select interaction
var selectInteraction = new ol.interaction.Select({
  features: selectFeatures
});

// custom event to clear all selections
selectInteraction.on('clearSelections', function() {
   selectedFeatures.clear();
});



removeSomeFeaturesFromLayer() {
   // dispatch the event first
   selectInteraction.dispatchEvent({
      type: 'clearSelections'
   });

   /* 
    * NOW LOOP THROUGH THE FEATURES IN THE LAYER
    * AND REMOVE WHATEVER ONES YOU WANT
    */

}

I hope that helps.