Question

我希望mouseWheelZoom仅在按下shift键时缩放地图。但是ol.interaction.MouseWheelZoom选项不包含条件。但是有一个handleEvent（）方法。

我可以看到，如果只按下shift键，ol.events.condition.shiftKeyOnly（mapBrowserEvent）将返回true。

那么如何覆盖handleEvent（）方法？

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

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

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

但它不是缩放地图吗？

ol.interaction.MouseWheelZoom扩展了ol.interaction

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

ol.interaction.MouseWheelZoom = function(opt_options) {

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

Answer 1

我使用阻止默认行为的事件侦听器解决了这个问题。

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

如何限制MouseWheelZoom仅在openlayers3

1 个答案: