如何将MouseWheelZoom限制为仅在openlayers3中按下Shift键时适用 [英] How to limit MouseWheelZoom to only apply while shift key is pressed in openlayers3

问题描述

我希望mouseWheelZoom仅在按下Shift键的同时缩放地图. 但是ol.interaction.MouseWheelZoom选项不包含条件.但是有一个handleEvent()方法.

I want mouseWheelZoom to only zoom the map while the shift key is pressed. But ol.interaction.MouseWheelZoom options does not include a condition. There is a handleEvent() method however.

我看到，如果仅按下Shift键，则ol.events.condition.shiftKeyOnly(mapBrowserEvent)返回true.

I can see that ol.events.condition.shiftKeyOnly(mapBrowserEvent) returns true if only the shift-key is pressed.

那我该如何覆盖handleEvent()方法?

So how can I override the handleEvent() method?

使用打字稿:

export class ShiftMouseWheelInteraction extends  ol.interaction.MouseWheelZoom {

   public handleEvent = function(evt){
        if (ol.events.condition.shiftKeyOnly(evt) === true) {
            return  ol.interaction.MouseWheelZoom.handleEvent(evt);
        }
        else {
            return false;
        }
    }
}

然后，我将此交互添加到地图，并启用MouseWheelZoom作为默认交互.

Then I add add this interaction to the map and enable MouseWheelZoom as a default interaction.

  this.map = new ol.Map({
        layers: layers,
        interactions: ol.interaction.defaults({
          mouseWheelZoom: true
        })
    });
  this.map.addInteraction(shiftMouseWheelInteraction);

但是它不缩放地图吗?

ol.interaction.MouseWheelZoom扩展了ol.interaction

ol.interaction.MouseWheelZoom extends ol.interaction

基本交互构造函数具有handleEvent选项，但子类不允许将此参数传递给基本交互.

The base interaction constructor has a handleEvent option but the subclass does not allow passing this parameter to the base interaction.

ol.interaction.MouseWheelZoom = function(opt_options) {

  ol.interaction.Interaction.call(this, {
    handleEvent: ol.interaction.MouseWheelZoom.handleEvent
  });

推荐答案

我使用防止默认行为的事件侦听器解决了此问题.

I solved this using an event listener that prevents the default behaviour.

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

这篇关于如何将MouseWheelZoom限制为仅在openlayers3中按下Shift键时适用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！