【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换

在这里插入图片描述

大家好,我是AIC山鱼!👉这是我的主页
🐋作为CSDN博主和前端优质创作者✍,我致力于为大家带来新颖、脱俗且有趣的内容。
🐱我还创建了山鱼社区,这是一个独特的社区🏠,🕺🏻为大家提供了一个交流和分享的空间。
🌲在山鱼社区中,我推出了一个名为"松鼠计划"的活动,这是一个不断更新的活动,旨在将有趣、有启发性的书籍送给社区成员已经参加活动的人。我相信通过阅读和知识的分享,我们可以拓宽视野、激发思维,并获得更多的启示
总之,我是AIC山鱼,一个充满新意、与众不同且有趣的CSDN博主和前端优质创作者👈

0.初识cesium

Cesium是一种用于创建高性能、跨平台的3D地球可视化的开源JavaScript库。它基于WebGL技术,可以在现代的Web浏览器中实现高度交互性和可视化效果的地球模型展示。

Cesium可以用于创建各种类型的地球可视化应用,包括地理信息系统(GIS)应用、地球科学研究、航空航天模拟等。它提供了丰富的功能和工具,使开发人员能够在地球表面上叠加各种数据,如地形、卫星图像、矢量数据等,并实现交互式的浏览、查询和分析。

Cesium的特点包括:

  1. 跨平台:Cesium可以在多种操作系统和设备上运行,包括Windows、Mac、Linux以及各种移动设备。
  2. 高性能:Cesium采用了基于WebGL的渲染技术,能够实现流畅的地球模型展示和数据可视化。
  3. 数据丰富:Cesium支持导入各种地球数据,如地形数据、影像数据、矢量数据等,并提供了丰富的工具和API进行数据处理和分析。
  4. 可扩展性:Cesium提供了灵活的插件和扩展机制,可以根据需要进行定制和扩展。

总的来说,Cesium是一个功能强大的开源库,为开发人员提供了创建高性能地球可视化应用的工具和框架。

1.创建第一个我们的cesium项目

首先我们可以打开cesium官网

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GXvd2qb-1692949926216)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230819233423093.png)]
下载我们所需要的资源,来创建我们的第一个cesium项目(注意不要使用最新版本的截止到现在最新版本为1.108)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G229N9WB-1692949926217)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230819233700658.png)]
我们可以有两种方式进行使用cesium,这里我就直接下载使用了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PZhwKLa8-1692949926217)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230819233927126.png)]
解压后我们可以看到一堆不认识的文件夹,但是当前我们只需要用到两个文件夹里面的内容,所以我们要把所使用到的文件挑出来,供我们使用。
在这里插入图片描述

1.1了解Cesium文件内容

在这里插入图片描述
从上向下依次了解

1.Apps文件夹
CesiumViewer:cesium示例。
SampleData:代码数据包括但不限于项目内模型,文件,地理信息代码。
Sandcastle:Cesium的示例程序代码。
TimelineDemo:时间轴示例代码。
在这里插入图片描述

2.Build文件夹
Cesium:Cesium库文件(下面会用到)。
CesiumUnminified:调试文件,用于寻找错误。
Documentation:API文档。
Specs:自动化单元测试文件
在这里插入图片描述

3.Source文件夹
所有类的源码以及自定义的shader(渲染)
在这里插入图片描述

4.Specs文件夹
自动化单元测试,Cesium采用了单元测试Jasmine框架

在这里插入图片描述

5.ThirdParty文件夹
第三方库:codemirror代码编辑器、dojo是一个JavaScript工具包和框架,用于构建Web应用程序和移动应用程序。Dojo提供了丰富的功能和工具,包括DOM操作、事件处理、数据绑定、模块化开发、动画效果、Ajax通信等,使开发者能够更轻松地构建复杂的交互式应用程序。jshint是JavaScript语法和风格检查工具

在这里插入图片描述

1.3创建项目

