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