在Openlayers中打开闭合多边形以继续绘制-撤消功能

撤销前

撤销后

我正在尝试使用Openlayers创建一个撤消功能，在该功能中，我可以打开一个绘制完成的多边形并再次继续绘制该形状。 不确定如何为多边形的每个点实现撤消功能

你能帮我找到解决办法吗

我在一些使用Openlayers的第三方库中看到了撤销功能，在这种功能中，当我们撤销时，整个形状将从地图中删除。

---

此外，我在Openlayers中看到了修改功能，在Openlayers中我可以向现有形状添加更多点并更改形状的结构。

可以通过使用交互中的

geometryFunction

选项来使用现有特征的几何图形，而不是启动新特征。绘制线的渲染未按预期工作，因此需要由样式函数处理。如果希望在一个开始/结束时同时使用绘制和修改交互，则可能需要禁用/重新启用另一个

var-white=[255,255,255,1]；
VarBlue=[0153255,1]；
var宽度=3；
变量drawStyles=[
新ol风格({
填充：新的ol.style.fill({
颜色：[255，255，255，0.5]
})
}),
新ol风格({
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度+2
})
}),
新ol风格({
笔划：新的ol风格笔划({
颜色：蓝色，
宽度：宽度
})
})
];
var pointStyle=新的ol.style.style({
图片：新ol.style.Circle({
半径：宽度*2，
填充：新的ol.style.fill({
颜色：蓝色
}),
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度/2
})
}),
zIndex:无限
});
var raster=新建ol.layer.Tile({
来源：new ol.source.OSM（）
});
var source=new ol.source.Vector（）；
var vector=新的ol.layer.vector({
资料来源：资料来源，
风格：新的ol风格({
填充：新的ol.style.fill({
颜色：“rgba（255，255，255，0.2）”
}),
笔划：新的ol风格笔划({
颜色：“#ffcc33”，
宽度：2
}),
图片：新ol.style.Circle({
半径：7，
填充：新的ol.style.fill({
颜色：“#ffcc33”
})
})
})
});
var map=新ol.map({
图层：[光栅，矢量]，
目标：“地图”，
视图：新ol.view({
中心：[-11000000，4600000]，
缩放：4
})
});
var draw=新ol.interaction.draw({
资料来源：资料来源，
键入：“多边形”，
geometryFunction：函数（坐标、几何）{
if（几何）{
if（坐标[0]。长度）{
//添加闭合坐标以匹配第一个闭合坐标
geometry.setCoordinates（[coordinates[0].concat（[coordinates[0][0]]）；
}否则{
几何。设置坐标（[]）；
}
}否则{
var existing=source.getFeatures（）[0]；
如果（现有）{
source.removeFeature（现有）；
geometry=existing.getGeometry（）；
坐标[0]=geometry.getCoordinates（）[0].切片（0，-2）.concat（[coordinates[0][0]]）；
geometry.setCoordinates（[coordinates[0].concat（[coordinates[0][0]]）；
}否则{
几何=新的几何多边形（坐标）；
}
}
返回几何；
},
风格：功能（特征）{
if（feature.getGeometry（）.getType（）=='Polygon'）{
var sketchLine=new ol.geom.LineString（feature.getGeometry（）.getCoordinates（）[0].slice（0，-1））；
drawStyles[1]。设置几何图形（草图线）；
drawStyles[2]。设置几何图形（草图线）；
返回样式；
}否则{
返回点样式；
}
}
});
地图。添加交互作用（绘制）
html，body，.map{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
可以通过在交互中使用
geometryFunction
选项来使用现有特征的几何图形，而不是启动新特征。绘制线的渲染未按预期工作，因此需要由样式函数处理。如果希望在一个开始/结束时同时使用绘制和修改交互，则可能需要禁用/重新启用另一个


var-white=[255,255,255,1]；
VarBlue=[0153255,1]；
var宽度=3；
变量drawStyles=[
新ol风格({
填充：新的ol.style.fill({
颜色：[255，255，255，0.5]
})
}),
新ol风格({
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度+2
})
}),
新ol风格({
笔划：新的ol风格笔划({
颜色：蓝色，
宽度：宽度
})
})
];
var pointStyle=新的ol.style.style({
图片：新ol.style.Circle({
半径：宽度*2，
填充：新的ol.style.fill({
颜色：蓝色
}),
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度/2
})
}),
zIndex:无限
});
var raster=新建ol.layer.Tile({
来源：new ol.source.OSM（）
});
var source=new ol.source.Vector（）；
var vector=新的ol.layer.vector({
资料来源：资料来源，
风格：新的ol风格({
填充：新的ol.style.fill({
颜色：“rgba（255，255，255，0.2）”
}),
笔划：新的ol风格笔划({
颜色：“#ffcc33”，
宽度：2
}),
图片：新ol.style.Circle({
半径：7，
填充：新的ol.style.fill({
颜色：“#ffcc33”
})
})
})
});
var map=新ol.map({
图层：[光栅，矢量]，
目标：“地图”，
视图：新ol.view({
中心：[-11000000，4600000]，
缩放：4
})
});
var draw=新ol.interaction.draw({
资料来源：资料来源，
键入：“多边形”，
geometryFunction：函数（坐标、几何）{
if（几何）{
if（坐标[0]。长度）{
 ol.interaction.Draw.prototype.reStart = function (selectedFeature) {
    this.abortDrawing_();
    var coordinates, sketchLineGeom;
    var geometry = selectedFeature.getGeometry();
    var selectedCoordinates = geometry.getCoordinates()[0];
    this.sketchFeature_ = this.sketchFeature_?this.sketchFeature_:selectedFeature;
    coordinates = selectedCoordinates;
    if (this.mode_ === ol.interaction.Draw.Mode_.POLYGON) {  
    this.sketchCoords_ =  [coordinates.slice(0,-1)];  
        var last = coordinates[coordinates.length-2];
        this.finishCoordinate_ = last.slice()[0];
        this.sketchCoords_[0].push(last.slice());
        sketchLineGeom = new ol.geom.LineString(coordinates);
        this.sketchLine_=new ol.Feature(sketchLineGeom);
        this.geometryFunction_(this.sketchCoords_, geometry);
        this.sketchLineCoords_ = this.sketchCoords_[0];
      }
      if (coordinates.length === 0) {
        this.finishCoordinate_ = null;
      }
      this.updateSketchFeatures_();
      this.dispatchEvent(new ol.interaction.Draw.Event(
      ol.interaction.DrawEventType.DRAWSTART, this.sketchFeature_));
      };