Cesium初学笔记总结

Henrik698

已于 2022-04-12 16:25:31 修改

阅读量4.1k

点赞数 6

分类专栏： Cesium开发基础文章标签：前端 javascript

于 2022-03-16 14:03:10 首次发布

本文链接：https://blog.csdn.net/m0_37755995/article/details/123518282

版权

Cesium开发基础专栏收录该内容

4 篇文章 7 订阅

订阅专栏

Cesium初学01

学习总结于GIS李胜老师博客
Cesium API学习由浅入深的学习路线如下图所示：
在这里插入图片描述
Cesium进阶之路
1.Web前端方向：Cesium与webpack（裁剪以及压缩），Cesium 与vue（框架设计，嵌入复杂业务系统），Cesium的UI（UI 设计，定制可复用的Cesium交互界面）。

2.计算机图形学方向：WebGL深入，基于Cesium 的可视化定制（视阈、水淹、水面、热力图，流场图、飞线图、扫描图）

3.数据预处理方向：投影变换，空间索引，LOD ，3dtile 生成，数据存储，数据分发服务，解决超大空间数据如何在 Cesium上流畅可视化的问题。

Cesium初学02

Cesium开发环境搭建及第一个示例
这里使用Cesium-1.85
在这里插入图片描述
用VS Code打开解压后的文件夹，右击跟路径下的index.html，选“Open with Live Server”，运行界面如下：

快速搭建：
首先，新建examples文件夹，并在examples文件夹中新建文件hello.html，实现我们第一个范例。
在这里插入图片描述
接着，在hello.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>Hello World</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height : 100%;
            margin: 0;
            padding : 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
 <div id="cesiumContainer">

 </div>
<script>
    var viewer = new Cesium.Viewer("cesiumContainer")
</script>
</body>
</html>

该代码内容如下：1引入Cesium.js脚本和对应的css文件，我们就完成了相关脚本的加载工作；2同时创建id= cesiumContainer的div，并且创建Cesium.Viewer窗口，且该窗口对应刚才创建的div。选“Open with Live Server”运行该html文件，我们很轻松的创建了第一个WebGL Globe，效果如下：
在这里插入图片描述

Cesium初学03

Cesium目录结构介绍
在这里插入图片描述
Apps：
Cesium详细的范例程序，建议都自己仿照着敲一遍，会有不少收获

Build：
Release包，打包后的脚本以及CSS，Workers等，以及文档

Source：
源码

Specs：
Cesium的自动化单元测试，采用Jasmine框架，这个也是非常好用的，可以实现自动化测试框架以及接口覆盖率等统计效果。

ThirdParty：
Cesium中接口实现和单元测试所依赖的外部第三方库，比如代码编辑器codemirror、单元测试框架库jasmine、javascript语法和风格的检查工具jshint等。

Cesium初学04

Viewer界面介绍及组件显隐
Cesium应用程序的基础都是Viewer，Viewer是一个带有多种功能的可交互的三位数字地球的容器
我们已经通过以下代码初始化了一个视图窗口，看到了一个基本的数字地球。

var viewer = new Cesium.Viewer("cesiumContainer")

每一个组件的描述如下：
Geocoder：查找位置工具，查找到之后会将镜头对准找到的地址，默认使用微软的Bing地图。
HomeButton：首页位置，点击之后将视图跳转到默认全球视角。
SceneModePicker：选择视角的模式，3D，2D，哥伦布视图(CV)。
BaseLayerPicker：图层选择器，选择要显示的地图服务和地形服务。
NavigationHelpButton：导航帮助按钮，显示默认的地图控制帮助。
Animation：动画器件，控制视图动画的播放速度。
CreditsDisplay：展示商标版权和数据归属。
Timeline：时间轴，指示当前时间，并允许用户跳到特定的时间。
FullscreenButton：全屏按钮。

通过下面的代码可以让组件显隐：
方法一：通过js代码控制

