【openlayers系统学习】4.3VectorTile 功能交互(指针悬停在要素上时,绘制矩形框)

三、 VectorTile 功能交互(指针悬停在要素上时,绘制矩形框)

矢量切片的好处是我们可以与要素交互,因为我们在客户端上有数据。但需要注意的一件事是矢量切片针对渲染进行了优化。这意味着要素仅包含过滤和渲染所需的属性,并且几何图形针对渲染分辨率进行了优化并在图块边界附近进行了剪裁。

在本练习中,当指针悬停在要素上时,我们将在要素周围绘制一个框。

添加用于显示边界框的矢量图层

我们将在单独的图层上绘制悬停要素的边界框。需要以下导入,我们将它们添加到 main.js​ 中的其他导入旁边:

import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Stroke, Style} from 'ol/style';

接下来,我们可以为图层创建一个源,图层,并将其分配给地图:

const source = new VectorSource();
new VectorLayer({map: map, // 将图层与地图对象关联source: source,style: new Style({stroke: new Stroke({color: 'red',width: 4,}),}),
});

与地图交互 Interacting with the map

现在是时候向地图添加一个 pointermove​ 监听器了,它获取指针位置处的所有要素并将它们的边界框添加到图层中。为此,我们需要两个额外的导入:

import Feature from 'ol/Feature';
import {fromExtent} from 'ol/geom/Polygon';

最后,我们可以添加代码来清除源的当前内容,并将指针位置处的特征的边界框添加为新内容:

// 监听地图上的 pointermove 事件
map.on('pointermove', function (event) {// 清除之前添加到源中的所有要素source.clear();// 在鼠标指针所在像素位置下查找要素map.forEachFeatureAtPixel(event.pixel,function (feature) {// 获取要素的几何信息const geometry = feature.getGeometry();// 将要素的范围转换为新的要素,并添加到源中source.addFeature(new Feature(fromExtent(geometry.getExtent())));},{// 设置命中容差为 2 像素hitTolerance: 2,});
});

注:观察一下这里的feature​和geometry​对象,将他们打印出来

image

这两个对象是完全一样的:

image

直接调用feature.getExtent()​也是可以的

image

现在,将鼠标悬停在地图上时,结果应如下所示:

image

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

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

相关文章

panic: concurrent write to websocket connection【golang、websocket】

文章目录 异常信息原由代码错误点 解决办法 异常信息 panic: concurrent write to websocket connection原由 golang 编写 websocket go版本:1.19 使用了第三方框架: https://github.com/gorilla/websocket/tree/main 代码 server.go // Copyright …

【版本标记 | Github】Github 中常见的版本标记(Tags)有哪一些?分别在什么情况下使用?

背景 无论是自己自由开发项目还是公司协同合作,随着软件的迭代升级,都需要一个比较规范(好区分)的标记来区分不同的软件版本。通常,我们使用不同的数字来表示不同的版本,例如大版本号加上小版本号等&#…

Java核心:注解处理器

Java提供了一个javac -processor命令支持处理标注有特定注解的类,来生成新的源文件,并对新生成的源文件重复执行。执行的命令大概是这样的: javac -XprintRounds -processor com.keyniu.anno.processor.ToStringProcessor com.keyniu.anno.processor.Po…

基于微信小程序的在电影线订票小程序+web管理 uniapp,vue,ssm

基于微信小程序的在电影线订票小程序web管理 uniapp,vue,ssm 相关技术 javassmuniapp微信开发者工具hbuildervueelementui前后端分离 -mysql

PointCloudLib 点云半径滤波实现 C++版本

0.展示效果 滤波之前 1.算法原理 半径滤波原理非常直观,主要用于平滑三维点云数据并去除离群点。 设定搜索半径:首先,为每个点设定一个搜索半径r。这个半径定义了该点周围的一个球形区域。计算邻域点数:接着,计算每个点在其搜索半径r内的邻近点的数量。判断与过滤:根据…

集合框架有哪些

ava集合框架是一个架构,提供了一组接口和类,用于存储和操作一组数据。集合框架主要包含以下几种类型的集合: 1. 集合接口 集合框架中的主要接口包括: Collection:所有集合接口的根接口。List:有序集合&a…

xcode按下delete键不能删除不能使用,解决办法

