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キーを押したときに動作しますが、私はドロー機能を有効にするには、シフトキーの押下を検出するためのコードを変更した場合正常に動作しません。

私は何かが間違っていると思います。 Ctrlキーを押しても機能しないが、シフト機能がうまく動作する理由を教えてください。ありがとうございました。

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

がこれはこれで私のために素晴らしい作品を！