Открытие закрытого многоугольника в Openlayers, чтобы продолжить рисование - отменить функциональность

Question

До отмены

После отмены

Iя пытаюсь создать функцию отмены с помощью 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>

Самый простой способ отменить отмену активного взаимодействия при рисовании - это вызвать removeLastPoint(), когда нажата клавиша, например Esc.Он будет работать с кодом, который я использовал на реальной странице, но слушатель keydown не работает внутри исполняемого фрагмента stackoverflow

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

Answer 2

@ Майк, я нашел другой способ сделать это, добавив новую функцию-прототип во взаимодействие с 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_));
      };