openlayers [六] 地图交互 interaction 详解

文章目录

- [interaction 是什么](#interaction 是什么)
- [interaction 简介](#interaction 简介)
- [interaction defaults- 默认添加的功能](#interaction defaults- 默认添加的功能)
- 举例
- 结论

interaction 是什么

地图的交互功能包含很多，如地图双击放大，鼠标滚轮缩放，矢量要素点选，地图上绘制图形等等。只要是涉及到与地图的交互，就会涉及到 intercation 类，它定义了用户与地图进行交互的基本要素和事件。

interaction 简介

在 OpenLayers 6 中，表达交互功能的基类是 interaction，它是一个虚基类，不负责实例化，交互功能都继承该基类， OpenLayers 6 中可实例化的子类及其功能如下：

doubleclickzoom ，双击放大交互功能；
draganddrop ，以"拖文件到地图中"的交互添加图层；
dragbox，拉框，用于划定一个矩形范围，常用于放大地图；
dragpan ，拖拽平移地图；
dragrotateandzoom，拖拽方式进行缩放和旋转地图；
dragrotate ，拖拽方式旋转地图；
dragzoom ，拖拽方式缩放地图；
draw，绘制地理要素功能；
keyboardpan ，键盘方式平移地图；
keyboardzoom ，键盘方式缩放地图；
select，选择要素功能；
modify ，更改要素；
mousewheelzoom ，鼠标滚轮缩放功能；
pinchrotate，手指旋转地图，针对触摸屏；
pinchzoom ，手指进行缩放，针对触摸屏；
pointer ，鼠标的用户自定义事件基类；
snap，鼠标捕捉，当鼠标距离某个要素一定距离之内，自动吸附到要素。
interaction defaults ，规定了默认添加的交互功能；

interaction defaults- 默认添加的功能

该类规定了默认包含在地图中的功能，他们都是继承自 ol.interaction 类。主要是最为常用的功能，如缩放、平移和旋转地图等，具体功能有如下这些：

altShiftDragRotate 是否需要Alt-Shift-拖动旋转（布尔值：默认为true）
doubleClickZoom 是否鼠标或手指双击缩放地图（布尔值：默认为true）
keyboard 是否需要键盘交互（布尔值：默认为true）
mouseWheelZoom 是否鼠标滚轮缩放地图。布尔值（默认为true）
shiftDragZoom 是否需要Shift拖动缩放（布尔值：默认为true）。
dragPan 是否鼠标或手指拖拽平移地图（布尔值：默认为true）
pinchRotate 是否两个手指旋转地图，针对触摸屏（布尔值：默认为true）
pinchZoom 是否两个手指旋转地图，针对触摸屏（布尔值：默认为true）
zoomDelta 使用键盘或双击缩放时的缩放级别增量。（数）
zoomDuration 缩放动画的持续时间（数：以毫秒为单位）
onFocusOnly 仅在地图具有焦点时进行交互。这会影响MouseWheelZoom和的DragPan相互作用，并且在没有浏览器焦点的地图需要页面滚动时很有用（布尔值：默认为false）

举例

dragrotateandzoom (shift + 鼠标拖拽进行缩放和旋转地图)

javascript 复制代码

import {
    defaults as defaultInteractions,
    DragRotateAndZoom
} from "ol/interaction";


map.value = new Map({
    target: target,
    layers: tileLayer,
    view: view,
    interactions: defaultInteractions().extend([
        new DragRotateAndZoom()
    ])
});

结论

地图交互功能内容实在是太多了，包括键盘事件，鼠标事件，拖拽，平移，缩放等一些基本的交互动作，还有后面会写到的测距，测面，通过draw 绘制，选择要素 select ，modify ，铺捉吸附的 snap 和鼠标自定义事件 pointer 都构成了openlayers 更加强大的交互功能系统，提升更优的用户体验。