当前位置： 首页 > news >正文

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

news 2026/4/3 11:00:24

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>

相关文章：

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

CesiumJS CesiumJS 是一个开源的 JavaScript 库&#xff0c;它用于在网页中创建和控制 3D 地球仪&#xff08;地图&#xff09; CesiumJS 官网&#xff1a;https://www.cesium.com/ CesiumJS 下载地址&#xff1a;https://www.cesium.com/platform/cesiumjs/ CesiumJS API 文…...

编程日记 2024/11/4 20:45:39

如何使用Web-Check和cpolar实现安全的远程网站监测与管理

文章目录 前言1.关于Web-Check2.功能特点3.安装Docker4.创建并启动Web-Check容器5.本地访问测试6.公网远程访问本地Web-Check7.内网穿透工具安装8.创建远程连接公网地址9.使用固定公网地址远程访问 前言 本期给大家分享一个网站检测工具Web-Check&#xff0c;能帮你全面了解网…...

编程日记 2024/11/4 20:42:34

随机生成100组N个数并对比，C++，python，matlab，pair，std::piecewise_construct

随机生成100组N个数&#xff0c;数的范围是1到35&#xff0c;并检查是否包含目标数组的数字 python版本 import numpy as np def count_groups_containing_obj(N, obj):# 随机生成100组N个数&#xff0c;数的范围是1到35groups np.random.randint(1, 36, size(1000, N))#pri…...

编程日记 2024/11/4 20:40:32

python爬虫获取数据后的数据提取

文章目录 python爬虫中的数据提取1.Json格式数据的数据提取2.Html格式数据提取之bs4解析器如何使用快速使用对象的种类Tagname和attributes属性NavigableString(字符串)BeautifulSoupComment 子节点.contents.children.descendants 父节点.parent.parents 节点内容.string.stri…...

编程日记 2024/11/4 20:37:27

前段（vue）

目录 跨域是什么&#xff1f; SprinBoot跨域的三种解决方法 JavaScript 有 8 种数据类型&#xff0c; 金额的用什么类型。 前段 区别 JQuery使用$.ajax()实现异步请求 Vue 父子组件间的三种通信方式 Vue2 和 Vue3 存在多方面的区别。 跨域是什么&#xff1f; 跨域是指…...

编程日记 2024/11/4 20:36:26

pairwise算法之rank svm

众所周知&#xff0c;point-wise/pair-wise/list-wise是机器学习领域中重要的几种建模方法。比如&#xff0c;最常见的分类算法使用了point-wise&#xff0c;即一条样本对应一个label(0/1)&#xff0c;根据多条正负样本&#xff0c;使用交叉熵&#xff08;cross entropy&#x…...

编程日记 2024/11/4 20:35:25

SAP RFC 用户安全授权

一、SAP 通讯用户 对于RFC接口的用户&#xff0c;使用五种用户类型之一的“通讯”类型&#xff0c;这种类型的用户没有登陆SAPGUI的权限。 二、对调用的RFC授权 在通讯用户内部&#xff0c;权限对象&#xff1a;S_RFC中&#xff0c;限制进一步可以调用的RFC函数授权&#xff…...

编程日记 2024/11/4 20:34:24

记录新建wordpress站的实践踩坑：wordpress 上传源码新建站因权限问题导致无法访问、配置新站建站向导以及插件主题上传配置的解决办法

官方文档&#xff1a;How to install WordPress – Advanced Administration Handbook | Developer.WordPress.org 但是没写权限问题&#xff0c;可以下载到 wordpress官方包。 把下载的wordpresscn的包解压并上传到服务器目录下&#xff0c;但是因为是root上传导致了权限问题…...

编程日记 2024/11/4 20:29:18

为啥学习数据结构和算法

基础知识就像是一座大楼的地基&#xff0c;它决定了我们的技术高度。而要想快速做出点事情&#xff0c;前提条件一定是基础能力过硬&#xff0c;“内功”要到位。 想要通关大厂面试&#xff0c;千万别让数据结构和算法拖了后腿 我们学任何知识都是为了“用”的&#xff0c;是为…...

编程日记 2024/11/4 20:28:16

Java - 免费图文识别_Java_免费_图片转文字_文字识别_spring ai_spring ai alibaba

本文主要是介绍借助阿里云免费的大模型额度来做高质量的图转文识别&#xff0c;图片转文字&#xff0c;或者文字识别都可以使用&#xff0c;比传统的OCR模式要直接和高效很多 。 本文使用的技术是spring ai qwen vl 。 Qwen vl有 100万Token 免费额度&#xff0c;可以用来免费…...

