Remove last point from Draw Interaction in Ol3

Question

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

The following code does not work. It seems that he removes it when he draws part of the area, but the top is 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)]);
    }
});

Answer 1

OpenLayers 3 has a new solution for this Draw.removeLastPoint () method. It 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();
       }
     });
});

Run codeHide result

Answer 2

You need to use setCoordinates in 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);

Answer 3

( ). , String. , . .

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