openlayers [六] 地图交互 interaction 详解

文章目录

    • interaction 是什么
    • interaction 简介
    • 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 + 鼠标拖拽进行缩放和旋转地图)

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 更加强大的交互功能系统,提升更优的用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/633508.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VsCode + CMake构建项目 C/C++连接Mysql数据库 | 数据库增删改查C++封装 | 信息管理系统通用代码 ---- 课程笔记

这个是B站Up主:程序员程子青的视频 C封装Mysql增删改查操作_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1m24y1a79o/?p6&spm_id_frompageDriver&vd_sourcea934d7fc6f47698a29dac90a922ba5a3安装mysql:mysql 下载和安装和修改MYSQL8.0 数据库存储…

7、Python使用外部库

导入、运算符重载以及冒险进入外部库世界的生存技巧! 在本教程中,您将了解 Python 中的Imports,获得一些使用不熟悉的库(以及它们返回的对象)的技巧,并深入研究运算符重载。 文章目录 1.导入(Imports)其他导入语法子模块哦,你将去的地方,哦,你将看到的对象了解奇怪对象…

【现代密码学】笔记9-10.3-- 公钥(非对称加密)、混合加密理论《introduction to modern cryphtography》

【现代密码学】笔记9-10.3-- 公钥(非对称加密)、混合加密理论《introduction to modern cryphtography》 写在最前面8.1 公钥加密理论随机预言机模型(Random Oracle Model,ROM) 写在最前面 主要在 哈工大密码学课程 张…

深入vue响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。 这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue …

Docker 47 个常见故障的原因和解决方法

本文针对Docker容器部署、维护过程中,产生的问题和故障,做出有针对性的说明和解决方案,希望可以帮助到大家去快速定位和解决类似问题故障。 Docker是一种相对使用较简单的容器,我们可以通过以下几种方式获取信息: 1、…

简单理解自动驾驶-看这篇够了!

本文主要介绍自动驾驶技术的整体框架,旨在从宏观理解自动驾驶技术。 🎬个人简介:一个全栈工程师的升级之路! 📋个人专栏:自动驾驶技术 🎀CSDN主页 发狂的小花 🌄人生秘诀&#xff1a…

第6章 现代通信技术

文章目录 6.1 图像与多媒体通信6.1.1 图像通信6.1.2 多媒体通信技术1、多媒体通信概念2、多媒体通信的组成3、多媒体通信的业务分类4、实用化的多媒体通信系统类型5、多媒体通信应用系统(1)多媒体会议电视系统(2)IPTV 6.2 移动通信…

【机器学习300问】12、为什么要进行特征归一化?

当线性回归模型的特征量变多之后,会出现不同的特征量,然而对于那些同是数值型的特征量为什么要做归一化处理呢? 一、为了消除数据特征之间的量纲影响 使得不同指标之间具有可比性。例如,分析一个人的身高和体重对健康的影响&…

每日一题——LeetCode1252.奇数值单元格的数目

进阶:你可以设计一个时间复杂度为 O(n m indices.length) 且仅用 O(n m) 额外空间的算法来解决此问题吗? 方法一 直接模拟: 创建一个n x m的矩阵,初始化所有元素为0,对于indices中的每一对[ri,ci],将矩…

多色女童家居服,柔软细腻超舒适

柔软细腻到不想脱下来的 优可丝面料家居服来啦 精挑细选的可爱印花图案 让宝贝能够更快乐的进入梦乡 长度也是刚刚好合适 春夏交替的季节,建议多入几件换着穿

【新书推荐】Web3.0应用开发实战(从Web 2.0到Web 3.0)

第一部分 Flask简介 第1章 安装 1.1 创建应用目录 1.2 虚拟环境 1.2.1 创建虚拟环境 1.2.2 使用虚拟环境 1.3 使用pip安装Python包 1.4 使用pipregs输出包 1.5 使用requirements.txt 1.6 使用pipenv管理包 第2章 应用的基本结构 2.1 网页显示过程 2.2 初始化 2.3 路由和视图函数…

【C语言基础考研向】06运算符与表达式

文章目录 1.运算符分类 2.算术运算符及表达式 3.关系运算符与关系表达式 4.c语言运算级优先级表 课后习题自测 1.运算符分类 语言提供了13种类型的运算符,如下所示. (1)算术运算符( - * / %) . (2)关系运算符(>< >< l) . (3)逻辑运算符(l && ll) . (4)位…

一文了解【完全合作关系】下的【多智能体强化学习】

处于完全合作关系的多智能体的利益一致&#xff0c;获得的奖励相同&#xff0c;有共同的目标。比如多个工业机器人协同装配汽车&#xff0c;他们的目标是相同的&#xff0c;都希望把汽车装好。 在多智能体系统中&#xff0c;一个智能体未必能观测到全局状态 S。设第 i 号智能体…

c语言:用一个宏,可以将一个整数的二进制位的奇数位和偶数位交换。

题目 用一个宏&#xff0c;可以将一个整数的二进制位的奇数位和偶数位交换。 如&#xff1a;01&#xff0c;是1&#xff0c;交换完是10&#xff0c;是2. 思路 1.分别取出奇数位上的数字和偶数位上的数字 举个例子&#xff1a;1001 0110 1001 0110 奇…

javaScript设计模式-工厂

它的好处是消除对象间的耦合度&#xff0c;在派生子类时提供了更大的灵活性。但盲目的把普通的构造函数扔在一边&#xff0c;并不值得提倡。如果要采一不可能另外换用一个类&#xff0c;或都不需要在运行期间在一系列可互换的类中进行选择&#xff0c;就不应该使用。这样在后期…

基于android的违章处理APP 前后端服务 -毕业设计

基于android的违章处理APP 该项目是基于android版本的违章处理APP&#xff0c;系统包含前端android服务和后端web服务&#xff0c;内容和技术都是目前比较流行的架构。 技术介绍 前端android端&#xff1a; jdk17 gradle8.0 android studio 采用2023版本 后端web端&#xff…

layui 监听checkbox,checkbox全选,反选,日期使用,select赋值,图片预览上传

1、checkbox 使用 form.render(checkbox) //再次渲染&#xff0c;不能选的时候需要再次渲染使用2、全选&#xff0c;反选 form.on(checkbox(product_checkbox_all), function (data) {if( data.elem.checked) {//判断选中//全选$("input[namearticle[]]").each(funct…

手动添加测试用例配置输入参数和期望值

1.选中函数&#xff0c;点击右键选择插入测试用例。这里所选择的插入测试用例区别于之前的测试用例的地方在于&#xff0c;这里插入测试用例是手动配置的&#xff0c;之前的是自动生成的。手动配置可以自定义选择输入参数和期望值。 2.添加测试用例后&#xff0c;点击测试用例&…

FTP文件传输与vsftpd配置

一 存储类型 直连式存储DAS 适用于那些数据量不大&#xff0c;对磁盘访问速度要求较高的中小企业 存储区域网络SAN 用来存储非结构化数据&#xff0c;虽然受限于以太网的速度&#xff0c;但是部署灵活&#xff0c;成本低 网络附加存储NAS 适用于大型应用或数据库系统&…

进程间通信之利用命名管道进行通信

文章目录 什么是命名管道命名管道的作用有什么命名管道的特点和用法是什么命名管道与匿名管道有什么区别匿名管道相较于命名管道的局限性 命名管道如何使用代码 什么是命名管道 命名管道&#xff08;Named Pipe&#xff09;&#xff0c;也被称为FIFO&#xff08;First In, Fir…