问题描述
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,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,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,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,0.2)'
}),stroke: new ol.style.stroke({
color: 'rgba(0,0.5)',lineDash: [10,10],width: 2
}),image: new ol.style.Circle({
radius: 5,stroke: new ol.style.stroke({
color: 'rgba(0,0.7)'
}),fill: new ol.style.Fill({
color: 'rgba(255,0.2)'
})
})
})
});
最后，我得到了这样的东西：
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,geometryFunction: geometryFunction
});
};
map.addInteraction(draw)
};
typeSelect.onchange = function () {
map.removeInteraction(draw);
addInteraction();
};
/*addInteraction();*/
var type = 'Linestring';
draw = new ol.interaction.Draw({
source: source,stroke: new ol.style.stroke({
color: 'rgba(255,stroke: new ol.style.stroke({
color: 'rgba(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)**
解决方法
我们可以通过扩展
将绘图功能实现到我们的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,geometryFunction: geometryFunction
});
};
map.addInteraction(draw)
};
}
接下来，如果我们希望图形具有除测量工具之外的其他颜色，则需要复制var measureLayer变量，已经定义了黄色。
我们可以调用实例var drawLayer的ID：
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,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）;
依次，我们可以分别保存测量图和工程图。
