Openlayers种的默认交互事件
# 概述
Openlayers 地图默认9种默认的交互功能,如键盘方向键控制地图移动方向和偏移大小,还有鼠标配合键盘按键地图缩放旋转等,这些功能也可以通过配置选项进行禁用。
# 功能
Openlayers 默认的交互功能可以在ol/interaction/default
中进行配置,其用法如下:
import Map from "ol/Map";
import { defaults } from "ol/interaction";
const DefaultsOptions = {};
const map = new Map({
/*..其它选项配置..*/
interactions: defaults(DefaultsOptions),
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
如果上述defaults()
没有传参,DefaultsOptions
在 Openlayers 中默认就会视作一个空对象{}
,如此 Openlayers 将通过三元运算判断,采用默认行为。
# DefaultsOptions
选项参数
对应9种交互行为,DefaultsOptions
有11种属性,如下表:
属性 | 类型以及默认值 | 描述 | interaction 类 | 文章地址 |
---|---|---|---|---|
altShiftDragRotate | 布尔值:true | 是否启用Alt+Shift 拖拽地图进行旋转 | DragRotate() | |
onFocusOnly | 布尔值:false | 仅参数,仅当地图具有焦点时才进行交互,对DragPan 和MouseWheelZoom 类交互有影响是它们的参数之一 | 无 | |
doubleClickZoom | 布尔值:true | 是否启用双击地图缩放 | DoubleClickZoom({delta: zoomDelta,duration: zoomDuration}) | |
keyboard | 布尔值:true | 是否启用键盘控制,方向键和+ /- 按键 | KeyboardPan 和KeyboardZoom({delta:zoomDelta,zoomDuration}) | |
mouseWheelZoom | 布尔值:true | 是否启用鼠标滚轮缩放 | MouseWheelZoom({onFocusOnly:onFocusOnly,duration:zoomDuration,}) | |
shiftDragZoom | 布尔值:true | 是否启用Shift 缩放地图 | DragZoom({duration: zoomDuration}) | |
dragPan | 布尔值:true | 是否可以拖动地图 | DragPan({onFocusOnly: options.onFocusOnly,kinetic: kinetic,} | |
pinchRotate | 布尔值:true | 用于触摸设备,是否启用手指控制地图旋转 | PinchRotate() | |
pinchZoom | 布尔值:true | 用于触摸设备,是否启用手指控制地图缩放 | PinchZoom({duration:zoomDuration,}) | |
zoomDelta | 数值或者undefined | 仅参数,缩放地图时的增量 | 无 | |
zoomDuration | 数值或者undefined | 仅参数,缩放地图动画的持续时长 单位毫秒 | 无 |
# 总结
Openlayers 中默认的地图交互行为总共有9种,主要分为两类:非触摸设备交互7种和触摸设备2种,涉及的交互行为就是鼠标和键盘的操作控制地图的旋转角度和缩放。
编辑 (opens new window)
上次更新: 2024/11/28, 09:48:32