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

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

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

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

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

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

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

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

我的地图不见了

完整的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.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());

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

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

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

我有一些选择：

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

是否可以包含一个用于形状绘制的选项

谢谢

更新：

现在我基于以下例子：

我想在下面的线程中做一些类似的事情：

我从下面的链接中获取了代码：

我已将

放在我的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)'
    })
   })
  })
 });

并尝试将其与文件相结合

最后，我得到了这样的结果：

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

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

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

    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 typeSelect=document.getElementById（'type'）/

它是有形状的，但我不能阻止它

我也试过这样的方法：

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

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

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

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

但这也没用

控制台说：

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

---

我们可以通过扩展

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

变量位于我们的

qgis2web.js

文件中

更准确地说，我们需要首先扩展

draw.on（'draund'），

）选项

原始代码如下所示：

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

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

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

    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）

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

---

我可能可以提供帮助，但我希望您提供一个我可以使用此代码的地方（即使是可用的回购协议也会有所帮助）