Openlayers 4.6.5 & Angular 6 unable to remove drawn shapes at pixel

Question

The problem is that when I try and remove the feature the this.vectorLayer.getSource().removeFeature() is throwing an error Cannot read property 'forEach' of undefined

I can logged the feature absolutely fine so it's definitely grabbing it in the remove function, I also tried to add it to an array in a features property on the vectorLayer but couldn't seem to get that to work or find any decent documentation on it.

I should note that I've set up buttons to independently add the layer at the moment so I will add the layer with the addLayer and then draw a shape with addInteraction then try and remove said drawing.

    /** This is the input property for the base layer of the map the main source */
@Input('coreMap') coreMap: CoreMapComponent
vectorLayer: VectorLayer;
modifyLayer: Modify;
draw: Draw;
vectorSource: VectorSource;
style: Style;
snap: Snap;
style2: Style;



ngOnInit(){
    this.vectorSource = new VectorSource({
        wrapX: false,
    })

    this.style = new Style({
        fill: new Fill({
            color: '#ffcc33',
        }),
        stroke: new Stroke({
            color: '#ffcc33',
            width: 2
        }),

        image: new CircleStyle({
            radius: 7,
            fill: new Fill({
                color: '#ffcc33'
            })
        })
    })

    this.vectorLayer = new VectorLayer({
        source: this.vectorSource,
        style: [this.style]
    });

    this.modifyLayer = new Modify({ source: this.vectorSource })
}

addLayer(){
    this.coreMap.layerManager.addLayer(this.vectorLayer)
}

getLayers(){
    console.log(this.coreMap.map.getLayers().getArray());
}

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

addInteraction() {
    this.draw = new Draw({
        source: this.vectorSource,
        style: this.style,
        type: 'Point'
    })
    this.coreMap.map.addInteraction(this.draw)
    this.snap = new Snap({ source: this.vectorSource })
    this.coreMap.map.addInteraction(this.snap);
    this.coreMap.map.addInteraction(this.modifyLayer);
}

I have managed reproduce the 'forEach' error by leaving an interaction active, and it also explains the null layer parameter being passed. Your code adds a modifyLayer interaction, but doesn't remove it. — Mike, Jan 07 '19 at 14:50
This in conjunction with Vugar answer has fixed the problem thank you both very much. — Munerz, Jan 07 '19 at 14:55

score 3 · Accepted Answer · answered Jan 07 '19 at 14:42

3

Replace your removeShape() function with this! I'm sure it will work

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

answered Jan 07 '19 at 14:42

Vugar Dadalov

134
2
7

This in conjunction with Mikes comment about removing the modifyInteraction has fixed the issue, thank you both for helping a complete nooby out – Munerz Jan 07 '19 at 14:54
Would you also be able to explain what the problem was in the first place if at all possible? – Munerz Jan 07 '19 at 14:57

Openlayers 4.6.5 & Angular 6 unable to remove drawn shapes at pixel

1 Answers1