CesiumJS 案例 P19：添加矩形、监听鼠标左击、监听鼠标右击、监听鼠标移动
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：https://cesium.com/learn/cesiumjs/ref-doc/index.html CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图） 一、添加矩形 <!DOCTYPE html> <html lang"en&…...
路测毫米波雷达标定和目标跟踪
1 2 3 4 5 6 查找匹配时，先对数据排序。逐帧对数据处理，运行速度快。单帧有噪点，多帧处理，准确率更高一些。 7 8 9 10 参考 路侧毫米波雷达标定与目标跟踪哔哔哩_bilibili路侧毫米波雷达标定与目标跟踪, 视频播放量 5855、弹幕量…...
【sqlmap使用手册-持续更新中】
SQLMap 简介 SQLMap 是一个开源的渗透测试工具，用于自动化检测和利用 SQL 注入漏洞。它支持多种数据库，包括 MySQL、PostgreSQL、Oracle、SQL Server 等。 可以通过以下命令安装sqlmap git clone https://github.com/sqlmapproject/sqlmap.git最常用的…...
面向对象三大特征之一：封 装
1、特点 封装是面向对象的核心思想，两层含义：一是一个整体（把对象的属性和行为看成一个整体，即封装在一个对象种），二是信息隐藏，对外隐藏，但可以通过某种方式进行调用。 2、访问权…...
qt QMenuBar详解
1、概述 QMenuBar是Qt框架中用于创建菜单栏的类，它继承自QWidget。QMenuBar通常位于QMainWindow对象的标题栏下方，用于组织和管理多个QMenu（菜单）和QAction（动作）。菜单栏提供了一个水平排列的容器&#x…...
ESP32的下的蓝牙应用笔记（1）——Beacon蓝牙信标
Beacon蓝牙信标简介 Beacon蓝牙信标是一种基于蓝牙低功耗（BLE）技术的设备，主要用于提供位置信息和数据传输服务。它通过周期性地广播信号，能够在一定范围内与其他蓝牙设备进行通信，从而提供精准的位置信息和相关服…...
控制台安全内部：创新如何塑造未来的硬件保护
在 Help Net Security 的采访中，安全研究人员 Specter 和 ChendoChap 讨论了游戏机独特的安全模型，并强调了它与其他消费设备的不同之处。 他们还分享了对游戏机安全性的进步将如何影响未来消费者和企业硬件设计的看法。 斯佩克特 (Specter) 是本周在阿…...
如何选择适合自己的 Python IDE
集成开发环境（IDE）是指提供广泛软件开发能力的软件应用程序。IDE 通常包括源代码编辑器、构建自动化工具和调试器。大多数现代 IDE 都配备了智能代码补全功能。在本文中，你将发现目前市场上最好的 Python IDE。 什么是 IDE？ IDE…...
Matlab车牌识别课程设计报告模板(附源代码)
目 录 一．课程设计目的……………………………………………3 二．设计原理…………………………………………………3 三．详细设计步骤……………………………………………3 四. 设计结果及分析…………………………………………18 五. …...
kubesphere jenkins自动重定向 http://ks-apiserver:30880/oauth/authorize
问题：登陆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…...
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…...
go语言回调函数的使用
前言 在 Go 语言中，回调函数是一种将一个函数作为参数传递给另一个函数，在特定的事件发生时被调用的编程模式。 一、回调函数的定义 type OnTaskHandler func(r []byte)type remoteTaskClient struct {sync.RWMutexonTask OnTaskHandler } 以上定义了…...
区块链学习笔记(一）
区块链技术实现了去中心化的货币系统，与中心化记账方式不同，它消除了中间第三方，允许用户进行点对点交易，并确保了货币的真正所有权。此外，区块链的代码完全公开且不可篡改，保障了系统的透明度和安全性。 …...
错误)
解决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…...
使用Vite构建现代化前端应用
💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 使用Vite构建现代化前端应用 引言 Vite 简介 安装 Vite 创建项目 启动开发服务器 项目结构 配置 Vite 开发模式 生产构建 使用插…...
PyQt入门指南三十八 QWizard向导组件
在PyQt中，QWizard 是一个用于创建向导式应用程序的组件。向导是一种用户界面模式，它通过一系列逐步的页面引导用户完成某个任务。每个页面通常包含一些输入字段和选项，用户需要在每个页面上完成相应的操作，然后才能进入下一个页面…...
【数学二】线性代数-矩阵-矩阵的概念及运算
考试要求 1、理解矩阵的概念，了解单位矩阵、数量矩阵、对角矩阵、三角矩阵、对称矩阵、反对称矩阵和正交矩阵以及它们的性质. 2、掌握矩阵的线性运算、乘法、转置以及它们的运算规律，了解方阵的幂与方阵乘积的行列式的性质. 3、理解逆矩阵的概念&#x…...
近期学习前端的心得
1.如果你这一行的编辑权利在于你这一行的某个字段的值，你可以使用这样:disabled"scope.row.某字段 ! 某字段的值" 2.如果你不想使用弹出框的形式来修改数据库，可以采用 对“某字段”列使用了 el-input，并绑定了 v-model 到 sco…...
qt QMenu详解
1、概述 QMenu是Qt框架中的一个类，用于创建和管理菜单。它提供了丰富的接口来添加菜单项（通常是QAction对象）、子菜单以及分隔符。QMenu可以嵌入到菜单栏（QMenuBar）中，也可以作为弹出菜单（通过…...
HTMLCSS：旋转的动态卡片
效果演示 这段代码创建了一个具有动态背景和渐变效果的卡片。卡片背景有一个无限循环的旋转动画，增加了视觉吸引力。这种效果可以用于展示个人信息、项目介绍或其他需要吸引用户注意的内容。 HTML <div class"card"><h3>前端Hardy</h3&…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞！！！ 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...