QGIS 2 web 插件和形狀繪制選項

Question

我希望能夠在 QGIS2web 插件生成的 map 上繪制一些特征。

我在這里找到了一些 Openlayers 繪圖插件：

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

但我不知道如何將它們與我現有的 map 組合在一起。

我嘗試 plot 我的 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

我們可以通過擴展將繪圖 function 實現到我們的 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);

反過來，我們能夠將測量圖紙和我們的圖紙分開保存。