cesium入门学习三
这期主要学习一下鼠标点击事件以及鼠标滚轮事件。
学习目录总结:
cesium入门学习一-CSDN博客
cesium入门学习二-CSDN博客
1.鼠标事件
1.1 点击鼠标左键显示经度、纬度、高度
效果:

js代码:
var viewer = new Cesium.Viewer('cesiumContainer');// 添加鼠标点击事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {// 获取鼠标点击的位置var clickPosition = viewer.scene.pickPosition(event.position);// 检查是否点击到有效的三维位置if (Cesium.defined(clickPosition)) {// 将笛卡尔坐标转换为经纬度var cartographic = Cesium.Cartographic.fromCartesian(clickPosition);var longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6); // 转换为度并保留小数var latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);var height = cartographic.height.toFixed(2); // 高度保留两位小数// 在点击点绘制一个红色标记viewer.entities.add({position: clickPosition,point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,},label: {text: `Lon: ${longitude}\nLat: ${latitude}\nAlt: ${height}`,font: '14px sans-serif',style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.BLACK,verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签位置位于点上方pixelOffset: new Cesium.Cartesian2(0, -20) // 标签偏移量}});}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
1.2 鼠标左键点击连成轨迹线
效果:

代码:
// 初始化 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');// 存储轨迹点
var trackPoints = [];// 创建轨迹线实体
var trackLine = viewer.entities.add({polyline: {positions: trackPoints,width: 2,material: Cesium.Color.BLUE}
});// 添加鼠标点击事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {// 获取鼠标点击的位置var clickPosition = viewer.scene.pickPosition(event.position);// 检查是否点击到有效的三维位置if (Cesium.defined(clickPosition)) {// 将笛卡尔坐标转换为经纬度var cartographic = Cesium.Cartographic.fromCartesian(clickPosition);var longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6); // 转换为度并保留小数var latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);var height = cartographic.height.toFixed(2); // 高度保留两位小数// 在点击点绘制一个红色标记viewer.entities.add({position: clickPosition,point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,},label: {text: `Lon: ${longitude}\nLat: ${latitude}\nAlt: ${height}`,font: '14px sans-serif',style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.BLACK,verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签位置位于点上方pixelOffset: new Cesium.Cartesian2(0, -20) // 标签偏移量}});// 添加点到轨迹数组trackPoints.push(clickPosition);// 更新轨迹线的路径trackLine.polyline.positions = trackPoints;}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
1.3 鼠标点击两个点以曲线的方式连接显示
效果:

js代码:
//第13个程序 点击两个点以曲线的方式连接
// 初始化 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');// 存储点击点的坐标
var points = [];// 添加鼠标点击事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {// 获取鼠标点击的位置var clickPosition = viewer.scene.pickPosition(event.position);// 检查是否点击到有效的三维位置if (Cesium.defined(clickPosition)) {// 在点击点绘制一个红色标记viewer.entities.add({position: clickPosition,point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,}});// 添加点击点到数组points.push(clickPosition);// 如果已有两个点,绘制曲线if (points.length === 2) {drawCurve(points[0], points[1]);points = []; // 清空点列表以准备下一组连接}}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 绘制曲线函数
function drawCurve(start, end) {// 插值点数量var numPoints = 50;// 将起点和终点转为 Cartographicvar startCartographic = Cesium.Cartographic.fromCartesian(start);var endCartographic = Cesium.Cartographic.fromCartesian(end);// 插值生成曲线点var curvePoints = [];for (var i = 0; i <= numPoints; i++) {var t = i / numPoints; // 插值参数 [0, 1]var lon = Cesium.Math.lerp(startCartographic.longitude,endCartographic.longitude,t);var lat = Cesium.Math.lerp(startCartographic.latitude,endCartographic.latitude,t);// 使用简单的二次曲线高度效果var height =(1 - t) * startCartographic.height +t * endCartographic.height +Math.sin(Math.PI * t) * 1000; // 高度增加一个波形curvePoints.push(Cesium.Cartesian3.fromRadians(lon, lat, height));}// 添加曲线实体viewer.entities.add({polyline: {positions: curvePoints,width: 2,material: Cesium.Color.YELLOW}});
}
1.4 鼠标点击生成范围圆圈
效果:

