I'm trying to add a function that enabling drawing function when keeping pressing 'ctrl', eg, a circle.
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)
}
})
This does not work when I press ctrl, but works fine if I modify the code to detect shift keypress to enable draw function.
I think I must miss something. Could you tell me why pressing ctrl doesn't work but shift works fine? Thank you.
I found a solution. It's not EXACTLY what you want but its really near what you need.
How i bypass your problem:
If you want to hold control key for drawing it doesn't work for me too. The interaction seems to work but in fact no drawing happens.
But if you use CTRL key as a toogle. I mean if you press one time for starting drawing, draw your shapes and then press again CTRL key to stop it, then i can do it for you.
You can do it with the following codes:
Here is the map code :
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
})
});
Here is the features layer/collection where we stored the drawing features
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
Here is the drawing interaction :
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
});
And finally the listener wich start/stop the draw interaction :
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
}
}
});
It works great for me with this!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.