【发布时间】：2021-02-10 23:27:37
【问题描述】：
我希望能够在 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)**
【问题讨论】：
-
我也许能帮上忙，但我希望你能提供一个我可以使用此代码的地方（即使它是可用的 repo 也会有所帮助）
标签： javascript openlayers qgis