这里我们可以新建一个文件夹,存放我们自己写的项目,这是我的路径,可以像我一样,也可以自己搞,之后会用到里面的东西,只要能拿到就可以啦,然后我们在从libs同级的地方创建一个src来存放我们的项目
在这里插入图片描述
完成以上步骤之后,从src内创建html文件,我们从刚才的libs里面引入凉哥文件,分别是一下凉哥文件引入之后我们就可以开始我们的cesium之旅啦。
在这里插入图片描述

1.4创建我们首个cesium项目(没用框架)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>cesium相机系统</title><script src="../../libs/Cesium/Cesium.js"></script><link rel="stylesheet" href="../../libs/Cesium/Widgets/widgets.css">
</head>
<body><div id="cesium_cameraSystem"></div><script>// 这是我们要使用的token,我们想要获取这个token只需要打开cesium的官网注册一个账号,然后就可以找到Cesium.Ion.defaulyAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZjY2NTFlZC0wYTBhLTQxMTUtOGQzNS1hNWFlY2JjM2RjNzUiLCJpZCI6MTYxMTQzLCJpYXQiOjE2OTIzMjkwNjB9.4FsaQ5rL9nsbZWnDyAaQ-HkNPvgkEtHcTtX0_AhRB2E'const viewer = new Cesium.Viewer('cesium_cameraSystem')</script>
</body>
</html>

到这里,可能有小伙伴会遇到问题【我没有token怎么办啊】,不要急下面帮你解决token问题
我们首先要打开cesium的官网,然后注册一个账号或者是有账号的直接点击蓝色框内的按钮进入到自己的cesium主页
在这里插入图片描述
然后我们可以看到这么一个页面,点击AccessTokens
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujIehvhc-1692949926221)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230820144512820.png)]

进入获取token的界面,然后复制下来(可以建一个txt文件保存它)
在这里插入图片描述
然后直接打开我们的项目,进入到浏览器,首先是一个大地球和浩瀚的宇宙映入我们眼帘,其次是一些操作项

在这里插入图片描述

1.3了解cesium基本API

首先我们来了解一下四个类【 Viewer(查看器类)Scener(场景类)Entity(实体类) DataSourceCollection(数据源集合类)】

// 1.Viewer:new Cesium.Viewer('my-cesiumContainer',options)// 它有两个参数,分别是容器的id和options配置项const viewer = new Cesium.Viewer('my-cesiumContainer',{// 时间控制控件(默认是true,也就是开启状态)animation:false,// 时间轴控件(默认是true,也就是开启状态)timeline:false});

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iEHNh6N9-1692949926222)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230820150454589.png)]

// 2.Scener,他是一个隐式类,隐式创建于Viewer里面,他是我们的3D实体类,我们可以通过他来创建/隐藏实体viewer.scene.globe.show = true// 从viewer中设置imgerLaters相当于从scene中设置console.log(viewer.imgerLaters == viewer.scene.imgerLaters); // 我们可以通过scene来进行修改地球的图层样式,地形数据等viewer.scene.camera.setView({destination:Cesium.Cartesian3.fromDegrees(116, 39,1500)})//这三个数分别是经度,纬度,高度

此时我们的视口区域不再是整个地球,而是我们所设置的区域(一片田地)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8y9L43z6-1692949926223)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230820150624225.png)]

// 3.Entity它是由Primitive封装后的产物,使用起来易于上手,简单便捷,可以很好的将数据呈现出来,const entity = viewer.entities.add({// 设置圆点的位置position:Cesium.Cartesian3.fromDegrees(116, 39,1500),point:{// 圆点的大小和颜色pixelSize:100,color: Cesium.Color.RED}})// 移入摄像头,观察圆点viewer.trackedEntity = entity// 它主要用于实体模型的加载,动效样式的设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SV6BbXDS-1692949926223)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230820150226742.png)]

    // 4.DataSourceCollection它是Cesium中加载矢量数据的主要方式之一,他的最大特点就是可以支持加载矢量数据集和调用外部文件// 使用方法主要有三种:CzmlDataSource KmlDataSource GeoJsonDataSource,分别对应加载的数据是CZML,KML,GeoJSON

2、坐标系及其转换

cesium的五种坐标系

