Cesium 地图鼠标悬浮某个位置显示弹窗

问题:地图上显示了图标,在鼠标悬浮在地图上时,不出现弹窗,当悬浮在地图的图标上时,显示该图标的信息
解决过程:
1.建立处理用户输入事件的画布,写出要在输入事件上执行的功能。
2.Cesium.ScreenSpaceEventType.MOUSE_MOVE表示鼠标移动事件
3.cesium.viewer.scene.pick执行拾取的窗口坐标,如果该位置没有任何内容,则返回未定义的对象
4.弹窗显示的位置可以根据拾取到的坐标进行定位,使用绝对定位,定位到图标的某一个位置上
5. 下面例子中的iconObj.position为图标坐标,iconObj.info为要展示的信息
解决结果:

const mouseHover = event => {  let pick = window.cesium.viewer.scene.pick(event.endPosition)let obj = {}obj.position = event.endPositionif(!pick || !pick.id || !pick.id.data){//此处data是画地图图标是就存入的图标信息obj.data = {}//此处鼠标未悬浮到图标上,不显示弹窗,传入弹窗的信息为nulltipDialog.value = false//要在这里给弹窗的组件里传值,当前例子省略了这里,根据开发情况补充即可//例如:mitter.emit('弹窗内容方法',传的值)return}else{obj.data = pick.id.data}let iconInfo = obj.dataif(!iconInfo||!iconInfo.info){// 虽然鼠标在图标上,但当前图标没有任何信息时,弹窗不显示,传入弹窗的信息为nulltipDialog.value = false//要在这里给弹窗的组件里传值,当前例子省略了这里,根据开发情况补充即可//例如:mitter.emit('弹窗内容方法',传的值)return}let iconObj = {position:{},info:''}iconObj.position = obj.positioniconObj.info = obj.data.location//画地图图标是就存入的图标信息//弹窗显示tipDialog.value = true//要在这里给弹窗的组件里传值,当前例子省略了这里,根据开发情况补充即可//例如:mitter.emit('弹窗内容方法',传的值)
}
onMounted(() => {let handlePoint = new Cesium.ScreenSpaceEventHandler(window.cesium.viewer.scene.canvas);// 鼠标悬浮事件handlePoint.setInputAction(function (event) {//可以用节流方法优化这里mouseHover(event)}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
})
onUnmounted(() => {handlePoint.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
})

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

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

相关文章

python调用jar中java方法 静态类为例

java package test;public class test {// run方法返回当前脚本路径public static String runV1(String s) {return "log: " System.getProperty(s);}}python import jpype from jpype import * import osif __name__ "__main__":print(os.environ[JAV…

java中的日期类

1.1 第一代日期类 第一代日期时间API主要有java.util.Date和日期时间格式化有关的java.text.DateFormat及其子类。 1.1.1 Date类 JDK1.0就在java.util包下面提供了Date类用于表示特定的瞬间,可以精确到毫秒。   通过API或源码,可以看出Date类的大部…

如何计算视频流需要的服务器带宽

一、如何计算视频流需要的服务器带宽 计算视频流需要的服务器带宽涉及多个因素,包括视频的编码质量、分辨率、帧率、同时观看的用户数量等。下面是一个基本的计算方法: 确定视频的平均比特率:视频的比特率(通常以比特/秒为单位)是衡量视频数据流量的关键指标。这取决于视…

vscode 导入前端项目

vscode 导入前端项目 导入安装依赖 运行 参考vscode 下载 导入 安装依赖 运行 在前端项目的终端中输入npm run serve

NCC环境配置

一、后端配置 安装eclipse汉化插件安装svn插件调试配置中配置启动参数 -Dnc.exclude.modules${FIELD_EX_MODULES} -Dnc.runModedevelop -Dnc.server.location${FIELD_NC_HOME} -DEJBConfigDir${FIELD_NC_HOME}/ejbXMLs -DExtServiceConfigDir${FIELD_NC_HOME}/ejbXMLs -…

C#,数值计算,数据测试用的对称正定矩阵(Symmetric Positive Definite Matrix)的随机生成算法与源代码

C.Hermite 1、对称矩阵 对称矩阵(Symmetric Matrices)是指以主对角线为对称轴,各元素对应相等的矩阵。在线性代数中,对称矩阵是一个方形矩阵,其转置矩阵和自身相等。1855年,埃米特(C.Hermite,1822-1901年)证明了别的数学家发现的一些矩阵类的特征根的特殊性质,如称为埃…

ASPICE-SYSSWE

文章主要内容: Automotive SPICE 过程参考模型 SYS.1 需求挖掘 过程ID SYS.1 过程名称 需求挖掘 过程目的 需求挖掘过程的目的是:在产品和/或服务的整个生命周期内收集、处理和跟踪不断变化的利益相关方的需要和需求,从而建立一个需求基线&#x…

交换机/路由器的存储介质-思科

交换机/路由器的存储介质-思科 本文主要介绍网络设备的存储介质组成。 RAM(random-accessmemory,随机访问存储器) RAM中内容断电丢失,主要用于运行操作系统、运行配置文件、IP 路由表:、ARP 缓存、数据包缓存区。 ROM(read-only memory,只…

uniapp遇到的问题

【uniapp】小程序中input输入框的placeholder-class不生效解决办法 解决:写在scope外面 uniapp设置底部导航 引用:https://www.jianshu.com/p/738dd51a0162 【微信小程序】moveable-view / moveable-area的使用 https://blog.csdn.net/qq_36901092/…

持续创新引领计算机行业在数字经济时代的航向

受2024年政府工作报告的启发,计算机行业正站在新的发展十字路口。政府报告不仅为计算机行业的未来描绘了清晰的轮廓,更为行业的实践提供了扎实的政策支撑和发展空间。本文将深入分析计算机行业在数字化经济大潮中的新机遇与挑战,并对企业和从…

服务器数据恢复—raid5热备盘上线同步数据失败的如何恢复数据

服务器数据恢复环境&故障&分析: 一台存储上有一组由多块硬盘组建的raid5阵列,该raid5阵列中的一块硬盘掉线,热备盘自动上线同步数据的过程中,raid阵列中又有一块硬盘掉线,热备盘的数据同步被中断,r…

Apache Paimon 的 Query Service 使用

Query Service 可以运行Flink流作业来启动表的查询服务,当QueryService存在时,Flink Lookup Join将优先从中获取数据,这将有效地提高查询性能。 Flink SQL CALL sys.query_service(database_name.table_name, parallelism);Flink Action …

24计算机考研调剂 | 浙江工商大学【官方】

2024年浙江工商大学信电学院调剂咨询通道已开启! 考研调剂招生信息 根据今年初试情况,预计我院信息与通信工程(081000)一级学科硕士点、电子信息(人工智能领域)(085410)专业学位硕士…

【刷题训练】LeetCode:557. 反转字符串中的单词 III

557. 反转字符串中的单词 III 题目要求 示例 1: 输入:s “Let’s take LeetCode contest” 输出:“s’teL ekat edoCteeL tsetnoc” 示例 2: 输入: s “Mr Ding” 输出:“rM gniD” 思路: 第一步&am…

Python朗读在线音频和本地音频的三种方法

在日常的Python软件开发中,我们经常会遇到一个非常重要的功能需求——让程序能够读取并显示文本内容。那么,如何实现这一功能呢?本文将提供几种方法供大家参考,其中第二种方法是最推荐的。 一、pyttsx3法 采用这个第三方模块&am…

Android studio 性能调试

一、概述 Android studio 的Profiler可用来分析cpu和memory问题,下来进行说明介绍。 二、Android studio CPU调试 从开发模拟器或设备中启动应用程序; 在 Android Studio 中,通过选择View > Tool Windows > Profiler启动分析器。 应…

Mac-自动操作 实现双击即可执行shell脚本

背景 在Mac上运行shell脚本,总是需要开启终端窗口执行,比较麻烦 方案 使用Mac上自带的“自动操作”程序,将shell脚本打包成可运行程序(.app后缀),实现双击打开即可执行shell脚本 实现细节 找到Mac上 应用程序中的 自动操作&am…

Selenium 学习(0.20)——软件测试之单元测试

我又(浪完)回来了…… 很久没有学习了,今天忙完终于想起来学习了。没有学习的这段时间,主要是请了两个事假(5工作日和10工作日)放了个年假(13天),然后就到现在了。 看了下…

Apache Maven介绍|Maven安装

Apache Maven是一款流行的Java项目管理和构建工具,用于自动化构建过程,包括编译、测试、打包、依赖管理和发布等工作。以下是Maven安装步骤解析: 在Windows系统中安装Maven 下载Maven: 访问Maven官方网站(https://mav…

git基础命令(二)

目录 git revert 撤消上一次提交的更改但是会创建一个新的提交来撤消该提交所做的更改git show 显示提交详细信息git mv 重命名文件git rm 从工作树和索引中移除文件git clean 从工作树中移除未跟踪文件git checkout 将文件恢复到工作树git reset 撤销更改、移动 HEAD 指针以及…