CesiumJS 案例 P20：监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点
CesiumJS
- CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）
-
CesiumJS 官网：https://www.cesium.com/
-
CesiumJS 下载地址：https://www.cesium.com/platform/cesiumjs/
-
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>
相关文章：
CesiumJS 案例 P20：监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点
CesiumJS CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图） CesiumJS 官网：https://www.cesium.com/ CesiumJS 下载地址：https://www.cesium.com/platform/cesiumjs/ CesiumJS API 文…...
如何使用Web-Check和cpolar实现安全的远程网站监测与管理
文章目录 前言1.关于Web-Check2.功能特点3.安装Docker4.创建并启动Web-Check容器5.本地访问测试6.公网远程访问本地Web-Check7.内网穿透工具安装8.创建远程连接公网地址9.使用固定公网地址远程访问 前言 本期给大家分享一个网站检测工具Web-Check，能帮你全面了解网…...
随机生成100组N个数并对比，C++，python，matlab，pair，std::piecewise_construct
随机生成100组N个数，数的范围是1到35，并检查是否包含目标数组的数字 python版本 import numpy as np def count_groups_containing_obj(N, obj):# 随机生成100组N个数，数的范围是1到35groups np.random.randint(1, 36, size(1000, N))#pri…...
python爬虫获取数据后的数据提取
文章目录 python爬虫中的数据提取1.Json格式数据的数据提取2.Html格式数据提取之bs4解析器如何使用快速使用对象的种类Tagname和attributes属性NavigableString(字符串)BeautifulSoupComment 子节点.contents.children.descendants 父节点.parent.parents 节点内容.string.stri…...
前段（vue）
目录 跨域是什么？ SprinBoot跨域的三种解决方法 JavaScript 有 8 种数据类型， 金额的用什么类型。 前段 区别 JQuery使用$.ajax()实现异步请求 Vue 父子组件间的三种通信方式 Vue2 和 Vue3 存在多方面的区别。 跨域是什么？ 跨域是指…...
pairwise算法之rank svm
众所周知，point-wise/pair-wise/list-wise是机器学习领域中重要的几种建模方法。比如，最常见的分类算法使用了point-wise，即一条样本对应一个label(0/1)，根据多条正负样本，使用交叉熵（cross entropy&#x…...
SAP RFC 用户安全授权
一、SAP 通讯用户 对于RFC接口的用户，使用五种用户类型之一的“通讯”类型，这种类型的用户没有登陆SAPGUI的权限。 二、对调用的RFC授权 在通讯用户内部，权限对象：S_RFC中，限制进一步可以调用的RFC函数授权ÿ…...
记录新建wordpress站的实践踩坑：wordpress 上传源码新建站因权限问题导致无法访问、配置新站建站向导以及插件主题上传配置的解决办法
官方文档：How to install WordPress – Advanced Administration Handbook | Developer.WordPress.org 但是没写权限问题，可以下载到 wordpress官方包。 把下载的wordpresscn的包解压并上传到服务器目录下，但是因为是root上传导致了权限问题…...
为啥学习数据结构和算法
基础知识就像是一座大楼的地基，它决定了我们的技术高度。而要想快速做出点事情，前提条件一定是基础能力过硬，“内功”要到位。 想要通关大厂面试，千万别让数据结构和算法拖了后腿 我们学任何知识都是为了“用”的，是为…...
Java - 免费图文识别_Java_免费_图片转文字_文字识别_spring ai_spring ai alibaba
本文主要是介绍借助阿里云免费的大模型额度来做高质量的图转文识别，图片转文字，或者文字识别都可以使用，比传统的OCR模式要直接和高效很多 。 本文使用的技术是spring ai qwen vl 。 Qwen vl有 100万Token 免费额度，可以用来免费…...
《JVM第6课》本地方法栈
文章目录 1 什么是本地方法1.1 本地方法的好处1.2 声明本地方法1.3 实现本地方法1. 生成头文件2. 编写C语言实现3. 编译C代码4. 运行Java程序 1.4 使用JNA1.5 总结 2 本地方法栈2.1 特点2.2 本地方法栈与Java虚拟机栈的区别2.3 本地方法栈的工作流程2.4 总结 无痛快速学习入门J…...
3.1 快速启动Flink集群
文章目录 1. 环境配置2. 本地启动3. 集群启动4. 向集群提交作业4.1 提交作业概述4.2 添加打包插件4.3 将项目打包4.4 在Web UI上提交作业4.5 命令行提交作业 在本实战中，我们将快速启动Apache Flink 1.13.0集群，并在Hadoop集群环境中提交作业。首先&…...
如何设计一个毫秒级的接口？
设计一个毫秒级的接口需要考虑多个方面，包括网络延迟、服务器性能、代码效率、数据库查询优化等。以下是一些建议，帮助你设计一个毫秒级的接口： 网络优化： 使用HTTP/2或更高版本，以减少连接建立和传输的开销。尽可能减…...
从语义实施工程师到大数据开发工程师的职业转型
在信息技术行业，随着数据驱动决策的流行和企业对大数据需求的急剧增加，越来越多的专业人士开始考虑将他们的技能转移到大数据领域。本文将探讨如何从一个语义实施工程师转变为一个大数据开发工程师。两者虽然都与数据密切相关，但在技术重点和…...
关联容器笔记
关联容器总结 有序关联容器 键值的顺序自动排序，键值必须支持 < 操作符 底层数据结构 使用平衡树，比如（红黑树）增删查的平均时间复杂度接近 O(logn) 种类 std::set：集合，包含唯一的键元素。 std…...
在阿里云快速启动Umami玩转网页分析
阿里云计算巢提供了Umami快速部署能力，使用者不需要自己下载代码，不需要自己安装复杂的依赖，不需要了解底层技术，只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Umami，非技术同学也能轻松搞定。 什么是Umam…...
Linux练习作业
1.搭建dns服务器能够对自定义的正向或者反向域完成数据解析查询。 2.配置从DNS服务器，对主dns服务器进行数据备份 环境准备 主从服务器都需要进行的操作#关闭防火墙、SELinnux systemctl stop firewalld setenforce 0#软件安装 yum install bind -y实验一&#…...
FFMPEG录屏（21）--- Linux 下基于X11枚举所有可见窗口，并获取标题、图标、缩略图、进程路径等信息
在 Linux X11 下枚举窗口并获取窗口信息 在 Linux 系统中，X11 是一个非常流行的窗口系统，它提供了丰富的 API 用于管理和操作窗口。在这篇博客中，我们将详细介绍如何使用 X11 枚举当前系统中的窗口，并获取它们的标题、截图、进程…...
mybatis resultMap标签注意事项（pageHelper结合使用的坑）
背景 使用pageHelper时，发现分页数据异常，经过排查发现是resultMap 的问题。 resultMap介绍 在使用mybatis时，我们经常会使用在xml文件中编写一些复杂的sql语句，例如多表的join，在映射实体类时，又会使用…...
100种算法【Python版】第33篇——Tonelli-Shanks算法
本文目录 1 模素数下的二次剩余问题2 算法原理2.1 背景知识2.2 算法步骤3 算法示例4 python代码5 算法应用1 模素数下的二次剩余问题 在数论中，给定一个素数 p p p 和一个整数 n n n...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
Xshell远程连接Kali（默认 | 私钥）Note版
前言:xshell远程连接，私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
Java入门学习详细版（一）
大家好，Java 学习是一个系统学习的过程，核心原则就是“理论 实践 坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
#Uniapp篇：chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）
引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...
详细解析)
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...
淘宝扭蛋机小程序系统开发：打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...
从面试角度回答Android中ContentProvider启动原理
Android中ContentProvider原理的面试角度解析，分为已启动和未启动两种场景： 一、ContentProvider已启动的情况 1. 核心流程 触发条件：当其他组件（如Activity、Service）通过ContentR…...