WGS84经纬度坐标系 (没有实际的对象)

WGS84弧度坐标系 (Cartographic)

笛卡尔空间直角坐标系 (Cartesian3)

平面坐标系 (Cartesian2)

4D笛卡尔坐标系 (Cartesian4)

构造Cartographic对象
new Cesium.Cartographic(longitude, latitude, height)。参数分别为经度,维度,高度

角度与弧度的换算

弧度= T/180x经纬度角度
经纬度角度=180/Tx弧度

构建对象Cartesian3
new Cesium.Cartesian3(x,y,z)

构建Cartesian2对象
new Cesium.Cartesian2(x,y)

经纬度和弧度的相互转换
经纬度转弧度、弧度转经纬度

WGS84经纬度坐标和WGS84弧度坐标系 (Cartographic) 的转换

// 构造函数法:
new Cesium.Cartographic(longitude弧度,latitude弧度,height米)
// 静态函数法:
var cartographic= Cesium.Cartographic.fromDegrees(longitude经度, latitude纬度,height高度)
var cartographic= Cesium.Cartographic.fromRadians(longitude孤度, latitude孤度,height高度)

WGS84坐标系和笛卡尔空间直角坐标系 (Cartesian3) 的转换

通过经纬度或弧度进行转换、通过度来进行转换
在这里插入图片描述

let cartesian = Cesium.Cartesian3.fromRadians(lon, lat, height);
let cartesian1 = Cesium.Cartesian3.fromRadiansArray(coordinates);
let cartesian2 = Cesium.Cartesian3.fromRadiansArrayHeights(coordinates);

在这里插入图片描述

笛卡尔空间直角坐标系转换为WGS84

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C3PZSGuM-1692949926224)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230824152653685.png)]

在这我们可以看到,它打印出来的并不是经纬度坐标而是弧度坐标,所以我们要进行转化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dR1xAeRw-1692949926224)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230824152625485.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M3Cqesl3-1692949926225)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230824153230719.png)]

 // 直接转换
var cartographic= Cesium.Cartographic.fromCartesian(cartesian3)
// 间接转换
var cartographic= Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3)
// 多个坐标成一个数组,将所需要转换的数据放入数组内
var cartographics=Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray([cartesian1,cartesian2,cartesian3)

平面坐标系 (Cartesian2) 和笛卡尔空间直角坐标系 (Cartesian3) 的转换

// 屏幕坐标转场景WGS84坐标
var cartesian3= viewer.scene.pickPosition(Cartesian2)
// 屏幕坐标转地表坐标
var cartesian3= viewer.scene.globe.pick(viewer.camera.getPickRay(Cartesian2),viewer.scene):
// 屏幕坐标转椭球面坐标
var cartesian3= viewer.scene.camera.pickEllipsoid(Cartesian2)

笛卡尔空间直角坐标系转平面坐标系

var cartesian2=Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,cartesian3)

两个参数分别是场景,和笛卡尔直角坐标

平面坐标系(cartesian2)转笛卡尔空间直角坐标系(cartesian3)

下面我们就简称(cartesian2→2)(cartesian3→3)

在不包含地形,模型,等其他事物的情况下2转3,我们可以使用pickEllipsoid方法

let cartesain3 = viewer.scene.camera.pickEllipsoid(cartesian2);

在包含地形,模型,等其他事物的情况下2转3,我们可以使用pickPosition方法

let cartesian3 = viewer.scene.pickPosition(cartesian2);

角度,弧度互相转换→嗖~地址

在包含地形,模型,等其他事物的情况下2转3,我们可以使用 pickPosition 方法
let cartesian3 = viewer.scene.pickPosition(cartesian2);

角度,弧度互相转换→嗖~地址
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8KxUELI-1692949926225)(C:\Users\赵晨\AppData\Roaming\Typora\typora-user-images\image-20230822093919725.png)]
id(cartesian2);
配合cesium中文网使用效果绝佳
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/110878.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无涯教程-分类算法 - 简介

