Cesium 入门

news/2025/2/21 0:57:18/

文章目录

  • 一、了解 Cesium
  • 二、创建第一个 Cesium 地球
  • 三、案例
    • 1. Cesium 查看器、场景、实体、数据源介绍
    • 2. Cesium 的坐标与转换
    • 3. Cesium 相机系统
      • 方法一：setView
      • 方法二：flyTo
      • 方法三：lookAt
      • 方法四： viewBoundingSphere
  • 四、案例
    • 1. 地月共存
  • 五、其他

token Token

一、了解 Cesium

首先要了解Cesium是什么。

  • Cesium是一种基于Web的三维地图引擎，可用于构建交互式虚拟地球应用程序。您可以访问Cesium官方网站 http://cesium.com 了解更多信息。

以下是一些中文版学习Cesium的网站：

  • Cesium中文网：http://cesium.xin/ （提供了一些中文的Cesium教程和示例，也有一些Cesium使用案例）
  • Cesium官方文档中文版：https://cesium.com/docs/cesiumjs-ref-doc/ （官方中文文档，详细说明了Cesium的API和用法）

Cesium 主要功能介绍

  1. 通过 CZML创建数据驱动的时间动态场景
  2. 使用 WMS，TMS，ESRI等标准绘制影像图层
  3. 具有高分辨率的地形三维，可以清晰地展示各种连绵起伏的山脉
  4. 具有采用 KML，GeoJson，TopoJson 格式的数据进行适量绘制的功能
  5. 使用 COLLADA和glTF绘制三维模型
  6. 可以调用 WebGL 的低级图元进行集合体的渲染
  7. 可以在地球上绘制广告牌、标签、文本、折线、多边形等
  8. 通过调整摄像机角度来创建随着时间变化的物体移动路径
  9. 具有点云高速渲染的功能
  10. 动态调整地球色调与亮度对比度
  11. 具有热力图功能
  12. 具有地形等高线与等高线自定义颜色功能
  13. 在球体上绘制柱状图的功能

二、创建第一个 Cesium 地球

  1. 进入官网： http://cesium.com
  2. 点击 PlatForm ——> downloads
    在这里插入图片描述
  3. 点击下载（PS：如果下载慢可以试试迅雷或Neat Download Manager下载）
    在这里插入图片描述
  4. 在本地新建文件夹，将下载好的文件放入自己建的目录下，如下图
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  5. 新建一个 html 文件
<!--* @Description: file content* @Version: 2.0* @Autor: Hu Kang* @Date: 2023-04-25 17:21:07* @LastEditors: Hu Kang* @LastEditTime: 2023-04-25 17:38:06* @FilePath: \src\learnCesium\learn01.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>cesiumm 第一课</title><script src="../../libs/Cesium/Cesium.js"></script><link rel="stylesheet" href="../../libs/Cesium/Widgets/widgets.css"><!-- 使得cesium将窗口铺满 --><style>html,body {margin: 0;padding: 0;}</style>
</head><body><div id="cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你申请的token'const viewer = new Cesium.Viewer('cesiumContainer')</script>
</body>
</html>

三、案例

1. Cesium 查看器、场景、实体、数据源介绍

  1. Viewer：主要窗口

    • Cesium 展示三维要素内容的主要窗口，包含三维地球的视窗，还包含了一些基础控价
    • const viewer = new Cesium.Viewer('div的ID',{ options可选参数 }，包括图层)
    • options可选参数
      • animation: false, 隐藏动画效果
      • timeline:false, 隐藏时间轴
      • 等等

  2. Scene：场景类

    • viewer.scene.globe.show = false，隐藏地球图层

  3. Entity：实体类
    在这里插入图片描述

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>cesiumm 第一课</title><script src="../../libs/Cesium/Cesium.js"></script><link rel="stylesheet" href="../../libs/Cesium/Widgets/widgets.css"><!-- 使得cesium将窗口铺满 --><style>html,body {margin: 0;padding: 0;}</style>
</head><body><div id="cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你申请的token'const viewer = new Cesium.Viewer('cesiumContainer', {animation: false,timeline: false});// 地球图层的显示viewer.scene.globe.show = true;/*// 相机的视口方向进行设置viewer.scene.cemera.setView({// 对相机位置的经度、维度、和高度进行设置destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 1500)}) */const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(116.39,39.91,400),point:{pixelSize:100,color:new Cesium.Color(0,1,0,1)}})viewer.trackedEntity = entity;</script>
</body>
</html>

  4. DataSourceCollection：数据源集合类
    是 Cesium 中加载矢量数据的主要方式之一，最大的特点是支持加载矢量数据集和外部文件的调用，主要有三种调用方式：分别为 CzmlDataSource，kmlDataSource，GeoJsonDataSource，分别代表加载Czml格式、kml格式和GeoJson格式数据，在 GIS 开发中加载矢量数据是必不可少的功能
    在这里插入图片描述

    viewer.GeoJsonDataSource.load("../../libs/sampleData/ne_10m_us_states.topojson")

