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不起作用但转换工作正常吗？谢谢。

Answer 1

我找到了解决方案。它并不完全是你想要的，但它非常接近你的需要。

我如何绕过你的问题：

如果你想拿着控制键进行绘图，它也不适用于我。这种互动似乎有效，但实际上并没有画画。

但如果您使用CTRL键作为toogle。我的意思是如果你按一次开始绘图，画出你的形状然后再按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
        }
    }
});

这对我很有用！

通过在Openlayers中按ctrl来启用绘图功能

1 个答案: