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

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

news 2026/3/30 3:59:04

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

OpenClaw+GLM-4.7-Flash：自动化会议纪要生成实践

OpenClawGLM-4.7-Flash&#xff1a;自动化会议纪要生成实践 1. 为什么需要自动化会议纪要 每周三下午的团队例会是我最头疼的时刻。作为技术负责人&#xff0c;我需要同时参与讨论、记录关键决策点、跟踪行动项&#xff0c;最后还要整理成文档发给全员。手忙脚乱的结果往往是…...

编程新知 2026/3/30 3:00:41

OpenClaw插件开发：为Qwen3.5-4B-Claude添加Excel处理能力

OpenClaw插件开发&#xff1a;为Qwen3.5-4B-Claude添加Excel处理能力 1. 为什么需要开发Excel处理插件 上周我需要处理一批销售数据报表时&#xff0c;突然意识到一个痛点&#xff1a;虽然Qwen3.5-4B-Claude模型在结构化分析上表现优异&#xff0c;但要让它真正帮我完成Excel…...

编程新知 2026/3/30 2:40:37

TypeScript——编译器和编译选项

编译器和编译选项 1、编译器1.1、安装编译器1.1.1、--help、--all1.1.2、--version 2、编译程序2.1、编译单个文件2.2、编译多个文件2.3、--watch和-w2.4、--presserveWatchOutput 2、编译选项2.1、编译选项风格2.2、使用编译选项2.3、严格类型检查2.3.1、--strict2.3.2、--nol…...

编程新知 2026/3/30 1:15:58

5个核心功能实现全球多语言语音降噪：基于深度滤波的开源解决方案

5个核心功能实现全球多语言语音降噪&#xff1a;基于深度滤波的开源解决方案 【免费下载链接】DeepFilterNet Noise supression using deep filtering 项目地址: https://gitcode.com/GitHub_Trending/de/DeepFilterNet 在当今全球化的语音通信时代&#xff0c;背景噪声…...

编程新知 2026/3/30 1:13:57

GPT-SoVITS语音克隆技术深度解析：从原理到实战的完整指南

GPT-SoVITS语音克隆技术深度解析&#xff1a;从原理到实战的完整指南 【免费下载链接】GPT-SoVITS 项目地址: https://gitcode.com/GitHub_Trending/gp/GPT-SoVITS 你是否曾幻想过&#xff0c;只需短短几秒钟的录音&#xff0c;就能让AI完美模仿任何人的声音&#xff1…...

编程新知 2026/3/30 0:37:44

三极管倍频 vs 锁相环倍频：短波通信场景下的5个关键性能对比实验

三极管倍频与锁相环倍频在短波通信中的5组实测性能对决 短波通信系统的核心挑战之一在于如何生成高稳定度的射频信号。当工程师需要在有限频谱资源中实现高效传输时&#xff0c;频率合成技术的选择往往决定了系统整体性能。本文将基于实际测试平台&#xff0c;对比分析三极管倍…...

编程新知 2026/3/30 0:33:43

ESP32嵌入式Web文件管理器：支持SPIFFS/LittleFS/SD卡

1. EspWebFileManager 库概述EspWebFileManager 是一款专为 ESP32 平台设计的嵌入式 Web 文件管理中间件库&#xff0c;其核心目标是将本地文件系统操作能力通过轻量级 HTTP 服务暴露至浏览器端&#xff0c;实现免串口、免烧录工具的现场文件运维。该库并非独立文件系统驱动&am…...

编程新知 2026/3/30 0:27:42

PaddleOCR方向分类器优化：基于文本矩形框筛选的准确率提升实践

1. 为什么需要优化PaddleOCR方向分类器 在实际项目中&#xff0c;我们经常遇到需要处理各种方向文本图片的场景。PaddleOCR作为一款优秀的开源OCR工具&#xff0c;虽然内置了方向分类功能&#xff0c;但在实际使用中发现&#xff0c;对于90度和270度旋转的文本图片&#xff0c;…...

编程新知 2026/3/30 0:09:26

CCXT 统一接口与多交易所量化策略实战

1. CCXT&#xff1a;量化交易的瑞士军刀 第一次接触CCXT是在2017年&#xff0c;当时为了同时对接三家交易所的API&#xff0c;我写了近2000行差异化的接口代码。直到发现这个开源库&#xff0c;才意识到原来90%的重复工作都可以用10行代码解决。CCXT&#xff08;Cryptocurrency…...

编程新知 2026/3/29 23:53:23

[特殊字符]Java面试高频：阿里面试官追问——Redis为什么这么快？（3分钟速通版）

一、真实面试场景&#xff08;代入感压迫感&#xff09; 上周&#xff0c;我在做模拟面试辅导时&#xff0c;一个 3 年经验的同学被问到&#xff1a; 面试官&#xff1a;你项目里用到了 Redis&#xff0c;对吧&#xff1f; 那你说一下 —— Redis 为什么这么快&#xff1f; 他…...

编程新知 2026/3/29 23:15:09