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

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();

touchPitch

TouchPitchHandler， 使用触摸手势俯仰地图

new TouchPitchHandler(map: Map)