Jinuss's blog Jinuss's blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

东流

前端可视化
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • React

  • Vue

  • JavaScript文章

  • 学习笔记

  • openlayers

    • Openlayers用图片填充面
    • Openlayers用图片填充线
    • openlayers处理大量Overlay渲染问题
    • openlayers的比例尺
    • openlayers水印
    • openlayer实现矢量图层点击高亮效果
    • openlayers实现自定义路径
    • Openlayers加载渲染矢量切片
    • openlayers实现角度测量
    • openlayers实现长度测量
    • openlayers实现面积测量
    • Openlayers实现方位角测量
    • Openlayers中的动画
    • Openlayers的多边形高级交互
    • Openlayers地图底图换色
    • Openlayers种的默认交互事件
      • Openlayers默认键盘交互实现
      • 源码分析之Openlayers中默认键盘事件触发机制
      • 源码分析之Openlayers中的Collection类
    • threejs

    • MapboxGL

    • 工具

    • 源码合集

    • 前端
    • openlayers
    东流
    2024-11-26
    目录

    Openlayers种的默认交互事件

    # 概述

    Openlayers 地图默认9种默认的交互功能,如键盘方向键控制地图移动方向和偏移大小,还有鼠标配合键盘按键地图缩放旋转等,这些功能也可以通过配置选项进行禁用。

    # 功能

    Openlayers 默认的交互功能可以在ol/interaction/default中进行配置,其用法如下:

    import Map from "ol/Map";
    import { defaults } from "ol/interaction";
    
    const DefaultsOptions = {};
    const map = new Map({
      /*..其它选项配置..*/
      interactions: defaults(DefaultsOptions),
    });
    
    1
    2
    3
    4
    5
    6
    7
    8

    如果上述defaults()没有传参,DefaultsOptions在 Openlayers 中默认就会视作一个空对象{},如此 Openlayers 将通过三元运算判断,采用默认行为。

    # DefaultsOptions 选项参数

    对应9种交互行为,DefaultsOptions有11种属性,如下表:

    属性 类型以及默认值 描述 interaction类 文章地址
    altShiftDragRotate 布尔值:true 是否启用Alt+Shift拖拽地图进行旋转 DragRotate()
    onFocusOnly 布尔值:false 仅参数,仅当地图具有焦点时才进行交互,对DragPan和MouseWheelZoom类交互有影响是它们的参数之一 无
    doubleClickZoom 布尔值:true 是否启用双击地图缩放 DoubleClickZoom({delta: zoomDelta,duration: zoomDuration})
    keyboard 布尔值:true 是否启用键盘控制,方向键和+/-按键 KeyboardPan 和KeyboardZoom({delta:zoomDelta,zoomDuration})
    mouseWheelZoom 布尔值:true 是否启用鼠标滚轮缩放 MouseWheelZoom({onFocusOnly:onFocusOnly,duration:zoomDuration,})
    shiftDragZoom 布尔值:true 是否启用Shift缩放地图 DragZoom({duration: zoomDuration})
    dragPan 布尔值:true 是否可以拖动地图 DragPan({onFocusOnly: options.onFocusOnly,kinetic: kinetic,}
    pinchRotate 布尔值:true 用于触摸设备,是否启用手指控制地图旋转 PinchRotate()
    pinchZoom 布尔值:true 用于触摸设备,是否启用手指控制地图缩放 PinchZoom({duration:zoomDuration,})
    zoomDelta 数值或者undefined 仅参数,缩放地图时的增量 无
    zoomDuration 数值或者undefined 仅参数,缩放地图动画的持续时长 单位毫秒 无

    # 总结

    Openlayers 中默认的地图交互行为总共有9种,主要分为两类:非触摸设备交互7种和触摸设备2种,涉及的交互行为就是鼠标和键盘的操作控制地图的旋转角度和缩放。

    编辑 (opens new window)
    上次更新: 2024/11/28, 09:48:32
    Openlayers地图底图换色
    Openlayers默认键盘交互实现

    ← Openlayers地图底图换色 Openlayers默认键盘交互实现→

    最近更新
    01
    GeoJSON
    05-08
    02
    Circle
    04-15
    03
    CircleMarker
    04-15
    更多文章>
    Theme by Vdoing | Copyright © 2024-2025 东流 | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式