通過在Openlayers中按住Ctrl來啟用圖形功能

Question

我試圖添加一個功能，當按住“ 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可以正常工作嗎？ 謝謝。

Answer 1

我找到了解決方案。 它並不是您真正想要的，但它確實接近您的需求。

我如何繞過您的問題：

如果您想按住控制鍵進行繪制，這對我也不起作用。 交互似乎有效，但實際上沒有繪圖發生。

但是，如果您使用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
        }
    }
});

這對我來說很棒！