2. Cesium 的坐标与转换

主要是将三维模型绘制在三维坐标上，Cesium 一共有以下五种坐标系

  1. WGS84经纬度坐标系（没有实际的对象）

  2. WGS84弧度坐标系（Cartographic）
    构造 Cartographic 对象：new cesium.Cartographic(longitude,latitude,height)，参数分别为经度、维度、高度
    角度和弧度的换算：弧度 = Π/180 x 经纬度角度
    经纬度角度 = 180/Π x 弧度

  3. 笛卡尔空间直角坐标系（Cartesian3）
    以空间中O点为原点，建立三条两两垂直的数轴。笛卡尔空间直角坐标系的原点就是椭球的中心
    构造 Cartesian3 对象：new Cesium.Cartesian3(x,y,z)，分别代表X，Y，Z，三根数轴上的值

  4. 屏幕坐标系（Cartesian2）
    也叫平面坐标系，是一个二维的笛卡尔坐标系，屏幕左上角为原点，屏幕水平方向为X轴，垂直方向为Y轴，向下为正。
    构造 Cartesian2 对象：new Cesium.Cartesian3(x,y,)，分别代表X，Y，两根数轴上的值

  5. 4D笛卡尔坐标系（Cartesian4）

3. Cesium 相机系统

方法一：setView

setView 通过定义相机飞行目的地的三维坐标和视线方向，将视角直接切换到所设定的视域范围内，设置一个常量，用于存储飞行的目的地的坐标，使用相机中的setView方法中的destination 属性用于设定相机的目的地

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>cesiumm 第一课</title><script src="../../libs/Cesium/Cesium.js"></script><link rel="stylesheet" href="../../libs/Cesium/Widgets/widgets.css"><!-- 使得cesium将窗口铺满 --><style>html,body {margin: 0;padding: 0;}</style>
</head><body><div id="cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你申请的token'const viewer = new Cesium.Viewer('cesiumContainer', {animation: false,timeline: false});// 地球图层的显示viewer.scene.globe.show = true;// 控制相机const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);viewer.camera.setView({destination: position, // 设定相机的目的地orientation: { // 设定相机视口的方向// 控制视口方向的水平旋转，也就是沿着Y轴旋转，当数值为0时代表正北方向heading: Cesium.Math.toRadians(0),// pitch 控制视口的上下旋转，即沿X轴进行旋转，当数值为-90 ，表示俯视朝向地面pitch: Cesium.Math.toRadians(-90),// roll 控制视口的翻转角度，沿着Z轴进行旋转，数值为0，表示不翻转roll: 0}})</script>
</body></html>

在这里插入图片描述

方法二：flyTo

flyTo 具有空中飞行逐步切换视域的效果，还可以设置飞行时间

const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);viewer.camera.flyTo({destination: position, // 设定相机的目的地orientation: { // 设定相机视口的方向// 控制视口方向的水平旋转，也就是沿着Y轴旋转，当数值为0时代表正北方向heading: Cesium.Math.toRadians(0),// pitch 控制视口的上下旋转，即沿X轴进行旋转，当数值为-90 ，表示俯视朝向地面pitch: Cesium.Math.toRadians(-90),// roll 控制视口的翻转角度，沿着Z轴进行旋转，数值为0，表示不翻转roll: 0},// 相机的飞行时间duration:5})

方法三：lookAt

锁定场景视角，可以将视图直接切换到位置，没有飞行的过程，并可以使用鼠标任意旋转视角方向，不会改变其位置

const center = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);
// 水平旋转视口方向的角度
const heading = Cesium.Math.toRadians(50);
// 垂直旋转视口的角度
const pitch = Cesium.Math.toRadians(-90);
// 设置相机距离目标点的高度
const range = 2500
// 使用 lookAt方法
viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))

方法四： viewBoundingSphere

viewBoundingSphere 和 setView一样，没有飞行过渡效果，而是直接切换到指定的目的地，但是它可以给一个指定的目标点，让我们可以从多个角度更好的观测

const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90, 0, 0))
var entity = viewer.entities.add({position: position,orientation: orientation,model: {uri: "../../libs/models/Cesium_Air.glb",// 设置模型缩放最大的比例minimumPixlSize: 128,maximumScale: 10000,show: true}
});
viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0))

四、案例

1. 地月共存

