通过在Openlayers中按住Ctrl来启用图形功能

Question

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.

Answer 1

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!