Question

撤消之前

撤消后

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

您能帮我找到解决方案吗？

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

Answer 1

可以通过在交互过程中使用geometryFunction选项来使用现有要素的几何图形而不是开始新的要素。草图线的渲染无法按预期方式工作，因此需要通过样式功能进行处理。如果要在一个开始/结束时同时使用绘制和修改交互，则可能需要禁用/重新启用另一个。

  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侦听器在stackoverflow可运行代码段内不起作用

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

Answer 2

@Mike，我发现了另一种方法，可以在Draw交互中添加一个新的原型函数。请在下面找到代码，

 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中打开封闭的多边形以继续绘图-撤消功能

2 个答案: