cesium入门学习三

devtools/2024/12/27 10:04:20/

             这期主要学习一下鼠标点击事件以及鼠标滚轮事件。

学习目录总结:

cesium入门学习一-CSDN博客

cesium入门学习二-CSDN博客

1.鼠标事件

1.1 点击鼠标左键显示经度、纬度、高度

效果:

js代码:

javascript">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 鼠标左键点击连成轨迹线

效果:

代码:

javascript">// 初始化 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代码:

javascript">//第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  鼠标点击生成范围圆圈

效果:

代码:

javascript">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,}});
}


http://www.ppmy.cn/devtools/145781.html

相关文章

安卓端侧大模型MLC-LLM部署全攻略:以InternLM2.5-1.8B为例

本文来自社区投稿&#xff0c;作者&#xff1a;Tim 算法工程师 MLC-LLM 是一个机器学习编译器和高性能大型语言模型部署引擎。该项目的使命是让每个人都能在自己的平台上开发、优化和部署 AI 模型。InternLM 2.5 是上海人工智能实验室发布的新一代大规模语言模型&#xff0c;相…

CES Asia 2025优惠期倒计时5天,科技盛宴即将开启

随着时间的推移&#xff0c;备受瞩目的CES Asia 2025优惠期已进入最后5天倒计时。 作为亚洲顶级的消费电子盛会&#xff0c;CES Asia 2025将汇聚众多国内外知名的科技企业&#xff0c;展示涵盖智能家居、智能出行、虚拟现实、人工智能等热门赛道的顶尖成果&#xff0c;是行业交…

Linux零基础速成篇一(理论+实操)

前言&#xff1a;本教程适合Linux零基础学习&#xff0c;也适合Linux期末考试的小伙伴&#xff0c;从头到尾理论与实操相结合&#xff0c;让你快速对Linux进行了解和掌握。 一、Linux概述 为什么要学习Linux操作系统&#xff1f; 完全免费-开源 任何用户均可下载使用 安全…

使用TimesFM 对车辆销售进行预测

代码功能概述 导入相关包与设置环境变量&#xff1a; 首先导入了如 os、numpy、pandas 等常用的 Python 库&#xff0c;同时设置了一些与特定库&#xff08;如 XLA_PYTHON_CLIENT_PREALLOCATE 和 JAX_PM AP_USE_TENSORSTORE&#xff09;相关的环境变量&#xff0c;用于优化计算…

农家乐系统|Java|SSM|VUE| 前后端分离

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、VUE、jquery,html 5⃣️数据库可…

网页数据的解析提取之xpath

上一篇博客我们实现了一个最基本的爬虫&#xff0c;但提取页面信息时使用的是正则表达式&#xff0c;过程比较烦琐&#xff0c;而且万一有地方写错了&#xff0c;可能会导致匹配失败&#xff0c;所以使用正则表达式提取页面信息多少还是有些不方便。 对于网页的节点来说&#…

32单片机综合案例——智能环境监控系统

庆祝成功&#xff1a; "所有的汗水和付出&#xff0c;在这一刻都化作了最甜美的果实&#xff01;""今天的成绩是对昨天努力的最佳回报&#xff0c;明天我们将更加辉煌&#xff01;" 运动精神&#xff1a; "更快、更高、更强&#xff0c;不断突破自我界…

使用Docker启动Linux Riscv版

目标&#xff1a;使用Docker启动Linux Riscv版 以前主要是使用qemu来启动RISCV系统&#xff0c;比如在Linux和FreeBSD系统下&#xff0c;都可以安装QEMU&#xff0c;然后用QEMU仿真RISCV环境。 这回&#xff0c;就用Docker来启动RISCV系统。跟qemu相比&#xff0c;Docker更加…