Javascript OpenLayers3:需要移动鼠标滚轮才能在地图上进行缩放
我试图在OpenLayers地图上使用鼠标滚轮禁用缩放。仅当按住Shift键时才允许缩放。根据[1]所述,这可以通过以下方式轻松实现: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
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));
});