javascript - QGIS 2 web 插件和形状绘图选项

Question

我希望能够在 QGIS2web 插件生成的 map 上绘制一些特征。
我在这里找到了一些 Openlayers 绘图插件:
https://cdn.rawgit.com/HamHamFonFon/ol3-drawFeatures/82f29a3f/examples/basic_use.html
但我不知道如何将它们与我现有的 map 结合在一起。
我试图在我的 map (qgis2web.js 文件)中绘制绘图变量。
以下代码之间的位置:

    var layerSwitcher = new ol.control.LayerSwitcher({tipLabel: "Layers"});
  map.addControl(layerSwitcher);

    var searchLayer = new SearchLayer({
  layer: lyr_Chamberspoles_2,
  colName: 'Object',
  zoom: 18,
  collapsed: true,
  map: map
   });


  map.getView().fit([-22418.727413, 6814717.343345, -21916.579134, 6815076.983154], map.getSize());

我绘制了这样的东西:

  var layerSwitcher = new ol.control.LayerSwitcher({tipLabel: "Layers"});
  map.addControl(layerSwitcher);

   var searchLayer = new SearchLayer({
  layer: lyr_Chamberspoles_2,
  colName: 'Object',
  zoom: 18,
  collapsed: true,
  map: map
  });


    map.addControl(searchLayer);
    document.getElementsByClassName('search-layer')[0]
    .getElementsByTagName('button')[0].className +=
   ' fa fa-binoculars';

    var vector_draw = new ol.layer.Vector({
    source: new ol.source.Vector(),
    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 options = {
    "popup_form" : false,
    "draw": {
        "Point": true,
        "LineString": true,
        "Square": true,
        "Circle": true,
        "Polygon": true
    }
};

    var buttonsDrawControls = new ol.control.ControlDrawFeatures(vector_draw, options);
     map.addControl(buttonsDrawControls);

   map.getView().fit([-22418.727413, 6814717.343345, -21916.579134, 6815076.983154], map.getSize());

我的 map 不见了。
完整的 qgis2web.js 文件在这里:
https://jsfiddle.net/641jnc3y/
我现在的 map 是这样的:

我有一些选择:

地理位置

测量工具

搜索

可以包括形状绘图的选项吗？
谢谢
更新:
现在我基于以下示例:
https://openlayers.org/en/latest/examples/draw-features.html?q=draw
我想在下面的线程中做类似的事情:
https://gis.stackexchange.com/questions/263626/drawing-shapes-and-features-in-openlayers-4
我从下面的链接中获取了代码:
https://jsfiddle.net/jelle002/qh1npzet/
我已放置 <form>在我的 index.html 页面中
我在 qgis2web.js 文件中找到了绘图部分

  var draw; // global so we can remove it later
  function addInteraction() {
  var type = 'LineString';
  draw = new ol.interaction.Draw({
  source: source,
  type: /** @type {ol.geom.GeometryType} */ (type),
  style: new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.2)'
  }),
  stroke: new ol.style.Stroke({
    color: 'rgba(0, 0, 0, 0.5)',
    lineDash: [10, 10],
    width: 2
  }),
  image: new ol.style.Circle({
    radius: 5,
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 0, 0.7)'
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    })
   })
  })
 });

并尝试将其与 结合使用main.js 文件。
最后，我得到了这样的东西:

  var draw; // global so we can remove it later
  function addInteraction() {
  var typeSelect = document.getElementById('type');
  var value = typeSelect.value;
  if (value === 'None'){
    } else {
        var geometryFunction;
        if(value !== 'None' && value !== 'Square' && value !== 'Box') {
            console.log(value)
            draw = new ol.interaction.Draw({
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
            });
        } else if(value === 'Square'){
            console.log(value)
            value = 'Circle';
            geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
            draw = new ol.interaction.Draw({
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (value),
                geometryFunction: geometryFunction
            });
        } else if(value === 'Box'){
            console.log(value)
            value = 'Circle';
            geometryFunction = ol.interaction.Draw.createBox();
            draw = new ol.interaction.Draw({
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (value),
                geometryFunction: geometryFunction
            });
        };
        map.addInteraction(draw)
      };
    
   typeSelect.onchange = function () {
   map.removeInteraction(draw);
   addInteraction();
  };


 /*addInteraction();*/
 var type = 'LineString';
 draw = new ol.interaction.Draw({
  source: source,
  type: /** @type {ol.geom.GeometryType} */ (type),
  style: new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.2)'
  }),
  stroke: new ol.style.Stroke({
    color: 'rgba(255, 0, 0, 0.5)',
    lineDash: [10, 10],
    width: 2
  }),
  image: new ol.style.Circle({
    radius: 5,
    stroke: new ol.style.Stroke({
      color: 'rgba(255, 0, 0, 0.7)'
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    })
  })
 })
});

