javascript - OpenLayers3 : Require Shift for mouse wheel zoom on map

Question

我试图在 OpenLayers map 上使用鼠标滚轮禁用缩放。只有在按住 Shift 键时才允许缩放。根据 [1] 这可以很容易地完成

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vectorLayer
    ],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 13
    })
});

map.on('wheel', function (event) {
   if (ol.events.condition.shiftKeyOnly(event) !== true) 
      event.browserEvent.preventDefault();
});

虽然它实现了预期的行为，但我在 JavaScript 控制台上收到了许多未捕获的异常。因此我认为这不是一个好的解决方案。

Uncaught TypeError: Cannot read property 'preventDefault' of undefined
    at K.<anonymous> (main.js:240)
    at K.b (ol.js:46)
    at K.Sc.b (ol.js:49)
    at K.k.bi (ol.js:129)
    at K.k.yd (ol.js:129)
    at HTMLDivElement.b (ol.js:46)

检查 event.browserEvent 和 event.browser 表明如果 wheel 事件被触发，两者都是未定义的。

我 try catch 异常并默默地接受它，如下所示。令人费解的是，这在控制台上显示了 exception 消息，但不再显示相同的行为 - 现在缩放也可以在不按住 Shift 键的情况下进行。

map.on('wheel', function (event) {
    if (ol.events.condition.shiftKeyOnly(event) !== true) {
        try {
            event.browserEvent.preventDefault();
        } catch(e) {
            console.log("exception.");
        }
    }
});

因为我不确定它是否相关，但我也在网站上使用库 jQuery 和 jQueryUI。

[1] https://stackoverflow.com/a/47563819/478545

Answer 1

尝试以下代码片段，应该可以完成工作。查看我的代码注释以获取解释。

var map = new ol.Map({
//disable the default mousewheel interaction
interactions: ol.interaction.defaults({mouseWheelZoom:false}),
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: [-13553864, 5918250],
    zoom: 4
  })
});
//create globaly a mouse wheel interaction and add it to the map 
var mouseWheelInt = new ol.interaction.MouseWheelZoom();
map.addInteraction(mouseWheelInt);


//now asign a function to the wheel event
//and finally toggle the activity of your inetraction 
//depending on the event shift key state
map.on('wheel', function(evt) {
   mouseWheelInt.setActive(ol.events.condition.shiftKeyOnly(evt));
});