Drag and drop interaction in OpenLayers 3 on Linux

I would like to use OpenLayers 3 rotation interaction in a Linux browser. This allows you to rotate the map by dragging it while pressing Alt and Ctrl. This works fine on Windows, but not on Redhat 6u2 and most likely on other distributions, as the Alt key is reserved for the Windows window behavior with X-Windows.

First, I set up DragRotate with ol.events.condition.shiftKeyOnly

, which worked, but ran into the scaling functionality, i.e. drew a blue zoom box while rotating.

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    target: 'map',
    view: new ol.View({
        center: [-25860000, 4130000],
        zoom: 10
    }),
    interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
        condition: ol.events.condition.shiftKeyOnly
    })])
});

      

I would like to keep the shift-shift for the zoom window and use a different key / combination, perhaps "R + Shift"? I tried to customize the condition. See my JSFiddle

var customCondition = function(mapBrowserEvent) {
   return false; // TODO
};

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    target: 'map',
    view: new ol.View({
        center: [-25860000, 4130000],
        zoom: 10
    }),
    interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
        condition: customCondition
    })])
});

      

I can't find anything in the API about using custom conditions other than ol.events and MapBrowserEvent . Using the debugger, I cannot find any attributes in the structure or the nested original that contains the keycode, etc.

  • How can I implement a customCondition function to detect when a given key is pressed while dragging?
  • Is there another way to implement pivot that works in Linux.
+3


source to share


1 answer


Here is a custom condition - Ctrl + Shift:



ol.events.condition.custom = function(mapBrowserEvent) {
    var browserEvent = mapBrowserEvent.originalEvent;
    return (browserEvent.ctrlKey && browserEvent.shiftKey);
};

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    target: 'map',
    view: new ol.View({
        center: [-25860000, 4130000],
        zoom: 10
    }),
    interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
        condition: ol.events.condition.custom
    })])
});

      

+2


source







All Articles