当前位置：首页 > article >正文

源码分析Openlayers默认键盘交互实现

article 2024/11/29 6:20:57

概述

本文主要分析 Openlayers 中用户交互类ol/interaction中KeyboardPan和KeyboardZoom的源码实现。两者都是 Openlayer 地图中默认提供的功能，都和键盘控制地图有关。

`KeyboardPan`

KeyboardPan类继承了Interaction类，关于Interaction类后面会讲到，简单将它理解成 Openlayers 中的交互基类就行。

参数

KeyboardPan的参数是一个对象，包含三个属性如下

condition:函数，接收mapBrowserEvent作为参数，返回一个布尔值，返回true则表示应该处理该事件，否则不处理,默认是noModifierKeys和targetNotEditable
duration：动画持续时长，单位毫秒，默认是100(ms)
pixelDelta：步长，每按键一次，地图移动的像素，默认是128(px)

核心实现

KeyboardPan的核心代码实现如下：

  handleEvent(mapBrowserEvent) {
   
    let stopEvent = false;
    if (mapBrowserEvent.type == EventType.KEYDOWN) {
   
      const keyEvent = /** @type {KeyboardEvent} */ (
        mapBrowserEvent.originalEvent
      );
      const key = keyEvent.key;
      if (
        this.condition_(mapBrowserEvent) &&
        (key == Key.DOWN ||
          key == Key.LEFT ||
          key == Key.RIGHT ||
          key == Key.UP)
      ) {
   
        const map = mapBrowserEvent.map;
        const view = map.getView();
        const mapUnitsDelta = view.getResolution() * this.pixelDelta_;
        let deltaX = 0,
          deltaY = 0;
        if (key == Key.DOWN) {
   
          deltaY = -mapUnitsDelta;
        } else if (key == Key.LEFT) {
   
          deltaX = -mapUnitsDelta;
        } else if (key == Key.RIGHT) {
   
          deltaX = mapUnitsDelta;
        }