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

CesiumJS 案例 P19：添加矩形、监听鼠标左击、监听鼠标右击、监听鼠标移动

news 2026/5/18 13:14:06

CesiumJS

  • CesiumJS API：https://cesium.com/learn/cesiumjs/ref-doc/index.html

  • CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）

一、添加矩形

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>RectangleGraphics - 添加矩形</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 west = 0; // 西经（西经为负）const south = 0; // 南纬（南纬为负）const east = 10; // 东经（东经为正）const north = 10; // 北纬（北纬为正）// 添加矩形const rectangle = viewer.entities.add({rectangle: {coordinates: Cesium.Rectangle.fromDegrees(west, south, east, north),material: Cesium.Color.BLUE.withAlpha(0.5), // 半透明的蓝色},});</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_CLICK);</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_CLICK);</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);// 原点为左上角// 原点往右为 X 轴正方向// 原点往下为 Y 轴正方向handler.setInputAction((movement) => {console.log("移动位置为：", movement.endPosition.x, movement.endPosition.y);}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);</script>
</html>

相关文章：

CesiumJS 案例 P19：添加矩形、监听鼠标左击、监听鼠标右击、监听鼠标移动

CesiumJS CesiumJS API&#xff1a;https://cesium.com/learn/cesiumjs/ref-doc/index.html CesiumJS 是一个开源的 JavaScript 库&#xff0c;它用于在网页中创建和控制 3D 地球仪&#xff08;地图&#xff09; 一、添加矩形 <!DOCTYPE html> <html lang"en&…...

编程日记 2024/11/3 5:48:17

路测毫米波雷达标定和目标跟踪

1 2 3 4 5 6 查找匹配时&#xff0c;先对数据排序。逐帧对数据处理&#xff0c;运行速度快。单帧有噪点&#xff0c;多帧处理&#xff0c;准确率更高一些。 7 8 9 10 参考 路侧毫米波雷达标定与目标跟踪哔哔哩_bilibili路侧毫米波雷达标定与目标跟踪, 视频播放量 5855、弹幕量…...

编程日记 2024/11/3 5:47:16

【sqlmap使用手册-持续更新中】

SQLMap 简介 SQLMap 是一个开源的渗透测试工具&#xff0c;用于自动化检测和利用 SQL 注入漏洞。它支持多种数据库&#xff0c;包括 MySQL、PostgreSQL、Oracle、SQL Server 等。 可以通过以下命令安装sqlmap git clone https://github.com/sqlmapproject/sqlmap.git最常用的…...

编程日记 2024/11/3 5:45:12

面向对象三大特征之一：封 装

1、特点 封装是面向对象的核心思想&#xff0c;两层含义&#xff1a;一是一个整体&#xff08;把对象的属性和行为看成一个整体&#xff0c;即封装在一个对象种&#xff09;&#xff0c;二是信息隐藏&#xff0c;对外隐藏&#xff0c;但可以通过某种方式进行调用。 2、访问权…...

编程日记 2024/11/3 5:43:09

qt QMenuBar详解

1、概述 QMenuBar是Qt框架中用于创建菜单栏的类&#xff0c;它继承自QWidget。QMenuBar通常位于QMainWindow对象的标题栏下方&#xff0c;用于组织和管理多个QMenu&#xff08;菜单&#xff09;和QAction&#xff08;动作&#xff09;。菜单栏提供了一个水平排列的容器&#x…...

编程日记 2024/11/3 5:42:07

ESP32的下的蓝牙应用笔记（1）——Beacon蓝牙信标

Beacon蓝牙信标简介 ‌Beacon蓝牙信标‌是一种基于蓝牙低功耗&#xff08;BLE&#xff09;技术的设备&#xff0c;主要用于提供位置信息和数据传输服务。它通过周期性地广播信号&#xff0c;能够在一定范围内与其他蓝牙设备进行通信&#xff0c;从而提供精准的位置信息和相关服…...

编程日记 2024/11/3 5:39:04

控制台安全内部：创新如何塑造未来的硬件保护

在 Help Net Security 的采访中&#xff0c;安全研究人员 Specter 和 ChendoChap 讨论了游戏机独特的安全模型&#xff0c;并强调了它与其他消费设备的不同之处。 他们还分享了对游戏机安全性的进步将如何影响未来消费者和企业硬件设计的看法。 斯佩克特 (Specter) 是本周在阿…...

编程日记 2024/11/3 5:38:03

如何选择适合自己的 Python IDE

集成开发环境&#xff08;IDE&#xff09;是指提供广泛软件开发能力的软件应用程序。IDE 通常包括源代码编辑器、构建自动化工具和调试器。大多数现代 IDE 都配备了智能代码补全功能。在本文中&#xff0c;你将发现目前市场上最好的 Python IDE。 什么是 IDE&#xff1f; IDE…...

