QGIS2web Openlayers 绘图功能 - 无法绘制矩形

Question

我使用其中一种 Openlayers 代码来绘制特征。 这里考虑的是在这个网站上。

实施到我的 JavaScript 文件后，您可以在下面找到：

https://jsfiddle.net/t0dnpL73/

我收到一个错误：

未捕获的类型错误：无法读取 null 的属性（读取“getGeometry”）

function onDrawend() {
setTimeout(function() {
  setActiveEditing(true);
  activeInteraction.setActive(false);
  document.getElementById('draw').value = 'select';
}, 200);
}

var vectorLayer = new ol.layer.Vector({
 source: new ol.source.Vector()
});
vectorLayer.setMap(map);

var pointInteraction = new ol.interaction.Draw({
type: 'Point',
source: vectorLayer.getSource()
});
pointInteraction.setActive(false);
pointInteraction.on('drawend', onDrawend);

var lineInteraction = new ol.interaction.Draw({
type: 'LineString',
source: vectorLayer.getSource()
 });
 lineInteraction.setActive(false);
 lineInteraction.on('drawend', onDrawend);

  var polygonInteraction = new ol.interaction.Draw({
  type: 'Polygon',
  source: vectorLayer.getSource()
 });
 polygonInteraction.setActive(false);
 polygonInteraction.on('drawend', onDrawend);

 var circleInteraction = new ol.interaction.Draw({
 type: 'Circle',
 source: vectorLayer.getSource()
 });
  circleInteraction.setActive(false);
  circleInteraction.on('drawend', onDrawend);

  var rectangleInteraction = new ol.interaction.Draw({
  type: 'LineString',
  source: vectorLayer.getSource(),
  maxPoints: 2,
  geometryFunction: function(coordinates, geometry) {
   if (!geometry) {
     geometry = new ol.geom.Polygon(null);
   }
   var start = coordinates[0];
   var end = coordinates[1];
   geometry.setCoordinates([
    [start, [start[0], end[1]], end, [end[0], start[1]], start]
  ]);
  return geometry;
 }
 });
 rectangleInteraction.setActive(false);
 rectangleInteraction.on('drawend', onDrawend);

var selectInteraction = new ol.interaction.Select({
 condition: ol.events.condition.click,
 wrapX: false
});
 var modifyInteraction = new ol.interaction.Modify({
 features: selectInteraction.getFeatures()
});
 var translateInteraction = new ol.interaction.Translate({
 features: selectInteraction.getFeatures()
 });
 var setActiveEditing = function(active) {
 selectInteraction.getFeatures().clear();
 selectInteraction.setActive(active);
 modifyInteraction.setActive(active);
 translateInteraction.setActive(active);
 };
 setActiveEditing(true);

  var snapInteraction = new ol.interaction.Snap({
  source: vectorLayer.getSource()
 });

  map.getInteractions().extend([
  pointInteraction, lineInteraction, polygonInteraction,
  circleInteraction, rectangleInteraction,
  selectInteraction, modifyInteraction, translateInteraction,
  snapInteraction]);

  var activeInteraction;
  document.getElementById('draw').addEventListener('change', function(e) {
  var value = e.target.value;
  if (activeInteraction) {
   activeInteraction.setActive(false);
   }
   if (value == 'point') {
   activeInteraction = pointInteraction;
  } else if (value == 'line') {
   activeInteraction = lineInteraction;
  } else if (value == 'polygon') {
   activeInteraction = polygonInteraction;
  } else if (value == 'circle') {
   activeInteraction = circleInteraction;
   } else if (value == 'rectangle') {
   activeInteraction = rectangleInteraction;
   } else {
   activeInteraction = undefined;
   }
    setActiveEditing(!activeInteraction);
   if (activeInteraction) {
   activeInteraction.setActive(true);
   }
  });

基本上，每次单击Z1D78DC8ED51214E518B5114FE24490AEE时，都会出现上述错误。

我还发现，在矩形问题中，我们有这样的情况，最大 2 个点的坐标必须由用户定义。 在这种情况下，该工具不能让我单击 map 中的任何位置。 我试图修改代码，但看起来它是正确的：

https://www.py4u.net/discuss/354790

这是修复它的聪明方法吗？

Answer 1

我使用 Viglino 的ol-ext Control Bar解决了这个问题，如本例https://viglino.github.io/ol-ext/examples/bar/map.control.editionbar.ZFC35FDC70D5FC69D23EZC78A