CesiumJS 案例 P20:监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点

CesiumJS

  • CesiumJS 是一个开源的 JavaScript 库,它用于在网页中创建和控制 3D 地球仪(地图)
  1. CesiumJS 官网:https://www.cesium.com/

  2. CesiumJS 下载地址:https://www.cesium.com/platform/cesiumjs/

  3. CesiumJS API 文档:https://cesium.com/learn/cesiumjs/ref-doc/index.html


一、监听鼠标滚轮

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ScreenSpaceEventHandler - 监听鼠标滚轮</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction((delta) => {console.log("滚动量为:", delta);}, Cesium.ScreenSpaceEventType.WHEEL);</script>
</html>

二、监听鼠标左键按下与松开

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ScreenSpaceEventHandler - 监听鼠标左键按下与松开</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction((click) => {console.log("鼠标左键按下了!!!位置为:", click.position.x, click.position.y);}, Cesium.ScreenSpaceEventType.LEFT_DOWN);handler.setInputAction((click) => {console.log("鼠标左键松开了,位置为:", click.position.x, click.position.y);}, Cesium.ScreenSpaceEventType.LEFT_UP);</script>
</html>

三、监听鼠标右键按下与松开

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ScreenSpaceEventHandler - 监听鼠标右键按下与松开</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction((click) => {console.log("鼠标右键按下了!!!位置为:", click.position.x, click.position.y);}, Cesium.ScreenSpaceEventType.RIGHT_DOWN);handler.setInputAction((click) => {console.log("鼠标右键松开了,位置为:", click.position.x, click.position.y);}, Cesium.ScreenSpaceEventType.RIGHT_UP);</script>
</html>