/var typeSelect = document.getElementById('type');/
它带有形状，但我无法阻止它。

我也尝试过这样的事情:

  if (value === 'None'){
    null
      } else {
         var geometryFunction;

但这也无济于事

和控制台说:

  **Uncaught TypeError: Cannot read property 'get' of null
     at qgis2web.js:381
     at h (Map.js:92)
     at VectorLayer.js:276
     at p (ExecutorGroup.js:176)
     at t.execute_ (Executor.js:694)
     at t.executeHitDetection (Executor.js:803)
     at t.forEachFeatureAtCoordinate (ExecutorGroup.js:201)
     at e.forEachFeatureAtCoordinate (VectorLayer.js:267)
     at e.forEachFeatureAtCoordinate (Map.js:123)
     at e.forEachFeatureAtPixel (PluggableMap.js:489)**

Answer 1

我们可以通过扩展 QGIS2web map 来实现绘图功能

 var listener;
draw.on('drawstart',
function(evt) {

qgis2web.js 中的变量文件。
为了更精确，我们需要扩展 draw.on('drawend', ) 选项优先
原始代码如下所示:

    var listener;
    draw.on('drawstart',
    function(evt) {
    //.......
    draw.on('drawend',
     function(evt) {
     measureTooltipElement.className = 'tooltip tooltip-static';
     measureTooltip.setOffset([0, -7]);
     // unset sketch
     sketch = null;
     // unset tooltip so that a new one can be created
     measureTooltipElement = null;
     createMeasureTooltip();
     ol.Observable.unByKey(listener);
    }, this);
   }

而新的:

    var listener;
    draw.on('drawstart',
    function(evt) {
  //.....

  draw.on('drawend',
   function(evt) {
    measureTooltipElement.className = 'tooltip tooltip-static';
    measureTooltip.setOffset([0, -7]);
    // unset sketch
    sketch = null;
    // unset tooltip so that a new one can be created
    measureTooltipElement = null;
    createMeasureTooltip();
    ol.Observable.unByKey(listener);
   }, this);
   var value = typeSelect.value;    //Adding drawing features to QGIS2web map
    if (value === 'None'){
        
     } else {
        var geometryFunction;
        if(value !== 'None' && value !== 'Square' && value !== 'Box') {
            console.log(value)
            draw = new ol.interaction.Draw({
                source: sourcedraw,
                type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
            });
        } else if(value === 'Square'){
            console.log(value)
            value = 'Circle';
            geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
            draw = new ol.interaction.Draw({
                source: sourcedraw,
                type: /** @type {ol.geom.GeometryType} */ (value),
                geometryFunction: geometryFunction
            });
        } else if(value === 'Box'){
            console.log(value)
            value = 'Circle';
            geometryFunction = ol.interaction.Draw.createBox();
            draw = new ol.interaction.Draw({
                source: sourcedraw,
                type: /** @type {ol.geom.GeometryType} */ (value),
                geometryFunction: geometryFunction
            });
        };
        map.addInteraction(draw)
    };
   }

接下来，如果我们希望绘图的颜色不是测量工具，我们需要复制 var measureLayer变量，已经定义了黄色。
例如，我们可以调用 id var drawLayer :

  var drawLayer = new ol.layer.Vector({                    // drawing shapes 
    customizing
    source: sourcedraw,
    style: new ol.style.Style({
     fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.2)'
     }),
     stroke: new ol.style.Stroke({
        color: '#f22edb',
        width: 3
     }),
     image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
            color: '#f22edb'
         })
       })
    })
  });

map.addLayer(drawLayer);
反过来，我们能够将测量图纸和我们的图纸分开保存。