Javascript 通过在Openlayers中按住ctrl键来启用图形特征

我正在尝试添加一个函数，在按住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 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
        }
    }
});

这是存储图形特征的特征层/集合

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 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 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
        }
    }
});

最后，侦听器启动/停止绘图交互：

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 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
        }
    }
});

这对我来说太好了