1

So I can remove a layer fine, and I can see how I can remove a feature(shape) by grabbing it's id lets say and populating the list of current features for the user to select.

But ideally I want to be able to select a remove button and then click on the feature(shape) that I'd like to remove.

I see that there are a couple of remove properties at my disposal one on the Shape object and one on the Modify object but can't seem to work out how to use them on a click event.

Edit ***

With the help of Mike the function at the moment looks like this

  removeShape(){
var layer = this.vectorLayer;
this.coreMap.map.removeInteraction(this.draw);
this.coreMap.map.removeInteraction(this.snap);
this.coreMap.map.on('click', function(evt: any) {
  this.forEachFeatureAtPixel(evt.pixel,
    function(feature) {
      layer.getSource().removeFeature(feature);
      return true;
    });
});
  }

I can console log the feature absolutely fine as well so it's selecting it, but despite passing it into removeFeature nothing appears to be happening.

  • What does console log show for layer in the callback? Using var source = this.vectorSource; and source.removeFeature(feature); should have the same effect. The code definitely works in plain OpenLayers, there may be a problem with scope due to Angular so you should tag you question Angular. – Mike Jan 6 at 17:07
  • It returns an ol_layer_Vector object, and I forgot to mention that the function does actually throw an error of Cannot read property 'forEach' of undefined. – Munerz Jan 6 at 17:43
  • ol_feature obj even sorry. – Munerz Jan 6 at 18:02
1

Something as simple as this would do it. It returns true after the first feature, so won't remove more than one if they overlap. You might want to add further checks.

  map.on('click', function(evt) {
    this.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        layer.getSource().removeFeature(feature);
        return true;
      });
  });

You could also try keeping the original context for this in the callback

this.coreMap.map.on('click', function(evt: any) {
  this.coreMap.map.forEachFeatureAtPixel(evt.pixel,
    function(feature) {
      this.vectorSource.removeFeature(feature);
      return true;
    });
}.bind(this));
  • The forEachFeatureAtPixel is throwing an error Cannot read property 'map' of undefined, any clue as to what the issue might be there my friend? – Munerz Jan 6 at 14:29
  • It should work just by adding the code after setting up the map. If you are using Angular you would replace map with whatever you are using as the map object (based on your previous question this.coreMap.map) – Mike Jan 6 at 14:30
  • I'm assuming that I'm going to need to pass in some form of event object into the function to fulfil the undefined error? So it has access to the x & y coords? – Munerz Jan 6 at 14:31
  • this inside the callback will be the map – Mike Jan 6 at 14:37
  • Can't seem to read the layer.getSource returns null, tried to assign the layer variable to my vectorLayer field outside the function but no luck there either returning cannot read prop of forEach undefined – Munerz Jan 6 at 14:43

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.