【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.hqwc.cn/news/88284.html

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

相关文章

idea上利用JDBC连接MySQL数据库（8.1.0版）

idea上利用JDBC连接MySQL数据库（8.1.0版）

1.了解jdbc概念 JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API&#xff0c;可以为多种 关系数据库提供统一访问&#xff0c;它由一组用Java语言编写的类和接口组成。JDBC提供了一种基准&#xff0c;据此可以构建 更高级的工具和接口&#…
阅读更多...
Gradle项目如何开启debug？

Gradle项目如何开启debug？

一、打开Idea的终端&#xff0c;输入命令gradle build --debug 开启构建DeBug模式 二、点击编辑配置&#xff0c;并填写自己debug的名称 三、编辑好debug配置后&#xff0c;点击以下debug按钮&#xff0c;就可以开始调试代码了。
阅读更多...
Linux 查看当前文件夹下的文件大小

Linux 查看当前文件夹下的文件大小

1.直接查看: ll 或者 ls -la #查看文件大小&#xff0c;以kb为单位 ll#查看文件大小&#xff0c;包含隐藏的文件&#xff0c;以kb为单位 ls -la2.以 M 或者 G 为单位查看&#xff0c;根据文件实际大小进行合适的单位展示 du -sh *
阅读更多...
【前车之鉴】: 2023最新教程-将java程序打包到maven私服的正确打开方式,详细流程介绍不怕你掌握不了

【前车之鉴】: 2023最新教程-将java程序打包到maven私服的正确打开方式,详细流程介绍不怕你掌握不了

文章目录 为什么看这篇整体流程1. 注册账号【首次需要】2. 工单申请【新项目必须】3. 项目配置【新项目必须】4. 授权认证【新项目必须】5. 一键发布 最后也很重要 为什么看这篇 一是当前网络上一些博客有遗漏部分&#xff0c;这里做补充&#xff0c;二是网上思路没错&#xff…
阅读更多...
Android View动画之LayoutAnimation的使用

Android View动画之LayoutAnimation的使用

接前篇 Android View动画整理 &#xff0c;本篇介绍 LayoutAnimation 的使用。 参考《安卓开发艺术探索》。 View 动画作用于 View 。 LayoutAnimation 则作用于 ViewGroup &#xff0c; 为 ViewGoup 指定一个动画&#xff0c;ViewGoup 的子 View 出场时就具体动画效果。 简言…
阅读更多...
13.IIC驱动框架简介

13.IIC驱动框架简介

目录 IIC物理总线 linux设备框架图 i2c_adapter结构体 i2c_algorithm结构体 i2c_client结构体 i2c_driver结构体 I2C总线驱动分析 i2c总线注册&#xff1a;i2c_init i2c总线定义&#xff1a;i2c_bus_type i2c设备和i2c驱动匹配规则&#xff1a;i2c_device_match i2…
阅读更多...
UDP 多播（组播）

UDP 多播（组播）

前言&#xff08;了解分类的IP地址&#xff09; 1.组播&#xff08;多播&#xff09; 单播地址标识单个IP接口&#xff0c;广播地址标识某个子网的所有IP接口&#xff0c;多播地址标识一组IP接口。单播和广播是寻址方案的两个极端&#xff08;要么单个要么全部&#xff09;&am…
阅读更多...
StringBuilder类分享（1）

StringBuilder类分享（1）

一、StringBuilder说明 StringBuilder是一个可变的字符序列。这个类提供了一个与StringBuffer兼容的API&#xff0c;但不保证同步&#xff0c;即StringBuilder不是线程安全的&#xff0c;而StringBuffer是线程安全的。显然&#xff0c;StringBuilder要运行的更快一点。 这个类…
阅读更多...
服务器中了mkp勒索病毒该怎么办？勒索病毒解密，数据恢复

服务器中了mkp勒索病毒该怎么办？勒索病毒解密，数据恢复

mkp勒索病毒算的上是一种比较常见的勒索病毒类型了。它的感染数量上也常年排在前几名的位置。所以接下来就由云天数据恢复中心的技术工程师来对mkp勒索病毒做一个分析&#xff0c;以及中招以后应该怎么办。 一&#xff0c;中了mkp勒索病毒的表现 桌面以及多个文件夹当中都有一封…
阅读更多...
LeetCode(力扣)530. 二叉搜索树的最小绝对差Python

LeetCode(力扣)530. 二叉搜索树的最小绝对差Python

LeetCode530. 二叉搜索树的最小绝对差 题目链接代码 题目链接 https://leetcode.cn/problems/minimum-absolute-difference-in-bst/ 代码 递归 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # …
阅读更多...
无涯教程-机器学习 - 数据可视化

无涯教程-机器学习 - 数据可视化

在上一章中&#xff0c;无涯教程讨论了数据对于机器学习算法的重要性&#xff0c;以了解具有统计信息的数据&#xff0c;还有另一种称为可视化的方式来理解数据。 借助数据可视化&#xff0c;可以看到数据的属性保持什么样的关联&#xff0c;这是查看要素是否与输出相对应的最…
阅读更多...
Docker拉取RocketMQ及可视化界面

Docker拉取RocketMQ及可视化界面

本文介绍Docker拉取RocketMQ及可视化界面操作步骤 Linux下安装Docker请参考&#xff1a;Linux安装Docker 文章目录 安装namesrv创建挂载目录授权相关权限拉取镜像运行容器查看运行情况 安装Broker创建挂载目录及配置文件目录授权相关权限创建配置文件运行容器查看运行情况 安装…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023