繁体   English   中英

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

[英]Enable drawing features by keeping pressing ctrl in Openlayers

我试图添加一个功能,当按住“ 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 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
        }
    }
});

这对我来说很棒!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM