在 Openlayers 中打开封闭的多边形以继续绘图 - 撤消功能

Question

撤销前

撤消后

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

你能帮我找到解决办法吗？

我在一些使用 Openlayers 的第三方库中看到了撤销功能，当我们撤销时，整个形状将从地图中删除。另外，我在 Openlayers 中看到了修改功能，我可以在其中向现有形状添加更多点并更改形状结构。

Answer 1

可以通过在交互中使用 geometryFunction 选项来使用现有要素的几何图形而不是开始新的几何图形。草图线的渲染没有按预期工作，因此它们需要由样式函数处理。如果您想同时使用绘图和修改交互，其中一个 starts/ends 您可能需要 disable/re-enable 另一个。

  var white = [255, 255, 255, 1];
  var blue = [0, 153, 255, 1];
  var width = 3;

  var drawStyles = [
    new ol.style.Style({
      fill: new ol.style.Fill({
        color: [255, 255, 255, 0.5]
      })
    }),
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: white,
        width: width + 2
      })
    }),
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: blue,
        width: width
      })
    })
  ];

  var pointStyle = new ol.style.Style({
    image: new ol.style.Circle({
      radius: width * 2,
      fill: new ol.style.Fill({
        color: blue
      }),
      stroke: new ol.style.Stroke({
        color: white,
        width: width / 2
      })
    }),
    zIndex: Infinity
  });

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var source = new ol.source.Vector();
  var vector = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.2)'
      }),
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 2
      }),
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ffcc33'
        })
      })
    })
  });

  var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });

  var draw = new ol.interaction.Draw({
    source: source,
    type: 'Polygon',
    geometryFunction: function(coordinates, geometry) {
      if (geometry) {
        if (coordinates[0].length) {
          // Add a closing coordinate to match the first
          geometry.setCoordinates([coordinates[0].concat([coordinates[0][0]])]);
        } else {
          geometry.setCoordinates([]);
        }
      } else {
        var existing = source.getFeatures()[0];
        if (existing) {
          source.removeFeature(existing);
          geometry = existing.getGeometry();
          coordinates[0] = geometry.getCoordinates()[0].slice(0,-2).concat([coordinates[0][0]]);
          geometry.setCoordinates([coordinates[0].concat([coordinates[0][0]])]);
        } else {
          geometry = new ol.geom.Polygon(coordinates);
        }
      }
      return geometry;
    },
    style: function(feature) {
      if (feature.getGeometry().getType() == 'Polygon') {
        var sketchLine = new ol.geom.LineString(feature.getGeometry().getCoordinates()[0].slice(0,-1));
        drawStyles[1].setGeometry(sketchLine);
        drawStyles[2].setGeometry(sketchLine);
        return drawStyles;
      } else {
        return pointStyle;
      }
    }
  });
  map.addInteraction(draw);

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

在活动绘图交互上设置撤消的最简单方法是在按下 Esc 等键时调用 removeLastPoint()。它将与我在真实页面中使用的代码一起使用，但 keydown 侦听器在 Whosebug 可运行代码段中不起作用

  document.addEventListener('keydown', function(e) {
    if (e.which == 27)
      draw.removeLastPoint();
  });

Answer 2

@Mike，我找到了另一种方法，即向 Draw 添加一个新的原型函数 interaction.Please 找到下面的代码，

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

在 Openlayers 中打开封闭的多边形以继续绘图 - 撤消功能

Opening a closed Polygon in Openlayers to continue Drawing - Undo functionality

openlayers