【Mapbox GL JS 入门】（6）User interaction handlers 用户交互

翻译已于 2022-12-05 11:23:21 修改 · 405 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://docs.mapbox.com/mapbox-gl-js/api/map/

文章标签：

#javascript #交互 #开发语言

于 2022-11-23 17:45:53 首次发布

本文详细介绍地图应用程序中各种交互控制方式的使用方法，包括滚轮缩放、框选缩放、拖动旋转、拖动平移等功能，并介绍了如何通过键盘快捷键进行地图操作。

scrollZoom

ScrollZoomHandler，使用滚轮或触控板实现放大和缩小

// Speed up trackpad zoom
map.scrollZoom.setZoomRate(1 / 25);
// Slow down zoom of mouse wheel
map.scrollZoom.setWheelZoomRate(1 / 600);
const isScrollZoomEnabled = map.scrollZoom.isEnabled();
map.scrollZoom.enable();
map.scrollZoom.enable({around: 'center'});
map.scrollZoom.disable();

boxZoom

BoxZoomHandler，按下Shift键时使用拖动手势缩放

const isBoxZoomEnabled = map.boxZoom.isEnabled();
const isBoxZoomActive = map.boxZoom.isActive();
map.boxZoom.enable();
map.boxZoom.disable();

dragRotate

DragRotateHandler，使用鼠标右键或按下控制键拖动时旋转地图

map.dragRotate.enable();
map.dragRotate.disable();
const isDragRotateEnabled = map.dragRotate.isEnabled();
const isDragRotateActive = map.dragRotate.isActive();

dragPan

DragPanHandler，用鼠标或触摸手势拖动地图

map.dragPan.enable();
map.dragPan.enable({
    linearity: 0.3,
    easing: t => t,
    maxSpeed: 1400,
    deceleration: 2500
});
map.dragPan.disable();
const isDragPanEnabled = map.dragPan.isEnabled();
const isDragPanActive = map.dragPan.isActive();

keyboard

KeyboardHandler，允许用户使用键盘快捷键缩放、旋转和平移地图

= / +: 缩放级别+1.
Shift-= / Shift-+: 缩放级别+2.
-: 缩放级别-1.
Shift–: 缩放级别-2.
Arrow keys: 平移100像素.
Shift+⇢: 逆时针旋转15°.
Shift+⇠: 顺时针旋转15°.
Shift+⇡: 仰角+10°.
Shift+⇣: 俯角+10°.

map.keyboard.enable();
map.keyboard.disable();
const isKeyboardEnabled = map.keyboard.isEnabled();
const isKeyboardActive = map.keyboard.isActive();
map.keyboard.disableRotation();
map.keyboard.enable();
map.keyboard.enableRotation();

doubleClickZoom

DoubleClickZoomHandler，双击缩放

map.doubleClickZoom.enable();
map.doubleClickZoom.disable();
const isDoubleClickZoomEnabled = map.doubleClickZoom.isEnabled();
const isDoubleClickZoomActive = map.doubleClickZoom.isActive();

touchZoomRotate

TouchZoomRotateHandler，使用触摸手势缩放、旋转地图

map.touchZoomRotate.enable();
map.touchZoomRotate.enable({around: 'center'});
map.touchZoomRotate.disable();
const isTouchZoomRotateEnabled = map.touchZoomRotate.isEnabled();
const isTouchZoomRotateActive = map.touchZoomRotate.isActive();
map.touchZoomRotate.disableRotation();
map.touchZoomRotate.enable();
map.touchZoomRotate.enableRotation();