编程日记 2024/11/4 20:27:15

《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…...

编程日记 2024/11/4 20:25:12

3.1 快速启动Flink集群

文章目录 1. 环境配置2. 本地启动3. 集群启动4. 向集群提交作业4.1 提交作业概述4.2 添加打包插件4.3 将项目打包4.4 在Web UI上提交作业4.5 命令行提交作业 在本实战中&#xff0c;我们将快速启动Apache Flink 1.13.0集群&#xff0c;并在Hadoop集群环境中提交作业。首先&…...

编程日记 2024/11/4 20:20:05

如何设计一个毫秒级的接口？

设计一个毫秒级的接口需要考虑多个方面&#xff0c;包括网络延迟、服务器性能、代码效率、数据库查询优化等。以下是一些建议&#xff0c;帮助你设计一个毫秒级的接口&#xff1a; 网络优化&#xff1a; 使用HTTP/2或更高版本&#xff0c;以减少连接建立和传输的开销。尽可能减…...

编程日记 2024/11/4 20:19:03

从语义实施工程师到大数据开发工程师的职业转型

在信息技术行业&#xff0c;随着数据驱动决策的流行和企业对大数据需求的急剧增加&#xff0c;越来越多的专业人士开始考虑将他们的技能转移到大数据领域。本文将探讨如何从一个语义实施工程师转变为一个大数据开发工程师。两者虽然都与数据密切相关&#xff0c;但在技术重点和…...

编程日记 2024/11/4 20:17:59

关联容器笔记

关联容器总结 有序关联容器 键值的顺序自动排序&#xff0c;键值必须支持 < 操作符 底层数据结构 使用平衡树&#xff0c;比如&#xff08;红黑树&#xff09;增删查的平均时间复杂度接近 O(log⁡n) 种类 std::set&#xff1a;集合&#xff0c;包含唯一的键元素。 std…...

编程日记 2024/11/4 20:14:55

在阿里云快速启动Umami玩转网页分析

阿里云计算巢提供了Umami快速部署能力&#xff0c;使用者不需要自己下载代码&#xff0c;不需要自己安装复杂的依赖&#xff0c;不需要了解底层技术&#xff0c;只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Umami&#xff0c;非技术同学也能轻松搞定。 什么是Umam…...

编程日记 2024/11/4 20:10:46

Linux练习作业

1.搭建dns服务器能够对自定义的正向或者反向域完成数据解析查询。 2.配置从DNS服务器&#xff0c;对主dns服务器进行数据备份 环境准备 主从服务器都需要进行的操作#关闭防火墙、SELinnux systemctl stop firewalld setenforce 0#软件安装 yum install bind -y实验一&#…...

编程日记 2024/11/4 20:04:38

FFMPEG录屏（21）--- Linux 下基于X11枚举所有可见窗口，并获取标题、图标、缩略图、进程路径等信息

在 Linux X11 下枚举窗口并获取窗口信息 在 Linux 系统中&#xff0c;X11 是一个非常流行的窗口系统&#xff0c;它提供了丰富的 API 用于管理和操作窗口。在这篇博客中&#xff0c;我们将详细介绍如何使用 X11 枚举当前系统中的窗口&#xff0c;并获取它们的标题、截图、进程…...

编程日记 2024/11/4 20:02:35

mybatis resultMap标签注意事项（pageHelper结合使用的坑）

背景 使用pageHelper时&#xff0c;发现分页数据异常&#xff0c;经过排查发现是resultMap 的问题。 resultMap介绍 在使用mybatis时&#xff0c;我们经常会使用在xml文件中编写一些复杂的sql语句&#xff0c;例如多表的join&#xff0c;在映射实体类时&#xff0c;又会使用…...

编程日记 2024/11/4 20:00:32

100种算法【Python版】第33篇——Tonelli-Shanks算法

本文目录 1 模素数下的二次剩余问题2 算法原理2.1 背景知识2.2 算法步骤3 算法示例4 python代码5 算法应用1 模素数下的二次剩余问题 在数论中，给定一个素数 p p p 和一个整数 n n n...

编程日记 2024/11/4 19:59:28

SEER‘S EYE模型学术应用：LaTeX论文写作辅助与公式校对

SEERS EYE模型学术应用&#xff1a;LaTeX论文写作辅助与公式校对 写论文&#xff0c;尤其是理工科的论文&#xff0c;最头疼的是什么&#xff1f;十有八九会提到LaTeX。从搭建文档结构、处理复杂的数学公式&#xff0c;到确保格式规范、检查符号一致性&#xff0c;每一步都可能…...

