[英]Enable drawing features by keeping pressing ctrl in Openlayers
我试图添加一个功能,当按住“ ctrl”(例如一个圆圈)时启用绘图功能。
var source = new ol.source.Vector({wrapX: false})
var draw = new ol.interaction.Draw({
source: source,
type: 'Circle'
})
document.addEventListener('keydown', function(e) {
if (e.keyCode === 17) {
draw.setActive(true);
map.addInteraction(draw)
}
})
document.addEventListener('keydown', function(e) {
if (e.keyCode === 17) {
draw.setActive(false);
map.removeInteraction(draw)
}
})
当我按ctrl时这不起作用,但是如果我修改代码以检测shift键以启用绘图功能,则该方法可以正常工作。
我想我一定想念点什么。 您能告诉我为什么按Ctrl键不起作用,但shift可以正常工作吗? 谢谢。
我找到了解决方案。 它并不是您真正想要的,但它确实接近您的需求。
我如何绕过您的问题:
如果您想按住控制键进行绘制,这对我也不起作用。 交互似乎有效,但实际上没有绘图发生。
但是,如果您使用CTRL键作为电子狗。 我的意思是,如果您按一次开始绘制,绘制形状,然后再次按CTRL键停止它,那么我可以为您完成。
您可以使用以下代码进行操作:
这是地图代码 :
var map = new ol.Map({
target: 'map',
layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
view: new ol.View({
center: ol.proj.transform([0, 20], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
这是我们存储工程图要素的要素图层/集合
var drawingFeatures = new ol.Collection();
// The layer of these drawing features
var drawingLayer = new ol.layer.Vector({
source: new ol.source.Vector({features: drawingFeatures}),
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'
})
})
})
});
drawingLayer.setMap(map); // put the layer in our map
这是图形交互 :
var draw = new ol.interaction.Draw({
source: new ol.source.Vector({wrapX: false}),
type: 'Circle', // type of draw
features: drawingFeatures // features where to store drawings
});
最后, 听众开始/停止绘制交互 :
var drawingFlag = false; // flag for start drawing
document.addEventListener('keydown', function(e) {
// the key code of the key we must hit to draw features
// CTRL = 17
// Note that SHIFT key is already used for zooming area by default
var keyCode = 17;
if (e.keyCode === keyCode) { // if its the good keycode
if(drawingFlag === false) {
//console.info("Start drawing");
draw.setActive(true); // activate draw
map.addInteraction(draw); // add interaction draw
drawingFlag = true; // start drawing flag
}
else {
//console.info("Stop drawing");
draw.setActive(false); // deactivate draw
map.removeInteraction(draw);// remove interaction draw
drawingFlag = false; // stop drawing flag
}
}
});
这对我来说很棒!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.