有可能是按键冲突导致的问题,就是你不小心把delete键绑定了不同的快捷键,所以需要恢复所有的偏好设置和快捷键才可以,我这里就是这样的提示内容,在xcode中按delete键完全无效: 而且还会报红色提示:意思是不…

521源码-免费教程-经常用到的Vue.js的Vue@Cli入门指导

更多网站源码学习教程,请点击👉-521源码-👈获取最新资源:521源码-网站源码-资源素材-免费下载 Vue.js是一款流行的JavaScript框架,它使得构建交互式的Web界面变得简单和快捷。VueCli是Vue.js官方提供的脚手架工具&…

系统架构师必考题:Redis知识点

系统架构师必考题:Redis知识点 系统架构师案例分析题必考的缓存题目:Redis相关知识点。 1.安装与介绍 安装教程:https://blog.csdn.net/WeiHao0240/article/details/100030637 特点: 性能极高、丰富的数据类型、原子性操作、持…

【安卓12源码】Input子系统(1) - input启动流程

Android Input 体系中,大致有两种类型的事件:实体按键 key 事件,屏幕点击触摸事件。 如果根据事件类型的不同我们还能细分为基础实体按键的 key(power,volume up/down,recents,back,home)&#…

KingbaseES数据库union的用法

数据库版本:KingbaseES V008R006C008B0014 文章目录如下 1. union的概念 2. union的语法 3. union的用法 3.1. 去重(union) 3.2. 不去重(union all) 3.3. 聚合运算 3.4. 异常案例 1. union的概念 UNION 是结构…

冷冻式压缩空气干燥机常见几种系统原理图

冷冻式压缩空气干燥机 我们以两种典型的设计流程图为例 1.干式蒸发型,这类冷干机是我们最为常见的设计型式。下图为deltech公司的典型流程图 此类设备各家设计不同的最大区别基本就是在换热器的结构型式上有比较大的区别。换热器主要有:管壳式、铝板换、…

typescript 配置精讲 | moduleResolution

大家好,我是17。 moduleResolution 是 typescript 模块配置中最重要的一个配置,所以 17 单拿出来讲一下。如果你去看文档还是挺复杂的,但如果不去深究细节,只想知道如何配置还是很简单的。3 分钟就能学会。 moduleResolution 的…

STM32无源蜂鸣器播放音乐

开发板:野火霸天虎V2 单片机:STM32F407ZGT6 开发软件:MDKSTM32CubeMX 文章目录 前言一、找一篇音乐的简谱二、确定音调三、确定节拍四、使用STM32CubeMX生成初始化代码五、代码分析 前言 本实验使用的是低电平触发的无源蜂鸣器 无源蜂鸣器是…

【模拟面试问答】深入解析力扣163题:缺失的区间(线性扫描与双指针法详解)

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容,和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣! 推荐:数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航: LeetCode解锁100…

嵌入式0基础开始学习 ⅠC语言(1)数据类型

想学好嵌入式,那么就从c语言开始学习! 0.问题引入 面对过程(c语言) 程序组成: 程序 算法 数据结构 计算机首先要解决数据保存的问题,在数据保存之前…

软考高级架构师:再工程、正向工程、设计恢复的区别

再工程(Re-engineering)、正向工程(Forward Engineering)、设计恢复(Design Recovery)是软件工程中的三个不同概念,各自有不同的目的和过程。以下是它们的区别: 再工程(…

华为OD机试 - 寻找最富裕的小家庭(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(A卷B卷C卷)》。 刷的越多,抽中的概率越大,每一题都有详细的答题思路、详细的代码注释、样例测试…

C语言对一阶指针 二阶指针的本质理解

代码&#xff1a; #include <stdio.h>char a 2; char* p &a; char** d &p;int main(){printf("a -> %d, &a -> %p\n", a, &a);printf("*p -> %d, p -> %p, &p -> %p\n", *p, p, &p);printf(&qu…

【JavaEE初阶】网络初识|局域网和广域网|交换机和路由器|IP地址|端口号

&#x1f4a1;推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击跳转到网站】 关键概念 1.局域网LAN和广域网WAN &#xff08;1&#xff09;局域⽹&#xff0c;即Local Area Network&#xff0…