openlayers [六] 地图交互 interaction 详解

发布时间:2024年01月18日

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 + 鼠标拖拽进行缩放和旋转地图)

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


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

结论

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

文章来源:https://blog.csdn.net/qq_45815947/article/details/135673144
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。