<!DOCTYPE html>
<html lang="en">
<head><title>Load Moon in Cesium</title><script src="https://cesium.com/downloads/cesiumjs/releases/1.76/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.76/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}html,body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head><body><div id="cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你申请的token'//创建一个基本的渲染器，包括一个世界高程提供商、一个视图容器和一个关闭地图图层选择器的选项。var viewer = new Cesium.Viewer('cesiumContainer');viewer._cesiumWidget._creditContainer.style.display = "none";//取消版权信息// 地球图层的显示viewer.scene.globe.enableLighting = true;// 创建月球的实体var moon = viewer.entities.add({name: 'Moon',// 使用Cesium.Cartesian3.fromDegrees方法将其位置设置为(0, 0)，月球的高度为- 384400000，对应月球的平均距离。position: Cesium.Cartesian3.fromDegrees(0, 0, -38440000),ellipsoid: {radii: new Cesium.Cartesian3(1737100.0, 1737100.0, 1737100.0),material: new Cesium.ImageMaterialProperty({image: '../../libs/Cesium/Source/Assets/Textures/moonSmall.jpg'}),outline: false}});</script>
</body></html>
<!-- https://clpds.bao.ac.cn/gis3globleMarsMoon/tiles/getTiles/MoonTile/2000/jpg/0/0/0 -->

五、其他

在这里插入图片描述
6. 参考系：在 Cesium 中，除了北极和南极的两个点，其余默认朝向东的方向为默认参考系
7. x 轴：本初子午线和赤道的交点向欧洲的方向为x轴
8. y 轴：本初子午线和赤道的交点向亚洲的方向为y轴
9. z 轴：本初子午线和赤道的交点向北极的方向为z轴

http://cesium.xin/wordpress/archives/16.html


http://www.ppmy.cn/news/541553.html

相关文章

计算物理专题：有限差分法解决本征值问题

计算物理专题：有限差分法解决本征值问题

计算物理专题&#xff1a;有限差分法解决本征值问题 定态薛定谔方程差分形式 一维定态薛定谔方程 谐振子 解法代码 import numpy as np def householder(symmetric_matrix):M symmetric_matrixassert np.allclose(M,M.T),"matrix is not symmetric"N len(M)for …
阅读更多...
数据结构期末复习【更新】

数据结构期末复习【更新】

数据结构期末复习【更新】 1.模式匹配2.画二叉树&#xff08;根据中序和后序&#xff0c;前序和中序&#xff09;及其线索二叉树3.求叶子结点个数4.建立二叉排序树5.广义表6.求存储地址7.代码设计8.哈夫曼树9.最小生成树10.深度遍历、广度遍历、邻接表建立11.哈希表&#xff08…
阅读更多...
07- c语言字符串 (C语言)

07- c语言字符串 (C语言)

一 字符串的定义及基本使用 1、什么是字符串 被双引号引用的字符集合&#xff01;例如&#xff1a;”hello” 、”world”&#xff0c;或者是以 \0 结尾的字符数组&#xff01;&#xff01;&#xff01; 比如&#xff1a;char ch[] {h, e, \0} 注意&#xff1a;”hello” 中…
阅读更多...
【CSS】`top: 50%；` 和 `transform: translateY(-50%)；`的区别和联系

【CSS】`top: 50%；` 和 `transform: translateY(-50%)；`的区别和联系

top: 50%; 和 transform: translateY(-50%);的区别 在某些情况下&#xff0c;top: 50%; 和 transform: translateY(-50%); 可以达到类似的效果&#xff0c;但它们实际上具有不同的工作原理和应用场景。 top: 50%;&#xff1a;这是一个相对定位属性&#xff0c;用于设置元素相对…
阅读更多...
各种音视频编解码

各种音视频编解码

以下内容来自博客&#xff1a;http://blog.csdn.net/lee_cv/article/details/16859057 编解码学习笔记&#xff08;一&#xff09;&#xff1a;基本概念 媒体业务是网络的主要业务之间。尤其移动互联网业务的兴起&#xff0c;在运营商和应用开发商中&#xff0c;媒体业务份量极…
阅读更多...
HTML 基本标签学习

HTML 基本标签学习

<!DOCTYPE html> <html lang"en"> <head><!--name的keywords的content内容用来便于搜索引擎机器人查找信息和信息分类用--><meta name"keywords" content"meta的content属性内容说明"><!--name的description勇…
阅读更多...
2021计算机视觉-包揽所有前沿论文源码 -上半年

2021计算机视觉-包揽所有前沿论文源码 -上半年

大家是否遇到过这种情况&#xff0c;就是在工作或者学习的时候&#xff0c;想去找一些方向的网络&#xff0c;但是呢&#xff0c;尴尬的是&#xff0c;老旧的网络里不想要&#xff0c;前沿的网络又不知道有哪些。为了解决大家的这个困扰&#xff0c;本人决定收集2021年上半年大…
阅读更多...
18个免费视频素材网站，超高清、不限速、无版权、可商用，1秒解决你90%的视频剪辑难题！

18个免费视频素材网站，超高清、不限速、无版权、可商用，1秒解决你90%的视频剪辑难题！

文章目录 前文高清视频素材1.新CG儿2.爱给网3.PEXELS4.稿定设计5.Mixkit6.包图网7.Videvo8.Vidlery9.OpenFootage10.Coverr11.Mazwai 音效素材1.Looperman2.Bensound3.Free Music Archive4.FreeSound5.MUSOPEN6.Soundgator7.Audionautix 前文 ​有的时候我自己也会去剪辑视频&…
阅读更多...
最新文章

Copyright @ 2022~2023