编程新知 2026/4/3 10:35:26

经营分析会哪些指标最重要？老板最该看的10个经营分析指标

开经营分析会&#xff0c;最怕的就是数据。很多老板一开经营分析会就头疼&#xff1a;这么多数字&#xff0c;我到底该看哪个&#xff1f;做了十多年财务管理了&#xff0c;我一直在内部推行一套极简框架&#xff1a;所有经营讨论&#xff0c;都必须围绕这10个根本指标展开。这…...

编程新知 2026/4/3 10:35:26

智慧树网课效率工具：自动化播放与倍速控制插件全解析

智慧树网课效率工具&#xff1a;自动化播放与倍速控制插件全解析 【免费下载链接】zhihuishu 智慧树刷课插件&#xff0c;自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 在当今在线学习环境中&#xff0c;智慧树作为主流教育…...

编程新知 2026/4/3 8:23:04

Cisco Catalyst 8000 IOS XE 17.18.2 ED - 思科 Catalyst 8000 边缘平台系列 IOS XE 系统软件

Cisco Catalyst 8000 Series Edge Platforms, IOS XE Release 17.18.2 ED 思科 Catalyst 8000 边缘平台系列 IOS XE 系统软件 请访问原文链接&#xff1a;https://sysin.org/blog/cisco-catalyst-8000/ 查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff…...

编程新知 2026/4/3 7:20:26

GLM-4.1V-9B-Base实战教程：批量图片队列处理与异步结果回调机制实现

GLM-4.1V-9B-Base实战教程&#xff1a;批量图片队列处理与异步结果回调机制实现 1. 引言 在实际业务场景中&#xff0c;我们经常需要处理大量图片的分析任务。GLM-4.1V-9B-Base作为一款强大的视觉多模态理解模型&#xff0c;虽然提供了便捷的Web界面&#xff0c;但面对批量图…...

编程新知 2026/4/3 6:11:09

10个HTTPie CLI高级功能实战技巧：从入门到精通API调试

10个HTTPie CLI高级功能实战技巧&#xff1a;从入门到精通API调试 【免费下载链接】cli &#x1f967; HTTPie CLI — modern, user-friendly command-line HTTP client for the API era. JSON support, colors, sessions, downloads, plugins & more. 项目地址: https:/…...

编程新知 2026/4/3 4:21:27

扩散模型对抗样本经典baselines

1. 流图&#xff1a;数据的河流 如果把传统的堆叠面积图想象成一块块整齐堆叠的积木&#xff0c;那么流图就像一条蜿蜒流淌的河流&#xff0c;河道的宽窄变化自然流畅&#xff0c;波峰波谷过渡平滑。 它特别适合展示多个类别数据随时间的变化趋势&#xff0c;尤其是当你想强调整…...

编程新知 2026/4/3 1:59:20

渗流完美降雨边界：单、双重渗透介质降雨边界处理的改进探索

渗流完美降雨边界——基于单、双重渗透介质降雨边界处理的改进 [1]模型简介&#xff1a;使用数值模拟软件COMSOL复现论文&#xff08;窦智,刘一民,周志芳,等.基于单、双重渗透介质降雨边界处理的改进[J].岩土力学,2022,43(03):789-798.&#xff09;&#xff0c;该文献针对传统降…...

编程新知 2026/4/3 1:43:10

HUSB238 USB-C PD物理层驱动设计与ESP32集成指南

1. HUSB238 驱动库概述HUSB238 是由 Microchip 推出的 USB Type-C 和 USB PD&#xff08;Power Delivery&#xff09;源端&#xff08;Source&#xff09;控制器&#xff0c;专为高集成度、小尺寸 USB-C 充电应用设计。其核心功能包括&#xff1a;USB-C 插拔检测&#xff08;CC…...

编程新知 2026/4/3 0:22:13

产品经理、设计师必看：2026年6款AI界面生成工具实测，哪个最值得用？

过去&#xff0c;一款移动应用从需求文档到可交付原型&#xff0c;至少需要设计师投入 1~2 周时间。而今&#xff0c;借助 AI 界面生成工具&#xff0c;同样的工作可以压缩到几小时甚至几十分钟完成。目前AI界面生成工具正在重塑产品团队的工作方式。本文实测对比了 UXbot、Uiz…...

编程新知 2026/4/2 23:59:58