Openlayers 4.6.5 & Angular 6 无法移除像素处绘制的形状

Question

问题是，当我尝试删除该功能时，this.vectorLayer.getSource().removeFeature() 抛出错误 Cannot read property 'forEach' of undefined

我可以非常好地记录该功能，因此它肯定会在删除功能中抓住它，我还尝试将它添加到 vectorLayer 上的功能属性中的数组，但似乎无法做到这一点工作或找到任何体面的文档。

我应该注意，我现在已经设置了独立添加图层的按钮，所以我将使用 addLayer 添加图层，然后使用 addInteraction 绘制一个形状，然后尝试删除所述绘图。

    /** 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);
}

Answer 1

用这个替换你的 removeShape() 函数！我确定它会起作用

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;
            });
    });
}

Openlayers 4.6.5 & Angular 6 无法移除像素处绘制的形状

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

openlayers

openlayers-3

angular-openlayers

angular

angular6