从 Ol3 中的 Draw Interaction 中删除最后一个点

Question

我正在尝试通过 esc 键删除多边形绘制功能中的最后一个点。

以下代码无效。画区域的时候好像去掉了，但是顶点还在

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

删除最后一段后，您需要对几何元素使用 setCoordinates。

这是一个例子：

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 2

这段代码是对类似问题（我找不到了）的另一个答案的修改版本。使用此代码段，您可以删除 lineString 的最后插入点。我认为它也适用于多边形。试一试。

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

Answer 3

OpenLayers 3 使用 Draw.removeLastPoint() 方法对此有一个新的解决方案。奇迹般有效！

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

从 Ol3 中的 Draw Interaction 中删除最后一个点

Remove last point from Draw Interaction in Ol3

javascript

openlayers-3