OpenLayers eraseFeatures doesn't erase features from map screen.

Question

I'm using OpenLayers, and have a layer for my Map, and a single Vector Layer. In this vector layer, I am using the DrawFeature control to draw a square. I have a listener waiting for a feature to be added, and then deleting any existing features (I only want one square at a time), like so:

  polygonLayer.events.register("beforefeatureadded", feature, function(evt){
         console.log("Clearing existing polygons");
         console.log(polygonLayer.features.length);
         polygonLayer.destroyFeatures();
         polygonLayer.redraw();
        });//end attempt at events registration

When I check my layer.features.size, I can see that it's always 1, just like I expect, but the squares on the screen are still displayed. Even when I call .redraw() on the layer, the squares are still there.

Is there some extra step I'm missing?

Edit: You can find my code here: http://pastie.org/909644

Edit: Just realized: If I draw a square from previously existing coordinates, I can clear it just fine. It seems to be just the squares drawn from the controller that are an issue?

Answer 1

Here's the code we're using in Legato:

Legato.Control.DrawFeature = OpenLayers.Class(OpenLayers.Control.DrawFeature, {
  mode :1,
  callback :null,
  handlerConstructor :OpenLayers.Handler.Point,
  initialize : function(layer, options) {
    OpenLayers.Control.DrawFeature.prototype.initialize.apply(this, [ layer,
        this.handlerConstructor, options ]);

  },
  destroy : function() {
    OpenLayers.Control.DrawFeature.prototype.destroy.apply(this, arguments);
  },
  setMap : function(map) {
    OpenLayers.Control.DrawFeature.prototype.setMap.apply(this, arguments);
  },
  drawFeature : function(geometry) {
    var feature = new OpenLayers.Feature.Vector(geometry);
    var proceed = this.layer.events.triggerEvent("sketchcomplete", {
      feature :feature
    });
    if (proceed !== false) {
      feature.state = OpenLayers.State.INSERT;
      if (this.mode == 1) {
        this.layer.addFeatures( [ feature ]);
        this.featureAdded(feature);
        this.events.triggerEvent("featureadded", {
          feature :feature
        });
      }
      if (this.mode == 2) {
        this.layer.destroyFeatures();
        this.layer.addFeatures( [ feature ]);
        this.featureAdded(feature);
        this.events.triggerEvent("featureadded", {
          feature :feature
        });
      }
    }
    if (Legato.Lang.ObjectUtils.isFunction(this.callback)) {
      this.callback(geometry);
    }
  },

  CLASS_NAME :'Legato.Control.DrawFeature'
});
Legato.Control.DrawFeature.MODE_ADD_FEATURE = 1;
Legato.Control.DrawFeature.MODE_REPLACE_FEATURE = 2;

Answer 2

Okay, I think I have this figured out. I realized that I could clear the squares if they were drawn regularly, and that made me realize that the problem was in my beforefeatureadded code. I got rid of the clearing of the squares there, and sure enough, when I called the clear manually from a button, they went away.

So, trying to clear all features WHILE adding a feature was a problem.

What I ended up doing is using "featureadded" and then removing the feature from the list of features to be removed. Works like a charm.

     polygonLayer.events.register("featureadded", feature, function(evt){
        //only one circle at a time
               points = evt.feature.geometry.getVertices();
        console.log("Erasing old features: ");
        console.log(evt.feature);
        if(polygonLayer.features.length > 1){
        polygonLayer.destroyFeatures(polygonLayer.features.shift());
        };
        });//end after feature