撤消OL3中的最后一个点将删除最后一个段

时间:2015-12-28 09:17:15

标签: javascript openlayers-3 undo

我需要在我的网络应用中使用一项功能来撤消最后一点。对于给定问题,已经存在一些解决方案,例如this,它可以在某种程度上处理它:

var undo = false; // set this to true in the Esc key handler
var draw = new ol.interaction.Draw({
// ...
geometryFunction: function(coords, geom) {
    if (!geom) {
        geom = new ol.geom.LineString(null);
    }
    if (undo) {
        if (coords.length > 1) {
            coords.pop();
        }
        undo = false;
    }
    geom.setCoordinates(coords);
    return geom;
    }
});

但似乎有一个我无法弄清楚的错误或其他事情。

使用此plunker,您可以尝试我要解释的内容:

如果你绘制一条带有一些顶点的线然后撤消(按下ESC)直到该线上的最后一个点被移除,然后在刚刚撤消的相同点处(或足够接近)完成该线,最后一段将被删除,为什么?

由数字解释:

1-绘制线要素

enter image description here

2-撤消最后(第三)点 enter image description here

3-在相同点处(或接近)完成线。 enter image description here

4 - 最后一段被删除。 enter image description here

我试了好几次就发生了。如果您添加一个不接近移除的点或添加多个点,则不会发生这种情况。

修改

似乎OL3检查几何的最后两个坐标,如果它们相同则决定完成绘图会话,并删除最后一个。我尝试了以下代码:

function geometryChange(coordinates, geometry){
if (!geometry) {
    geometry = new ol.geom.LineString(null);   
} 
if (undo){
    var coords = geometry.getCoordinates();
    console.info(coords);
    console.info(coordinates);
    var diff = coordinates.length - coords.length;
    if (diff > 0) {
        var lastCoordinates= coordinates[coordinates.length-1];
        console.info(coordinates);
        coordinates.splice(coordinates.length - (diff+1), diff,lastCoordinates);
        console.info(coordinates);
        coordinates.pop();
        console.info(coordinates);
        undo=false;
        if (coords.length === 1){
            undone=true;
            lineStringdraw.finishDrawing();
            undone=false;
            var emptyFeature = vector2.getSource().getFeatures()[vector2.getSource().getFeatures().length-1];
            vector2.getSource().removeFeature(emptyFeature);
            featureID-=1;
        }
    }
}
//console.info(coordinates);
geometry.setCoordinates(coordinates);
//coordinates= geometry.getCoordinates();
return geometry;    
}

结果更有趣。当我撤消最后一点时,当我想添加一个接近该点的点(没有用双击完成该行)时,OL假定绘图已完成并触发drawend事件(我将此事件用于某些目的但令人惊讶地被无缘无故地触发)。

1 个答案:

答案 0 :(得分:2)

尝试更改这段代码:

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

到此:

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

如果您可以使用removeLastPoint方法,请尝试以下

var keydown = function(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode === 27 && drawing === true){ //esc key
draw.removeLastPoint();
}
};