编程日记 2024/11/3 5:37:02

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

目 录 一&#xff0e;课程设计目的……………………………………………3 二&#xff0e;设计原理…………………………………………………3 三&#xff0e;详细设计步骤……………………………………………3 四. 设计结果及分析…………………………………………18 五. …...

编程日记 2024/11/3 5:36:01

kubesphere jenkins自动重定向 http://ks-apiserver:30880/oauth/authorize

问题&#xff1a;登陆kubesphere的jenkins Nodeport IP :Port 46.XXX.XXX.16:30180 自动跳转失败 http://ks-apiserver:30880/oauth/authorize?client_idjenkins&redirect_urihttp://46.XXX.XXX.16:30180/securityRealm/finishLogin&response_typecode&scopeopen…...

编程日记 2024/11/3 5:33:59

Vue3访问页面时自动获取数据

1. 使用生命周期钩子函数 # 后端代码--使用pywebview class Api:def greet(self):greet_text pywebview and vue3response {}response[text] greet_textreturn responseif __name__ __main__:# 前后端通信测试api Api()window webview.create_window(Vue app in pywebvie…...

编程日记 2024/11/3 5:32:58

go语言回调函数的使用

前言 在 Go 语言中&#xff0c;回调函数是一种将一个函数作为参数传递给另一个函数&#xff0c;在特定的事件发生时被调用的编程模式。 一、回调函数的定义 type OnTaskHandler func(r []byte)type remoteTaskClient struct {sync.RWMutexonTask OnTaskHandler } 以上定义了…...

编程日记 2024/11/3 5:31:57