<!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>Hello World</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height : 100%;
            margin: 0;
            padding : 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
 <div id="cesiumContainer">

 </div>
<script>
    var viewer = new Cesium.Viewer("cesiumContainer",{   
      animation: false, // 动画小组件
      baseLayerPicker: true, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
      fullscreenButton: false, // 全屏组件
      vrButton: false, // VR模式
      geocoder: false, // 地理编码（搜索）组件
      homeButton: false, // 首页，点击之后将视图跳转到默认视角
      infoBox: false, // 信息框
      sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
      selectionIndicator: false, //是否显示选取指示器组件
      timeline: false, // 时间轴
      navigationHelpButton: false, // 帮助提示，如何操作数字地球。
      // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
      navigationInstructionsInitiallyVisible: false,
    });
    // 隐藏logo
    viewer._cesiumWidget._creditContainer.style.display = "none";
    
</script>
</body>
</html>

方法一的效果：
在这里插入图片描述
方法二：通过css代码控制

<!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>Hello World</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height : 100%;
            margin: 0;
            padding : 0;
            overflow: hidden;
        }
        
        /* 通过CSS控制组件显隐及位置 */
        /* .cesium-viewer-toolbar,  *//* 右上角按钮组 */
        .cesium-viewer-animationContainer,  /* 左下角动画控件 */
        .cesium-viewer-timelineContainer,   /* 时间线 */

        .cesium-viewer-bottom   /* logo信息 */ {
            display: none !important;
        }

        .cesium-widget-credits  /* 隐藏logo图片 */ {
            display: none !important;
        }

        .cesium-viewer-fullscreenContainer  /* 全屏按钮 */ {
            display: none !important;
            position: absolute;
            top: 0;
        }
    </style>
</head>
<body>
 <div id="cesiumContainer">

 </div>
<script>
    var viewer = new Cesium.Viewer("cesiumContainer")
</script>
</body>
</html>

方法二效果：
在这里插入图片描述
通过以上两种方式中任何一种，组件都会消失。

Cesium初学05

在实际的开发过程中，基本上会用到上图所示的Cesium API中各个类，我们可以把它按照以下分类进行记忆。
（下图来源于李胜老师公众号总结的API思维导图https://blog.51cto.com/u_11184490/5103928）
请添加图片描述
Viewer类属性：
imageryLayers 影像数据
terrainProvider 地形数据
dataSources 矢量数据
entities 几何实体集合（用于空间数据可视化）
Widgets 组件，即Viewer初始化界面上的组件
Camera 相机
Event 事件，鼠标事件、实体选中事件等

Scene类属性：
primitives 图元集合（几何体和外观）
postProcessStages 场景后期处理
环境对象，大气圈、天空盒、太阳、月亮等
Event事件，更新、渲染事件等

Camera类属性：
位置、方位角、俯仰角、翻滚角

空间计算：
三维矩阵、四元数、四维矩阵、转换等

Cesium初学06（重要）

坐标系及坐标变换

Cesium中常用的坐标系：

1、屏幕坐标（像素）——二维平面
即二维笛卡尔平面坐标系，我们通过鼠标点击直接获取的坐标就是屏幕坐标了，单位是像素值，也可以通过new Cesium.Cartesian2(x, y)创建。

2、笛卡尔空间直角坐标——三维——世界坐标
笛卡尔空间直角坐标又称为世界坐标，Cesium中用Cartesian3变量表示，可通过new Cesium.Cartesian3(x, y, z)创建，主要是用来做空间位置的变化如平移、旋转和缩放等等，它的坐标原点在椭球的中心，如下图所示：
在这里插入图片描述
3、地理坐标（弧度）
Cesium中的地理坐标单位默认是弧度制，用Cartographic变量表示，可通过new Cesium.Cartographic(longitude, latitude, height)创建，其中这里的参数是用弧度表示的经纬度，即经度和纬度。弧度即角度对应弧长是半径的倍数。

