时间戳

首页 > 解决方案 > Openlayers 4.6.5 和 Angular 6 无法在像素处删除绘制的形状

angular - Openlayers 4.6.5 和 Angular 6 无法在像素处删除绘制的形状

问题描述

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

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

我应该注意到我已经设置按钮来独立添加图层，所以我将使用 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);
}

标签： angularangular6openlayersopenlayers-3angular-openlayers

解决方案

用这个替换你的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;
            });
    });
}

推荐阅读