Включить функции рисования, удерживая нажатие ctrl в Openlayers

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 keypress, чтобы включить функцию draw.

Я думаю, что я должен что-то пропустить. Не могли бы вы рассказать мне, почему нажатие ctrl не работает, но смена работает нормально? Спасибо.

Answer 1

Я нашел решение. Это НЕ ТОЧНО, что вы хотите, но это действительно то, что вам нужно.

Как я обойти проблему:

Если вы хотите держать клавишу управления для рисования она не работает для меня тоже. Взаимодействие, похоже, работает, но на самом деле никакого рисунка не происходит.

Но если вы используете CTRL-ключ как Google. Я имею в виду, если вы нажмете один раз для начала рисования, нарисуйте фигуры, а затем снова нажмите клавишу 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 
     } 
    } 
}); 

Он отлично работает для меня с этим!