Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
297 views
in Technique[技术] by (71.8m points)

openlayers 3 - How to limit MouseWheelZoom to only apply while shift key is pressed in openlayers3

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.

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

So how can I override the handleEvent() method?

using typescript:

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

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

But it is not zooming the map?

ol.interaction.MouseWheelZoom extends ol.interaction

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
  });
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...