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

Question

我希望能够在 QGIS2web 插件生成的地图上绘制一些特征。

我在这里找到了一些 Openlayers 绘图插件：

https://cdn.rawgit.com/HamHamFonFon/ol3-drawFeatures/82f29a3f/examples/basic_use.html

但我不知道如何将它们与我现有的地图结合在一起。

我试图在我的地图（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());

我的地图不见了。

完整的 qgis2web.js 文件在这里：

https://jsfiddle.net/641jnc3y/

我当前的地图如下所示：

我有一些选择：

• 地理定位
• 测量工具
• 搜索

是否可以包含形状绘制选项？

谢谢

更新：

现在我基于以下示例：

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地图来实现绘图功能

 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);

反过来，我们可以将测量图和我们的图纸分开保存。