分类可以定义为根据观测值或给定数据点预测类别的过程。分类的输出可以采用"黑色"或"白色"或"垃圾邮件"或"非垃圾邮件"的形式。 在数学上&#xff0c;分类是从输入变量(X)到输出变量(Y)近似映射函数(f)的任务&#xff0c;它属于有监督…

「CSS|前端开发|页面布局」03 开发网站所需要知道的CSS:如何实现你想要的页面布局

本文主要介绍如何分析页面布局&#xff0c;了解HTML标签元素的默认布局以及如何修改标签元素的布局方式&#xff0c;最终能够结合CSS框架实现任意我们看到或者想到的页面布局。 文章目录 本系列前文传送门一、场景说明二、页面布局设计逻辑三、CSS布局编写逻辑HTML元素的默认布…

论文阅读:Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks

前言 要弄清MAML怎么做&#xff0c;为什么这么做&#xff0c;就要看懂这两张图。先说MAML**在做什么&#xff1f;**它是打着Mate-Learing的旗号干的是few-shot multi-task Learning的事情。具体而言就是想训练一个模型能够使用很少的新样本&#xff0c;快速适应新的任务。 定…

Mac软件删除方法?如何删除不会有残留

Mac电脑如果有太多无用的应用程序&#xff0c;很有可能会拖垮Mac系统的运行速度。因此&#xff0c;卸载电脑中无用的软件是优化Mac系统运行速度的最佳方式之一。Mac卸载应用程序的方式是和Windows有很大的区别&#xff0c;特别对于Mac新用户来说&#xff0c;如何无残留的卸载删…

Confluence使用教程(用户篇)

1、如何创建空间 可以把空间理解成一个gitlab仓库&#xff0c;空间之间相互独立&#xff0c;一般建议按照部门&#xff08;小组的人太少&#xff0c;没必要创建空间&#xff09;或者按照项目分别创建空间 2、confluence可以创建两种类型的文档&#xff1a;页面和博文 从内容上来…

【ubuntu】 20.04 网络连接器图标不显示、有线未托管、设置界面中没有“网络”选项等问题解决方案

问题 在工作中 Ubuntu 20.04 桌面版因挂机或不当操作&#xff0c;意外导致如下问题 1、 Ubuntu 网络连接图标消失 2、 有线未托管 上图中展示的是 有线 已连接 &#xff0c;故障的显示 有线 未托管 或其他字符 3、 ”设置“ 中缺少”网络“选项 上图是设置界面&#xff0c…

【Linux】进程控制

目录 一、进程创建1.fork创建子进程2.写时拷贝 二、进程退出1.进程退出方式2.进程退出码3.exit 函数和 _exit 函数 三、进程等待1.概念2.wait3.waitpid4.获取子进程status 四、进程程序替换1.原理2.进程替换接口① execl② execv③ execlp④ execvp⑤ execle 一、进程创建 1.f…

如何使用装rancher安装k8s集群(k8s集群图形化管理工具)

前言 kubernetes集群的图形化管理工具主要有以下几种&#xff1a; 1、 Kubernetes Dashborad: Kubernetes 官方提供的图形化工具 2、 Rancher: 目前比较主流的企业级kubernetes可视化管理工具 3、各个云厂商Kubernetes集成的管理器 4、 Kuboard: 国产开源Kubernetes可视化管理…

C++ 改善程序的具体做法 学习笔记

1、尽量用const enum inline替换#define 因为#define是做预处理操作&#xff0c;编译器从未看见该常量&#xff0c;编译器刚开始编译&#xff0c;它就被预处理器移走了&#xff0c;而#define的本质就是做替换&#xff0c;它可能从来未进入记号表 解决方法是用常量替换宏 语言…

提升代码可读性与可维护性:利用责任链模式优化你的Spring Boot代码

1. 基本介绍 责任链是一种非常常见的设计模式, 具体我就不介绍了, 本文是讲解如何在SpringBoot中优雅的使用责任链模式 1.1. 代码执行流程 基本步骤如下 : SpringBoot启动时, 需要获取 handler 对应Bean, 不同业务对应着不同的多个处理器, 比如 购票业务, 可能需要检查参数是…

