时间戳

首页 > 解决方案 > 在 Openlayers 中打开一个封闭的多边形以继续绘图 - 撤消功能

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

问题描述

撤消之前

撤消之前

撤消后

在此处输入图像描述

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

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

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

标签： openlayers

解决方案

可以通过使用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();
  });

推荐阅读