I am trying to remove the last point in a polygon draw feature on esc key.

The following code do not work. It seems to remove it when it draw the area part, but the vertex is stil there.

var geom :ol.geom.Polygon = null;
draw.on("drawstart",(event) => {
    console.log(event);
    var feature :ol.Feature= event.feature;
    console.log(feature);
    geom = feature.getGeometry<ol.geom.Polygon>();
});

$(document).keyup((e)=> {
    if (e.keyCode === 27) {
        var coords = geom.getCoordinates()[0];
        if(coords.length>1)
            geom.setCoordinates([coords.slice(0, coords.length - 2)]);
    }
});

I am trying to remove the last point in a polygon draw feature on esc key.

The following code do not work. It seems to remove it when it draw the area part, but the vertex is stil there.

var geom :ol.geom.Polygon = null;
draw.on("drawstart",(event) => {
    console.log(event);
    var feature :ol.Feature= event.feature;
    console.log(feature);
    geom = feature.getGeometry<ol.geom.Polygon>();
});

$(document).keyup((e)=> {
    if (e.keyCode === 27) {
        var coords = geom.getCoordinates()[0];
        if(coords.length>1)
            geom.setCoordinates([coords.slice(0, coords.length - 2)]);
    }
});

• javascript
• openlayers-3

• Did you figure this out? I have the same need too. – ProfNimrod Commented Mar 30, 2015 at 18:50
• No, i took a different path and made such esc deleted the current drawing and the user could start over. Long term, I think I will be making a custom draw extension that fits more into our application with the options we need. – Poul K. Sørensen Commented Mar 31, 2015 at 15:02
• Thanks - you've taken the route I've already taken, but a user asked if I could just remove the last point, not the whole polygon. – ProfNimrod Commented Mar 31, 2015 at 17:57

3 Answers 3

OpenLayers 3 has a new solution to this with the Draw.removeLastPoint() method. Works like a charm!

draw = new ol.interaction.Draw({
  source:source,
  type: /** @type (ol.geom.GeometryType) */ ('Polygon')
})

draw.on('drawstart',
  function(evt){
    $(document).on('keyup', function(event){
      if(event.keyCode === 27){
        draw.removeLastPoint();
       }
     });
});

You need to use a setCoordinates on the geometry element, after removing the last segment.

Here is an example:

this.olDraw.on('drawstart',
  function (evt) {
    $(document).on('keyup', function (event) {
      if (event.keyCode === 27) {
        var feature = evt.feature;
        var geom = feature.getGeometry();
        if (geom.getType() === LINE_STRING) {
          geom.setCoordinates(geom.getCoordinates().slice(0,geom.getCoordinates().length - 1));
        }
      }
    });
  }, this);

This code is a modified version of another answer to a similar question (which I couldn't find again). Using this snippet, you can delete the last inserted point of a lineString. I think it should work for the polygon as well. give it a try.

var lineStringdraw = new ol.interaction.Draw({
    features: features,
    type: "LineString",
    geometryFunction:geometryChange
});


function geometryChange(coordinates, geometry){
    if (!geometry) {
        console.info("what did you do?");
        geometry = new ol.geom.LineString(null);   
    } 
    var coords = geometry.getCoordinates();
    var diff = coordinates.length - coords.length;
    if (diff > 1) {
        coordinates.splice(coordinates.length - diff, diff - 1);
        if (coordinates.length === 1){
            lineStringdraw.finishDrawing();
            var emptyFeature = vector2.getSource().getFeatures()[vector2.getSource().getFeatures().length-1];
            vector2.getSource().removeFeature(emptyFeature);
        }
    }
    geometry.setCoordinates(coordinates);
    coordinates= geometry.getCoordinates();
    return geometry;    
}

var keydown = function(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode === 27 && drawing === true){ //esc key
    var geom = drawing_feature.getGeometry();
    geom.setCoordinates(geom.getCoordinates().slice(0, -1));
    undo=true;
}
};

var drawing=false,drawing_feature=null;

lineStringdraw.on('drawstart', function(e1) {
    drawing = true;
    drawing_feature = e1.feature;
    drawing_feature.setProperties({'FID': featureID})
    var featureGeom = drawing_feature.getGeometry();
});


lineStringdraw.on('drawend', function(e2) {
    drawing = false;
    drawing_feature = null;
});