区块链学习笔记(一）

区块链技术实现了去中心化的货币系统&#xff0c;与中心化记账方式不同&#xff0c;它消除了中间第三方&#xff0c;允许用户进行点对点交易&#xff0c;并确保了货币的真正所有权。此外&#xff0c;区块链的代码完全公开且不可篡改&#xff0c;保障了系统的透明度和安全性。 …...

编程日记 2024/11/3 5:30:56

解决QT打包发布App Store时(90238)错误

Invalid signature. The main app bundle, xxxx at the “xxxx.app” path, has the following signing error(s): [a sealed resource is missing or invalid. In subcomponent: xxxx.app/Contents/Frameworks/QtWebEngineCore.framework]. For details about signing Mac cod…...

编程日记 2024/11/3 5:29:55

使用Vite构建现代化前端应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Vite构建现代化前端应用 引言 Vite 简介 安装 Vite 创建项目 启动开发服务器 项目结构 配置 Vite 开发模式 生产构建 使用插…...

编程日记 2024/11/3 5:28:54

PyQt入门指南三十八 QWizard向导组件

在PyQt中&#xff0c;QWizard 是一个用于创建向导式应用程序的组件。向导是一种用户界面模式&#xff0c;它通过一系列逐步的页面引导用户完成某个任务。每个页面通常包含一些输入字段和选项&#xff0c;用户需要在每个页面上完成相应的操作&#xff0c;然后才能进入下一个页面…...

编程日记 2024/11/3 5:27:53

【数学二】线性代数-矩阵-矩阵的概念及运算

考试要求 1、理解矩阵的概念&#xff0c;了解单位矩阵、数量矩阵、对角矩阵、三角矩阵、对称矩阵、反对称矩阵和正交矩阵以及它们的性质. 2、掌握矩阵的线性运算、乘法、转置以及它们的运算规律&#xff0c;了解方阵的幂与方阵乘积的行列式的性质. 3、理解逆矩阵的概念&#x…...

编程日记 2024/11/3 5:24:50

近期学习前端的心得

1.如果你这一行的编辑权利在于你这一行的某个字段的值&#xff0c;你可以使用这样:disabled"scope.row.某字段 ! 某字段的值" 2.如果你不想使用弹出框的形式来修改数据库&#xff0c;可以采用 对“某字段”列使用了 el-input&#xff0c;并绑定了 v-model 到 sco…...

编程日记 2024/11/3 5:23:49

qt QMenu详解

1、概述 QMenu是Qt框架中的一个类&#xff0c;用于创建和管理菜单。它提供了丰富的接口来添加菜单项&#xff08;通常是QAction对象&#xff09;、子菜单以及分隔符。QMenu可以嵌入到菜单栏&#xff08;QMenuBar&#xff09;中&#xff0c;也可以作为弹出菜单&#xff08;通过…...

编程日记 2024/11/3 5:21:46

HTMLCSS：旋转的动态卡片

效果演示 这段代码创建了一个具有动态背景和渐变效果的卡片。卡片背景有一个无限循环的旋转动画&#xff0c;增加了视觉吸引力。这种效果可以用于展示个人信息、项目介绍或其他需要吸引用户注意的内容。 HTML <div class"card"><h3>前端Hardy</h3&…...

编程日记 2024/11/3 5:19:44

从流水线卡顿到丝滑训练：Deepspeed Pipeline Parallelism实战调优避坑指南

从流水线卡顿到丝滑训练&#xff1a;Deepspeed Pipeline Parallelism实战调优避坑指南 当你的Transformer模型参数量突破百亿级别&#xff0c;传统数据并行开始显露出明显的局限性——GPU内存不足、通信开销激增、计算资源利用率低下。这时&#xff0c;流水线并行&#xff08;P…...

编程新知 2026/5/18 11:58:14

AI 术语通俗词典：人工神经元

人工神经元是深度学习、神经网络和人工智能中非常基础的一个术语。它用来描述神经网络中最基本的数学计算单元。换句话说&#xff0c;人工神经元是在回答&#xff1a;模型怎样把多个输入信号加权合并&#xff0c;并转换成一个新的输出信号。如果说神经网络是一套由许多层组成的…...

编程新知 2026/5/18 11:35:02

小白程序员必看：收藏这份大模型Agent开发学习指南，轻松入门字节跳动暑期实习

本文分享了一位知识星球录友成功上岸字节跳动agent开发暑期实习的经验&#xff0c;包括面试准备、Agent开发学习资源推荐以及字节跳动面试题解析。文章强调了掌握Agent相关知识的重要性&#xff0c;并建议小白程序员学习C、Java或Go等编程语言&#xff0c;通过知识星球中的agen…...

编程新知 2026/5/18 10:48:21

通过taotoken审计日志追溯api调用详情与安全分析

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Taotoken审计日志追溯API调用详情与安全分析 对于将大模型API集成到业务流程中的团队而言&#xff0c;API调用的可见性与可控性…...

编程新知 2026/5/17 10:46:51

穿越机老鸟踩坑实录：MPU6000传感器在F4飞控上的IMU方向“玄学”配置

穿越机IMU方向配置实战&#xff1a;从MPU6000异常自旋到飞控底层校准 当你的穿越机在通电瞬间像被无形大手狠狠抽了一记耳光般疯狂自旋&#xff0c;而Betaflight地面站里陀螺仪数据却显示"一切正常"时&#xff0c;这往往意味着你正遭遇IMU方向配置的"量子纠缠态…...

编程新知 2026/5/17 10:35:00

柔性LED灯丝DIY：从电路原理到创意饰品制作全攻略

1. 项目概述&#xff1a;当生日遇上柔性LED灯丝给孩子的生日派对准备一份独一无二的、会发光的惊喜&#xff0c;是很多家长和手工爱好者的心愿。这次&#xff0c;我们不买现成的塑料灯牌&#xff0c;而是亲手做一个能戴在头上或挂在脖子上的“生日数字灯冠”。这个项目的核心&a…...

编程新知 2026/5/17 10:10:09

单元体幕墙计算方法研究

单元体幕墙计算方法研究 一、单元板块计算 选择隔离的单个单元进行计算，不需要考虑周边单元的影响。 单元之间的相互影响，来自于左右立柱的变形不一致，在截面选择上反应的就是左右立柱的截面参数的不同。 所以，单元间的相互影响，可以通过控制左右立柱截面参数的相近而进…...

编程新知 2026/5/18 10:41:44

qmcdump：专业解决QQ音乐加密音频格式兼容性问题

qmcdump&#xff1a;专业解决QQ音乐加密音频格式兼容性问题 【免费下载链接】qmcdump 一个简单的QQ音乐解码&#xff08;qmcflac/qmc0/qmc3 转 flac/mp3&#xff09;&#xff0c;仅为个人学习参考用。 项目地址: https://gitcode.com/gh_mirrors/qm/qmcdump 在数字音乐时…...

编程新知 2026/5/18 8:50:35

如何免费高效优化电脑性能：UXTU终极调优指南

如何免费高效优化电脑性能&#xff1a;UXTU终极调优指南 【免费下载链接】Universal-x86-Tuning-Utility Unlock the full potential of your Intel/AMD based device. 项目地址: https://gitcode.com/gh_mirrors/un/Universal-x86-Tuning-Utility Universal x86 Tuning…...

编程新知 2026/5/17 7:38:08

Adafruit Feather RP2040 SCORPIO：专为大规模NeoPixel灯光控制而生的开发板

1. 项目概述&#xff1a;为什么你需要一块专为大规模灯光控制而生的开发板&#xff1f;如果你曾经尝试过用一块普通的微控制器驱动超过几百个NeoPixel&#xff08;或WS2812&#xff09;LED&#xff0c;你很可能已经撞上了性能的天花板。CPU被时序生成任务完全占用&#xff0c;动…...

编程新知 2026/5/17 3:27:43