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事件被触发，两者都是未定义的。

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

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

由于我不确定它是否相关，但我也在网站上使用libs 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));
});

OpenLayers3：要求在地图上移动鼠标滚轮

1 个答案: