Javascript OpenLayers3:需要移动鼠标滚轮才能在地图上进行缩放

Javascript OpenLayers3:需要移动鼠标滚轮才能在地图上进行缩放,javascript,openlayers-3,zooming,Javascript,Openlayers 3,Zooming,我试图在OpenLayers地图上使用鼠标滚轮禁用缩放。仅当按住Shift键时才允许缩放。根据[1]所述,这可以通过以下方式轻松实现: var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], target: 'map', view: new ol.Vi

我试图在OpenLayers地图上使用鼠标滚轮禁用缩放。仅当按住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)
因为我不确定它是否相关,但我也在网站上使用libs jQuery和jQueryUI


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