四、监听鼠标左击落点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ScreenSpaceEventHandler - 监听鼠标左击落点</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function (click) {// 获取左击位置的射线const pickRay = viewer.camera.getPickRay(click.position);// 在地球表面找到与射线相交的点const pickPosition = viewer.scene.globe.pick(pickRay, viewer.scene);if (Cesium.defined(pickPosition)) {// 如果找到了交点,将其转换为地理坐标(Cartographic)const cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(pickPosition);// 这里转换成直观的地理度数坐标console.log("左击落点在地球球面,地理坐标为:", Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude));} else {console.log("左击落点不在地球球面");}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);</script>
</html>

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

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

相关文章

【大语言模型】ACL2024论文-07 BitDistiller: 释放亚4比特大型语言模型的潜力通过自蒸馏

【大语言模型】ACL2024论文-07 BitDistiller: 释放亚4比特大型语言模型的潜力通过自蒸馏 目录 文章目录 【大语言模型】ACL2024论文-07 BitDistiller: 释放亚4比特大型语言模型的潜力通过自蒸馏目录摘要研究背景问题与挑战如何解决创新点算法模型实验效果代码推荐阅读指数&…

P9220 「TAOI-1」椎名真昼

P9220 「TAOI-1」椎名真昼 考点&#xff1a;博弈论、拓扑、强连通分量。 难度&#xff1a; 提高/省选- 。 题意&#xff1a; ​ Alice 和 Bob 玩游戏&#xff0c;给定一个有向图&#xff0c;每个点有初始颜色&#xff08;黑/白&#xff09;。 ​ 双方轮番操作一次&#xf…

计算机网络:网络层 —— 多播路由选择协议

文章目录 多播路由选择协议多播转发树构建多播转发树基于源树的多播路由选择建立广播转发树建立多播转发树 组共享树的多播路由选择基于核心的生成树的建立过程 因特网的多播路由选择协议 多播路由选择协议 仅使用 IGMP 并不能在因特网上进行IP多播。连接在局域网上的多播路由…

例行性工作

1、单一执行------at-----仅处理执行一次就结束了 1.1工作过程 /etc/at.allow&#xff0c;写在该文件的人可以使用at命令/etc/at.deny&#xff0c;黑名单两个文件如果都不存在&#xff0c;只有root能使用 1.2命令详解------命令格式&#xff1a;at [参数] [时间] 2、循环执行…

使用Kafka构建大规模消息传递系统

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Kafka构建大规模消息传递系统 引言 Kafka 简介 安装 Kafka 创建主题 生产者 消费者 高级特性 分区 持久化 消费者组 消息确认…

【sqlmap使用】

sqlmap简介 sqlmap 目录结构 sqlmap常用参数 sqlmap实现注入 测试注入点&#xff0c;检测到注入点后&#xff0c;直接爆数据库名 python sqlmap.py –u http://172.16.12.2/7/9/strsql.php --data "usernameadmin" --dbs注意sqlmap在使用过程中可能会出现几个需要…

【java】java的基本程序设计结构07-字符串

字符串 1. 创建字符串 最简单的&#xff1a; String str "hello"; 用构造函数创建字符串&#xff1a; String str2new String("hello"); String 创建的字符串存储在公共池中&#xff0c;而 new 创建的字符串对象在堆上&#xff1a; 注意: String 类…

数组排序简介-基数排序(Radix Sort)

基本思想 将整数按位数切割成不同的数字&#xff0c;然后从低位开始&#xff0c;依次到高位&#xff0c;逐位进行排序&#xff0c;从而达到排序的目的。 算法步骤 基数排序算法可以采用「最低位优先法&#xff08;Least Significant Digit First&#xff09;」或者「最高位优先…

w~Transformer~合集8

我自己的原文哦~ https://blog.51cto.com/whaosoft/12419881 #Batch Normalization 本文聚焦于Batch Normalization&#xff0c;Layer Normalization两个标准化方法&#xff0c;对其原理和优势等进行了详细的阐述。 这一篇写Transformer里标准化的方法。在Transformer中&am…

Hadoop——HDFS

什么是HDFS HDFS&#xff08;Hadoop Distributed File System&#xff09;是Apache Hadoop的核心组件之一&#xff0c;是一个分布式文件系统&#xff0c;专门设计用于在大规模集群上存储和管理海量数据。它的设计目标是提供高吞吐量的数据访问和容错能力&#xff0c;以支持大数…

废弃物分类分割系统:入门训练营

废弃物分类分割系统源码&#xff06;数据集分享 [yolov8-seg-C2f-DCNV2-Dynamic&#xff06;yolov8-seg-C2f-DWR等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI Glob…

java项目之微服务在线教育系统设计与实现(springcloud)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的闲一品交易平台。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 微服务在线教育系统设计与…

拆换LED灯珠后测量是短路的,为何

今天更换灯珠遇到一个怪事情&#xff0c;拆换一颗好的灯珠上去&#xff0c;万用表测试是短路的。 后面测试电路板上面&#xff0c;中间的散热部分是跟二极管的正极想通的。而且恰恰此时&#xff0c;LED灯珠的散热部分是跟负极想通的。 遂将线路板上面的散热部分跟二极管正极割…

串口屏控制的自动滑轨(未完工)

序言 疫情期间自己制作了一个自动滑轨&#xff0c;基于无线遥控的&#xff0c;但是整体太大了&#xff0c;非常不方便携带&#xff0c;所以重新设计了一个新的&#xff0c;以2020铝型材做导轨的滑轨&#xff0c;目前2020做滑轨已经很成熟了&#xff0c;配件也都非常便宜&#x…

【NOIP提高组】Hankson的趣味题

【NOIP提高组】Hankson的趣味题 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; Hanks 博士是BT (Bio-Tech&#xff0c;生物技术) 领域的知名专家&#xff0c;他的儿子名叫Hankson。现在&#xff0c;刚刚放学回家的Hankson 正在思考一个有趣…

Matlab车牌识别课程设计报告(附源代码)

Matlab车牌识别系统 分院&#xff08;系&#xff09; 信息科学与工程 专业 学生姓名 学号 设计题目 车牌识别系统设计 内容及要求&#xff1a; 车牌定位系统的目的在于正确获取整个图像中车牌的区域&#xff0c; 并识别出车牌号。通过设计实现车牌识别系…

【Unity基础】初识UI Toolkit - 运行时UI

Unity中的UI工具包&#xff08;UI Toolkit&#xff09;不但可以用于创建编辑器UI&#xff0c;同样可以来创建运行时UI。 关于Unity中的UI系统以及使用UI工具包创建编辑器UI可以参见&#xff1a; 1. Unity中的UI系统 2. 初识UI Toolkit - 编辑器UI 本文将通过一个简单示例来…

【重生之我要苦学C语言】深入理解指针4

深入理解指针4 字符指针变量 指针指向字符变量 char ch w; char* p &ch;指针指向字符数组 char arr[10] "abcdef"; char* p arr;printf("%s\n", arr); printf("%s\n", p);结果是一样的 也可以写成&#xff1a; char* p "abc…

Freertos学习日志(1)-基础知识

目录 1.什么是Freertos&#xff1f; 2.为什么要学习RTOS&#xff1f; 3.Freertos多任务处理的原理 1.什么是Freertos&#xff1f; RTOS&#xff0c;即&#xff08;Real Time Operating System 实时操作系统&#xff09;&#xff0c;是一种体积小巧、确定性强的计算机操作系统…

勒索软件通过易受攻击的 Cyber​​Panel 实例攻击网络托管服务器

一个威胁行为者&#xff08;或可能多个&#xff09;使用 PSAUX 和其他勒索软件攻击了大约 22,000 个易受攻击的 Cyber​​Panel 实例以及运行该实例的服务器上的加密文件。 PSAUX 赎金记录&#xff08;来源&#xff1a;LeakIX&#xff09; Cyber​​Panel 漏洞 Cyber​​Pane…