角度转弧度： π/180×角度
弧度变角度： 180/π×弧度
在这里插入图片描述
4、经纬度坐标
即测绘中的地理经纬度坐标，默认是WGS84坐标系，坐标原点在椭球的质心。
经度：参考椭球面上某点的大地子午面与本初子午面间的两面角，东正西负。
纬度：参考椭球面上某点的法线与赤道平面的夹角，北正南负。
在这里插入图片描述
Cesuim中没有具体的经纬度对象，要得到经纬度首先需要计算为弧度，再进行转换。
Cesium提供了如下对应的转换方法：

// 经纬度转弧度
Cesium.Math.toRadians(degrees)
// 弧度转经纬度
Cesium.Math.toDegrees(radians)

Cesium中常用的坐标变换：

1、经纬度坐标转世界坐标
Cesium提供了两种方式将经纬度坐标（默认WGS84）转成世界坐标（笛卡尔空间直角坐标Cartesian3——三维）。

// 方法1：直接转换
//var cartesian3 = Cesium.Cartesian3.fromDegrees(lng, lat, height);

// 方法2：借助ellipsoid椭球体对象，先转换成弧度再转换
//先转成弧度(即地理坐标系)
var cartographic = Cesium.Cartographic.fromDegrees(lng, lat, height); //单位：度，度，米
//再由弧度转成笛卡尔三维
var cartesian3 = ellipsoid.cartographicToCartesian(cartographic);

2、世界坐标转经纬度坐标
Cesium也提供了两种方法将世界坐标（笛卡尔空间直角坐标Cartesian3——三维）转为地理坐标（弧度制）
再由地理坐标（弧度制）转成经纬度坐标（默认WGS84）。

// 首先笛卡尔空间直角坐标系Cartesian3转为地理坐标（弧度制）
 // var cartographic = Cesium.Cartographic.fromCartesian(cartesian3); // 方法1
 var cartographic = ellipsoid.cartesianToCartographic(cartesian3); // 方法2借助ellipsoid椭球体对象

 // 其次再将地理坐标（弧度制）转为经纬度坐标（默认WGS84）
 var lat = Cesium.Math.toDegrees(cartographic.latitude);
 var lng = Cesium.Math.toDegrees(cartographic.longitude);
 var height = cartographic.height;

3、地理坐标系（弧度）和经纬度互转
经纬度转地理坐标系（弧度）：

Cesium.Math.toRadians(degrees)

地理坐标系（弧度）转经纬度：

Cesium.Math.toDegrees(radians)

4、屏幕坐标和世界坐标互转
屏幕坐标（像素）——二维平面Cartesian2与笛卡尔空间直角坐标——三维——世界坐标系Cartesian3互转

屏幕转世界坐标：

// 二维屏幕坐标转为三维笛卡尔空间直角坐标（世界坐标）
// 注意这里屏幕坐标一定要在球上，否则生成出的cartesian对象是undefined。
var cartesian3 = scene.globe.pick(
   viewer.camera.getPickRay(windowPostion),
   scene
);

注意这里屏幕坐标一定要在球上，否则生成出的cartesian对象是undefined。

世界坐标转屏幕坐标：

// 三维笛卡尔空间直角坐标（世界坐标）转为二维屏幕坐标
 // 结果是Cartesian2对象，取出X,Y即为屏幕坐标。
 windowPostion = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
   scene,
   cartesian3
 );

坐标变换工具
只有转换到笛卡尔坐标系后才能运用计算机图形学中的仿射变换知识进行空间位置变换如平移旋转缩放。

Cesium为我们提供了如下几种很有用的变换工具类：
Cesium.Cartesian3（相当于Point3D）
Cesium.Matrix3（3x3矩阵，用于描述旋转变换）
Cesium.Matrix4（4x4矩阵，用于描述旋转加平移变换）
Cesium.Quaternion（四元数，用于描述围绕某个向量旋转一定角度的变换）
Cesium.Transforms(包含将位置转换为各种参考系的功能)