运算符(个人学习笔记黑马学习)

算数运算符 加减乘除 #include <iostream> using namespace std;int main() {int a1 10;int a2 20;cout << a1 a2 << endl;cout << a1 - a2 << endl;cout << a1 * a2 << endl;cout << a1 / a2 << endl;/*double a3 …

GPU版本pytorch(Cuda12.1)安装教程

我们通过Pytorch官网安装torch的时候&#xff0c;会发现常常由于网速问题安装不成功&#xff0c;下面提供一种简单的方法可以成功安装Cuda12.1&#xff0c;亲测有效。 目录 一、常规方法 二、有效方法 2.1 创建并激活虚拟环境 2.2 添加清华源 2.3 安装torch 一、常规方法…

惠普NS1020激光打印机碳粉警告提示及添加碳粉方法

本文也适用于惠普NS1020、1020c 和 1020w 系列打印机。 通过碳粉量指示灯检查碳粉量。 如果碳粉量是满的或指示器显示 1&#xff0c;可选择添加一个碳粉或者忽略不添加。如果碳粉量指示灯显示 2或 2 和碳粉量警告感叹号图标 &#xff0c;则表示碳粉量不足或严重不足&#xff0…

Mysql--技术文档--MVCC(Multi-Version Concurrency Control | 多版本并发控制)

MVCC到底是什么 MVCC&#xff08;Multi-Version Concurrency Control&#xff09;是一种并发控制机制&#xff0c;用于解决并发访问数据库时的数据一致性和隔离性问题。MVCC允许多个事务同时读取数据库的同一数据&#xff0c;而不会相互干扰或导致冲突。 在传统的并发控制机制中…

远程教育:别催了,在线巡课真爽啊

随着远程教育和在线学习的兴起&#xff0c;教学活动的场景正逐渐从传统的实体教室转向虚拟的线上平台&#xff0c;这也催生了对教学质量监管的新需求。 在线巡课系统在这一背景下应运而生&#xff0c;它不仅能够实时观察教师的教学过程&#xff0c;还能够量化评估教学效果&…

Element——table排序,上移下移功能。及按钮上一条下一条功能

需求&#xff1a;table排序&#xff0c;可操作排序上移下移功能。判断第一行上移禁用和最后一行下移禁用&#xff0c;排序根据后端返回的字段 <el-table:data"tableData"style"width: 100%"><el-table-column type"index" label"序…

先进API生产力工具eqable HTTP,一站式开发调试工具推荐

简介 Reqable是什么? Regable Fiddler/Charles Postman Reqable是HTTP一站式开发调试国产化解决方案&#xff0c;拥有更便捷的体验&#xff0c;更先进的协议&#xff0c;更高效的性能和更精致的界面。 Reqable是一款跨平台的专业HTTP开发和调试工具&#xff0c;在全平台支持…

APSIM模型应用与参数优化、批量模拟

APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物生长模拟模型之一。APSIM模型有Classic和Next Generation两个系列模型&#xff0c;能模拟几十种农作物、牧草和树木的土壤-植物-大气过程&#xff0c;被广泛应用于精细农业、水肥管理、气候变化、粮食安…

ElasticSearch总结

ES是什么 ES是一个天生支持分布式的搜索、聚合分析的存储引擎 基于Java开发 基于Lucene的开源分布式搜索引擎 ELK &#xff1a; elasticSearch Logstah Kibana 加入 Beats 后 ELK 改为 &#xff1a;Elastic stack ES解决了什么问题 ES解决的核心问题 &#xff1a; 1.海量数…

Vue2向Vue3过度核心技术工程化开发和脚手架

目录 1 工程化开发和脚手架1.1 开发Vue的两种方式1.2.脚手架Vue CLI 2 项目目录介绍和运行流程2.1 项目目录介绍2.2 运行流程 3 组件化开发4 根组件 App.vue4.1 根组件介绍4.2 组件是由三部分构成4.3 总结 5 普通组件的注册使用-局部注册5.1 特点&#xff1a;5.2 步骤&#xff…