CODEWITHSUNDEEP
javascriptopenlayerslayer
linhos
linhos

Reputation: 111

openlayer4: how to delete a feature in a layer and refresh the map

I want to add a double click event to delete a feature. Though this code work well, there has a problem: the map couldn't refresh, the feature still in the map, until i double click next. How should i do?

_createDoubleSelectControl: function() {
    var selectedStyle = [
        new OpenLayers.style.Style({
            stroke: new OpenLayers.style.Stroke({
                color: '#3399CC',
                width: 1.25
            })
        })
    ];
    this.doubleClickSelector = new OpenLayers.interaction.Select({
        condition: OpenLayers.events.condition.doubleClick,
        style: selectedStyle,
        multi: true,
        layers: [this.layers.cellLayer],
        filter: function(feature, layer) {
            return layer === this.layers.cellLayer;
        }.bind(this)
    });

    this.map.addInteraction(this.doubleClickSelector);
    this.doubleClickSelector.on('select', function(event) {
        let features = event.target.getFeatures();
        features.forEach(function(feature) {
            this._cellLayer.getSource().removeFeature(feature);
            //this._cellLayer.refresh();
            this._cellLayer.refresh({
                force: true,
                active: true
            });
            this.map.removeLayer(this._cellLayer);
            this.map.addLayer(this._cellLayer);
        }.bind(this));
    }.bind(this));
},

Upvotes: 1

Views: 739

Answers (1)

Viglino Jean-Marc
Viglino Jean-Marc

Reputation: 1421

You have to remove the feature from selection on select:

this.doubleClickSelector.on('select',function(event){
  let features =event.target.getFeatures();
  // Clear selection
  this.doubleClickSelector.getFeatures().clear();
  // Remove from layer
  features.forEach(function(feature){
     this._cellLayer.getSource().removeFeature(feature);
  }.bind(this));
}.bind(this));

Otherwise the feature is still selected and visible...

Upvotes: 1

Related Questions