CesiumJS 案例 P15：检测标记、鼠标点击移动标记、鼠标拖动标记
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>Billboard - 检测标记</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%;}.btn-remove-marker {position: fixed;left: 0px;top: 0px;}.btn-check-marker {position: fixed;left: 0px;top: 50px;}</style></head><body><div id="container"></div><button class="btn-remove-marker">删除标记</button><button class="btn-check-marker">检测标记</button></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");const billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());const billboard = billboards.add({image: "../img/marker-icon.png",position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),verticalOrigin: Cesium.VerticalOrigin.BOTTOM,});const btnRemoveMarker = document.querySelector(".btn-remove-marker");const btnCheckMarker = document.querySelector(".btn-check-marker");btnRemoveMarker.addEventListener("click", () => {billboards.remove(billboard);});btnCheckMarker.addEventListener("click", () => {console.log(billboards.contains(billboard));});</script>
</html>
二、鼠标点击移动标记
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Billboard - 鼠标点击移动标记</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 billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());const billboard = billboards.add({id: "billboard-test",image: "../img/marker-icon.png",position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),verticalOrigin: Cesium.VerticalOrigin.BOTTOM,});let isSelect = false;viewer.screenSpaceEventHandler.setInputAction((click) => {if (isSelect) {// 获取左击位置的射线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));// 将地理弧度坐标（Cartographic）转换为笛卡尔坐标（Cartesian3）const cartesian3 = Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);billboard.position = cartesian3;} else {console.log("落点不在地球球面");alert("落点不在地球球面，请重新操作");}isSelect = false;return;}const pickedObject = viewer.scene.pick(click.position);if (Cesium.defined(pickedObject) && pickedObject.id === "billboard-test") {console.log("点击了标记！！！");isSelect = true;} else {console.log("未点击标记");}}, 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>Billboard - 鼠标拖动标记</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 billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());const billboard = billboards.add({id: "billboard-test",image: "../img/marker-icon.png",position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),verticalOrigin: Cesium.VerticalOrigin.BOTTOM,});let isSelect = false;let originPositon;viewer.screenSpaceEventHandler.setInputAction((click) => {if (isSelect) {// 获取左击位置的射线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));// 将地理弧度坐标（Cartographic）转换为笛卡尔坐标（Cartesian3）const cartesian3 = Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);billboard.position = cartesian3;} else {console.log("落点不在地球球面");alert("落点不在地球球面，请重新操作");billboard.position = originPositon;}isSelect = false;return;}const pickedObject = viewer.scene.pick(click.position);if (Cesium.defined(pickedObject) && pickedObject.id === "billboard-test") {console.log("点击了标记！！！");isSelect = true;originPositon = billboard.position.clone();} else {console.log("未点击标记");}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);viewer.screenSpaceEventHandler.setInputAction((movement) => {if (!isSelect) return;const pickRay = viewer.camera.getPickRay(movement.endPosition);const pickPosition = viewer.scene.globe.pick(pickRay, viewer.scene);if (Cesium.defined(pickPosition)) {const cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(pickPosition);console.log("移动位置在地球球面，地理坐标为：", Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude));const cartesian3 = Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);billboard.position = cartesian3;} else {console.log("移动位置不在地球球面");alert("移动位置不在地球球面，请重新操作");billboard.position = originPositon;isSelect = false;}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);</script>
</html>
相关文章：
CesiumJS 案例 P15：检测标记、鼠标点击移动标记、鼠标拖动标记
CesiumJS CesiumJS API：https://cesium.com/learn/cesiumjs/ref-doc/index.html CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图） 一、检测标记 <!DOCTYPE html> <html lang"en&…...
Webserver(4.9)本地套接字的通信
目录 本地套接字 本地套接字 TCP\UDP实现不同主机、网络通信 本地套接字实现本地的进程间的通信，类似的，一般采用TCP的通信流程 生成套接字文件 #include<arpa/inet.h> #include<stdio.h> #include<stdlib.h> #include<unistd.h&…...
[IAA系列] Image Aesthetic Assessment
Preface 本文旨在记录个人结合AI工具对IAA这个领域的一些了解，主要是通过论文阅读的方式加深对领域的了解。有什么问题，欢迎在评论区提出并讨论。 什么是IAA Image Aesthetic Assessment（图像美学评估）是一种评估图像在视觉上的…...
基于springboot的高校科研管理系统(源码+调试+LW)
项目描述 临近学期结束，还是毕业设计，你还在做java程序网络编程，期末作业，老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据你想解决的问题，今天给…...
Flutter环境配置
配置环境变量 PUB_HOSTED_URLhttps://pub.flutter-io.cn FLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn 这个命令是用来配置 Flutter 的镜像源地址，主要是为了解决在中国大陆地区访问 Flutter 官方资源较慢的问题 具体的操作做如下: 右键点击"此…...
Rip动态路由及Rip动态路由优化
动态路由Rip Tip：Rip动态路由实现多个路由间不同网段通信。 本次实验目的，通过给ar1,ar2,ar3配置rip动态路由，实现pc1 ping通 pc2。 AR1配置如下： <Huawei>sy Enter system view, return user view with CtrlZ. [Huawei]…...
双路快速排序和三路排序算法
双路快速排序 一、概念及其介绍 双路快速排序算法是随机化快速排序的改进版本，partition 过程使用两个索引值（i、j）用来遍历数组，将 <v 的元素放在索引i所指向位置的左边，而将 >v 的元素放在索引j所指向位置的…...
SQL server增删改查语句和实例
在 SQL Server 中，增删改查操作分别对应 INSERT、DELETE、UPDATE 和 SELECT 语句。以下是具体介绍及实例： 一、插入数据（INSERT） 语法： INSERT INTO table_name (column1, column2, column3,...) VALUES (value1, val…...
强化学习_06_pytorch-PPO2实践(ALE/Breakout-v5)
一、环境适当调整 数据收集：RecordEpisodeStatistics进行起始跳过n帧：baseSkipFrame一条生命结束记录为done:EpisodicLifeEnv得分处理成0或1:ClipRewardEnv叠帧: FrameStack 图像环境的基本操作，方便CNN捕捉智能体的行动 向量空间reset处理修…...
《JVM第8课》垃圾回收算法
文章目录 1.标记算法1.1 引用计数法1.2 可达性分析法 2.回收算法2.1 标记-清除算法（Mark-Sweep）2.2 复制算法（Coping）2.3 标记-整理算法（Mark-Compact） 3.三种垃圾回收算法的对比 为什么要进行垃圾回收&…...
SpringBoot整合Freemarker（二）
if分支 语法： <#if condition>... <#elseif condition2>... <#elseif condition3>... <#else>... </#if> 例子： <#if x 1>x is 1 </#if> --------------------------------- <#if x 1>x is 1 <…...
element plus el-form自定义验证输入框为纯数字函数
element plus 的el-form 使用自定义验证器，验证纯数字，禁止输入小数、中文、字母、特殊符号。input的maxlength为最大输入多少位长度 效果图 <el-form ref"dataFormRef" :model"dataForm" :rules"dataRules" label-w…...
Android笔记(三十一)：Deeplink失效问题
背景 通过deeplink启动应用之后，没关闭应用的情况下，再次使用deeplink会失效的问题，是系统bug导致的。此bug仅在某些设备（Nexus 5X）上重现，launchMode并且仅当应用程序最初通过深层链接启动并再次通过深层…...
图神经网络初步实验
实验复现来源 https://zhuanlan.zhihu.com/p/603486955 该文章主要解决问题： 1.加深对图神经网络数据集的理解 2.加深对图神经网络模型中喂数据中维度变化的理解 原理问题在另一篇文章分析： 介绍数据集：cora数据集 其中的主要内容表示为…...
创建线程时传递参数给线程
在C中，可以使用 std::thread 来创建和管理线程，同时可以通过几种方式将参数传递给线程函数。这些方法包括使用值传递、引用传递和指针传递。下面将对这些方法进行详细讲解并给出相应的代码示例。 1. 值传递参数 当你创建线程并希望传递参数时ÿ…...
兴业严选|美国总统都是不良资产出身 法拍市场是否将大众化
北京时间11月6日，特朗普赢得美国大选。 说起特朗普那就不得不提他的发家史，那可真是一笔笔不良资产投资堆出来的。 没错，特朗普就是处理不良资产的高手，战果丰硕。 改造斯威夫特小镇、 康莫德酒店、打造特朗普（TRUM…...
C#-拓展方法
概念：为现有的非静态变量类型，添加方法 语法： 访问修饰符 static 返回值 函数名(this 拓展类名 参数名, 参数类型 参数名,参数类型 参数名....){} 而public static void F(this Console()){ }是错的。Console是静态类不可以为静态类添加方…...
加锁失效，非锁之过，加之错也|京东零售供应链库存研发实践
本文导读 从事京东零售供应链库存业务，库存数量操作增减十分频繁，并且项目开发中会常常遇到各种并发情况，一旦库存数量操作有误，势必给前台销售产生损失影响，因此需要关注对库存数量并发操作下的一致性问题。 大部分…...
vue3 传值的几种方式
一.父组件传子组件 父组件 //父组件 <Decisionobject :Decisionselected"Decisionselected"></Decisionobject> <script lang"ts" setup> let Decisionselected ref(false); </script>子组件 <script lang"ts" s…...
AUTOSAR CP NVRAM Manager规范导读
一、NVRAM Manager功能概述 NVRAM Manager是AUTOSAR（AUTomotive Open System ARchitecture）框架中的一个模块，负责管理非易失性随机访问存储器（NVRAM）。它提供了一组服务和API，用于在汽车环境中存储、维护和恢复NV数据。以下是NVRAM Manager的一些关键功能： 数据存储和…...
2024阿里云CTF Web writeup
《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect 前言 又是周末…...
软件著作权申请教程（超详细）（2024新版）软著申请
目录 一、注册账号与实名登记 二、材料准备 三、申请步骤 1.办理身份 2.软件申请信息 3.软件开发信息 4.软件功能与特点 5.填报完成 一、注册账号与实名登记 首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。中…...
三维测量与建模笔记 - 3.2 直接线性变换法标定DLT
DLT - Direct Linear Transform 上图中，透视成像对应的公式是共线方程，可以参考以下链接： https://zhuanlan.zhihu.com/p/101549821https://zhuanlan.zhihu.com/p/101549821 对于标定来说，需要找到。已知量是。 (u,v)是…...
Whisper AI视频（音频）转文本
在信息化时代，如何高效处理丰富的音频和视频内容成为了一个重要课题。将这些内容转化为文本不仅能提高信息的可获取性，还能促进更广泛的传播。Whisper Desktop作为一款先进的语音识别工具，能够帮助用户轻松实现音频和视频的转文本功能。 什么…...
全网最详细RabbitMQ教学包括如何安装环境【RabbitMQ】RabbitMQ + Spring Boot集成零基础入门（基础篇）
目录 一、初始Rabbitmq1、什么是Rabbitmq，它的概述是什么？2、RabbitMQ的应用场景3、RabbitMQ主要组件4、RabbitMQ 的优点5、与其他消息队列性能比较 二、RabbitMQ环境安装初始化三、SpringAMQPRabbitMQ实战入门（基本API）1、实战入…...
esp32记录一次错误
报错信息 PS C:\XingNian\GeRen\4Gdownload\wireless-esp8266-dap> idf.py build Executing action: all (aliases: build) Running cmake in directory c:\xingnian\geren\4gdownload\wireless-esp8266-dap\build Executing "cmake -G Ninja -DPYTHON_DEPS_CHECKED1 …...
Moonshine - 新型开源ASR（语音识别）模型，体积小，速度快，比OpenAI Whisper快五倍 本地一键整合包下载
Moonshine 是由 Useful Sensors 公司推出的一系列「语音到文本（speech-to-text, STT）转换模型」，旨在为资源受限设备提供快速而准确的「自动语音识别（ASR）服务」。Moonshine 的设计特别适合于需要即时响应的应用场景&a…...
java-web-苍穹外卖-day1:软件开发步骤简化版+后端环境搭建
软件开发 感觉书本上和线上课程, 讲的太抽象, 不好理解, 但软件开发不就是为了开发应用程序吗?! 干嘛搞这么抽象,对吧, 下面个人对于软件开发的看法, 主打简单易懂, 当然,我一IT界小菜鸟, 对软件开发的认识也很浅显, 这个思维导图也仅仅是现阶段我的看法, 我以后会尽力…...
一个国产 API 开源项目，在 ProductHunt 杀疯了...
随着AI 大模型技术的兴起，全球产品更新和面市进程速度肉眼可见的加快，Product Hunt 作为全球知名的产品发现平台，每日都会精选出一系列产品能力强劲的新产品，这些产品不仅代表了技术前沿，还反映了市场的发展趋势。 上…...
斗破QT编程入门系列之二：认识Qt：编写一个HelloWorld程序（四星斗师）
斗破Qt目录： 斗破Qt编程入门系列之前言：认识Qt：Qt的获取与安装（四星斗师） 斗破QT编程入门系列之一：认识Qt：初步使用（四星斗师） 斗破QT编程入门系列之二：认识…...