代码:
var viewer = new Cesium.Viewer('cesiumContainer');// 添加鼠标点击事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {// 获取鼠标点击的位置var clickPosition = viewer.scene.pickPosition(event.position);// 检查是否点击到有效的三维位置if (Cesium.defined(clickPosition)) {// 在点击点绘制一个红色标记viewer.entities.add({position: clickPosition,point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,}});// 在点击点生成圆形范围createCircle(clickPosition, 1000); // 半径 1000 米}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 创建圆形范围函数
function createCircle(center, radius) {// 将中心点转为 Cartographicvar centerCartographic = Cesium.Cartographic.fromCartesian(center);var centerLon = centerCartographic.longitude;var centerLat = centerCartographic.latitude;// 生成圆形的边界点var numPoints = 100; // 圆形边界点数量var positions = [];for (var i = 0; i < numPoints; i++) {var angle = (i / numPoints) * 2 * Math.PI;var offsetLon = centerLon + (radius / 6378137) * Math.cos(angle); // 地球半径近似值 6378137 米var offsetLat = centerLat + (radius / 6378137) * Math.sin(angle);positions.push(Cesium.Cartesian3.fromRadians(offsetLon, offsetLat, centerCartographic.height));}// 添加圆形实体viewer.entities.add({polygon: {hierarchy: positions,material: Cesium.Color.BLUE.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.WHITE,}});
}
相关文章:
cesium入门学习三
这期主要学习一下鼠标点击事件以及鼠标滚轮事件。 学习目录总结: cesium入门学习一-CSDN博客 cesium入门学习二-CSDN博客 1.鼠标事件 1.1 点击鼠标左键显示经度、纬度、高度 效果: js代码: var viewer new Cesium.Viewer(cesiumConta…...
swagger,showdoc,apifox,Mock 服务,dubbo,ZooKeeper和dubbo的关系
Swagger、ShowDoc 和 Apifox 之间的区别与优势 Swagger、ShowDoc 和 Apifox 都是用于 API 文档管理和测试的工具,但它们各有特色和适用场景。以下是详细的比较,并附上每个工具的具体用法示例。 1. Swagger 特点与优势: 广泛采用: Swagger…...
【自信息、信息熵、联合熵、条件熵、互信息】
文章目录 一、自信息 I(X)二、信息熵:衡量系统的混乱程度信息熵 H(X)联合熵 H(X,Y) 三、条件熵H(Y|X) 联合熵H(X,Y) - 信息熵H(X)四、互信息 I(X,Y)五、总结References 一、自信息 I(X) 自信息(Self-information) 是由香农提出的,用来衡量单一事件发生…...
免费资源网站
记录一下 音效 爱给网制片帮素材...
C++--------继承
一、继承的基本概念 继承是 C 中的一个重要特性,它允许一个类(派生类或子类)继承另一个类(基类或父类)的属性和方法。这样可以实现代码的重用和建立类之间的层次关系。 #include <iostream>// 基类 class Base…...
Python PyMupdf 去除PDF文档中Watermark标识水印
通过PDF阅读或编辑工具,可在PDF中加入Watermark标识的PDF水印,如下图: 该类水印特点 这类型的水印,会在文件的字节流中出现/Watermark、EMC等标识,那么,我们可以通过改变文件字节内容,清理掉…...
改进爬山算法之四:概率爬山法(Probabilistic Hill Climbing,PHC)
概率爬山法(Probabilistic Hill Climbing,PHC)是一种局部搜索算法,它结合了随机性和贪婪搜索的特点,是对爬山算法(Hill Climbing Algorithm)的一种变体或扩展。与传统的爬山法不同,PHC不是总是选择最优的邻居作为下一步的移动,而是以一定的概率选择最优邻居,同时以一…...
解读DeepseekV3
本年度还剩几天,Deepseek就发布了这么值得惊喜的产品,我觉得是真正做AI,也喜欢AI同学,对这个魔幻的2024年12月,一定是未来多少年想起都能回忆起这波澜壮阔的岁月。 我见过的最省的GPT4o,Claude,…...
【网络安全 | 漏洞挖掘】如何通过竞态条件发现账户接管漏洞
未经许可,不得转载。 文章目录 背景正文设置竞态条件实现漏洞背景 目标应用允许用户创建项目。这些项目中包含多个用户角色,每个角色权限不同(如所有者、管理员、成员管理者等)。用户可通过接受邀请来加入项目,而只有项目所有者才能通过输入邮箱将项目所有权转移给其他用…...
串口通信标准RS232、RS422、RS485有什么区别和不同
目录 第一个区别:硬件管脚接口定义不同: 第二个区别、工作方式不同 第三个区别、通信方式不同 第四个区别,逻辑特性不同 第五个区别、抗干扰性、传输距离和传输速率也不同 RS-232与RS-485对比 RS-422与RS-485对比 今天给大家分享的是&…...
win版ffmpeg的安装和操作
一、ffmpeg软件安装: ffmpeg是一个通过命令行将视频转化为图片的软件。 在浏览器搜索ffmpeg在官网里找到软件并下载(不过官网很慢),建议用这个下载。 下载的文件是一个zip压缩包,将压缩包解压,有如下文件…...
力扣56. 合并区间
此题在技巧上需要掌握Lambda表达式,在 C 的 Lambda 表达式 中,[] 是 捕获列表(capture list),用于指定 Lambda 表达式如何访问其外部作用域的变量。 [捕获列表](参数列表) -> 返回类型 {函数体 };• 捕获列表&…...
2024基于大模型的智能运维(附实践资料合集)
基于大模型的智能运维是指利用人工智能技术,特别是大模型技术,来提升IT运维的效率和质量。以下是一些关键点和实践案例: AIOps的发展:AIOps(人工智能在IT运维领域的应用)通过大数据分析和机器学习技术&…...
Android Java 版本的 MSAA OpenGL ES 多重采样
最近多次被小伙伴问到 OpenGL 多重采样,其实前面文章里多次讲过了,就是构建2个缓冲区,多重采样缓冲区和目标解析缓冲区。 代码流程 // Framebuffer IDs private int msaaFBO; private int msaaColorBuffer; private int msaaDepthBuffer;pr…...
YOLO11改进-注意力-引入自调制特征聚合模块SMFA
本篇文章将介绍一个新的改进机制——SMFA(自调制特征聚合模块),并阐述如何将其应用于YOLOv11中,显著提升模型性能。随着深度学习在计算机视觉中的不断进展,目标检测任务也在快速发展。YOLO系列模型(You Onl…...
VMware虚拟机安装银河麒麟操作系统KylinOS教程(超详细)
目录 引言1. 下载2. 安装 VMware2. 安装银河麒麟操作系统2.1 新建虚拟机2.2 安装操作系统2.3 网络配置 3. 安装VMTools 创作不易,禁止转载抄袭!!!违者必究!!! 创作不易,禁止转载抄袭…...
Elasticsearch-索引的批量操作
索引的批量操作 批量查询和批量增删改 批量查询 #批量查询 GET product/_search GET /_mget {"docs": [{"_index": "product","_id": 2},{"_index": "product","_id": 3}] }GET product/_mget {"…...
【Android】application@label 属性属性冲突报错
错误记录 What went wrong: Execution failed for task :app:processDebugMainManifest. > Manifest merger failed : Attribute applicationlabel value(string/app_name) from AndroidManifest.xml:8:9-41is also present at [:abslibrary] AndroidManifest.xml:25:9-47 v…...
手机发烫怎么解决?
在当今这个智能手机不离手的时代,手机发烫成了不少人头疼的问题。手机发烫不仅影响使用手感,长期过热还可能损害手机硬件、缩短电池寿命,甚至引发安全隐患。不过别担心,下面这些方法能帮你有效给手机 “降温”。 一、使用习惯方面…...
【Artificial Intelligence篇】AI 携手人类:共铸未来创作新纪元
引言: 随着科技的飞速发展,人工智能已逐渐渗透到各个领域,尤其是在创作领域,其与人类的合作展现出了前所未有的可能性和潜力。从艺术作品的生成到文学作品的创作,从复杂软件的开发到创新设计的构思,AI 正在…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
【kafka】Golang实现分布式Masscan任务调度系统
要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
