用户交互(Interaction)
Handlers 为地图提供了多种交互功能 - 鼠标交互,触摸交互,以及其他手势交互功能。
BoxZoomHandler
允许用户将地图缩放到适合限位框的大小。 可以通过按住 shift 键并拖动光标定义限位框。
实例成员
disable
禁用 "box zoom" 功能。
案例
map.boxZoom.disable();
enable
开启 "box zoom" 功能。
案例
map.boxZoom.enable();
isActive
返回一个布尔值,该布尔值表示 "box zoom" 交互是否处于活动状态 (即当前是否正在使用)。
案例
const isBoxZoomActive = map.boxZoom.isActive();
isEnabled
返回一个布尔值,该布尔值表示 "box zoom" 交互是否被开启。
案例
const isBoxZoomEnabled = map.boxZoom.isEnabled();
DragPanHandler
允许用户通过点击并且拖拽光标来平移地图。
实例成员
disable
禁用 “拖拽平移” 交互功能。
案例
map.dragPan.disable();
enable
开启 “拖拽平移” 交互功能。
案例
map.dragPan.enable();
isActive
返回一个布尔值,该布尔值表示 “拖拽平移” 交互功能是否处于活动状态 (即当前是否正在使用)。
案例
const isDragPanActive = map.dragPan.isActive();
isEnabled
返回一个布尔值,该布尔值表示 “拖拽平移” 交互功能是否被开启。
案例
const isDragPanEnabled = map.dragPan.isEnabled();
DragRotateHandler
允许用户通过按住鼠标右键并拖拽光标来旋转地图,或按下 ctrl 键并拖拽光标来旋转地图。
实例成员
disable
禁用 “拖拽旋转” 交互功能。
案例
map.dragRotate.disable();
enable
开启 “拖拽旋转” 交互功能。
案例
map.dragRotate.enable();
isActive
返回一个布尔值,该布尔值表示 “拖拽旋转” 交互功能是否处于活动状态 (即当前是否正在使用)。
案例
const isDragRotateActive = map.dragRotate.isActive();
isEnabled
返回一个布尔值,该布尔值表示 “拖拽旋转” 交互功能是否被开启。
案例
const isDragRotateEnabled = map.dragRotate.isEnabled();
DoubleClickZoomHandler
允许用户通过在地图上双击缩放地图。
实例成员
disable
禁用 “双击缩放” 交互功能。
案例
map.doubleClickZoom.disable();
enable
开启 “双击缩放” 交互功能。
案例
map.doubleClickZoom.enable();
isActive
返回一个布尔值,该布尔值表示 “双击缩放” 交互功能是否处于活动状态 (即当前是否正在使用)。
案例
const isDoubleClickZoomActive = map.doubleClickZoom.isActive();
isEnabled
返回一个布尔值,该布尔值表明 “双击缩放” 交互功能是否被开启。
案例
const isDoubleClickZoomEnabled = map.doubleClickZoom.isEnabled();
KeyboardHandler
允许用户使用下列键盘快捷键对地图进行缩放、旋转以及平移:
- = / +:缩放级别增加 1 级。
- Shift-= / Shift-+:缩放级别增加 2 级。
- -:缩放级别减小 1 级。
- Shift--:缩放级别减小 2 级。
- Arrow keys:平移 100 像素。
- Shift+⇢:增加 15 度旋转。
- Shift+⇠:减少 15 度旋转。
- Shift+⇡:增加 10 度倾斜角。
- Shift+⇣:减少 10 度倾斜角。
实例成员
disable
禁用键盘交互功能。
案例
map.keyboard.disable();
enable
开启键盘交互功能。
案例
map.keyboard.enable();
isEnabled
返回一个布尔值,该布尔值表示键盘交互功能是否被开启。
案例
const isKeyboardEnabled = map.keyboard.isEnabled();
ScrollZoomHandler
允许用户通过滚动来缩放地图。
实例成员
disable
禁用 “滚动缩放” 交互功能。
案例
map.scrollZoom.disable();
enable
开启 “滚动缩放” 交互功能。
参数
名称 | 类型 | 描述 | ||||||
---|---|---|---|---|---|---|---|---|
options | Object | 必填参数
|
案例
map.scrollZoom.enable();
map.scrollZoom.enable({ around:'center'});
isEnabled
返回一个布尔值,该布尔值表示 “滚动缩放” 交互是否被开启。
案例
const isScrollZoomEnabled = map.scrollZoom.isEnabled();
setWheelZoomRate
设置滚动的缩放比例。
参数
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
wheelZoomRate | Number | 1/450 | 必填滚动的缩放比例。 |
案例
// 减慢鼠标滚动的缩放
map.scrollZoom.setWheelZoomRate(1 / 600);
setZoomRate
设置触摸板的缩放比例。
参数
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
zoomRate | Number | 1/100 | 必填触摸板的缩放比例。 |
案例
// 加速触摸板的缩放
map.scrollZoom.setZoomRate(1 / 25);
TouchZoomRotateHandler
允许用户通过捏合触摸屏来缩放和旋转地图。
实例成员
disable
禁用 "捏合旋转和缩放" 交互功能。
案例
map.touchZoomRotate.disable();
disableRotation
禁用 "捏合旋转" 交互功能, 同时开启 "捏合缩放" 交互功能。
案例
map.touchZoomRotate.disableRotation();
enable
开启 "捏合旋转和缩放" 交互功能。
参数
名称 | 类型 | 描述 | ||||||
---|---|---|---|---|---|---|---|---|
options | Object | 必填参数
|
案例
map.touchZoomRotate.enable();
map.touchZoomRotate.enable({ around: 'center' });
enableRotation
开启 "捏合旋转" 交互功能。
案例
map.touchZoomRotate.enable();
map.touchZoomRotate.enableRotation();
isEnabled
返回布尔值,该布尔值表示 "捏合旋转和缩放" 交互功能是否被开启。
案例
const isTouchZoomRotateEnabled = map.touchZoomRotate.isEnabled();