2.1 Cesium环境搭建
2.1.1 安装node环境
Cesium 程序需要在 Node.js 环境下才可以正常运行，因此要先安装 Node.js 环境。Node.js是一个基于ChromeV8引擎的JavaScript 运行时环境，使用了一个事件驱动、非阻塞式 IO 模型，让 JavaScript运行在服务端的开发平台。
1.下载node.js安装包
进入Node.js官网（Node.js — 在任何地方运行 JavaScript）选择下载Node.js(LTS)按钮就行下载。下图是Node.js官网首页图片
如果下载其它Node.js版本：
2.安装 Nodo.js
双击下载好的安装包，逐次点击下一步，最终安装完成。通过win+r 打开命令提示符窗口，输入node -v 查看安装的Node.js版本，验证Node.js是否安装成功。如下图所示：
2.1.1 安装node环境
1.下载 Ceslum 代码包
Ccsium 官网(https://cesium.com/download)，下载Cesiun 代码包，或者通过 npmisall cesium 安装。Cesium 官网的下载页面如下图所示。
2.安装 Cesium 依赖
在安装包下载完成后,将其解压缩,打开命令行,进入解压缩后的目录,输入“npm install”安装 Cesium 依赖。
3.启动服务
在 Cesium 依赖安装完成后，先输入“node server.cjs”来开启服务然后复制所开启的服务网址，并在chrome浏览器中打开，
4.通过 http-server 发布服务
通过htp-server 发布服务:打开命令行输入“npm install http-server -g”;安装完成后，通过命令行进入文件目录输入“http-server-g”，即可发布服务，如下图所示
Cesium 环境搭建完成后，在浏览器地址栏中输入本地发布的网址并打开，有两个链接非常重要，分别为 Documentation和 Sandcastle。其中，Documentation 里面包括了 Cesium 的完整 API说明，可以从中查看各个模块中的函数、属性、方法及部分调用代码示例，方便用户深入学习;Sandcastle是一个沙盒，里面包括了当前版本的各种示例，可以进行代码测试并导出测试代码。建议用户先自己浏览一遍沙盒内所有的示例，对于Cesium 能做什么及能成什么,在实现需要的功能时，可查找相关的示例代码及用到的模块。
2.2 Cesium环境搭建
1.引入源码编译成果
Cesium 程序开发的第一步就是创建一个新的文件夹，并在文件夹中引入Cesium 源码中的编译文件，即 Cesium 源码中的 Build 文件夹，如下图所示
2.创建 HTML 文件
打开编辑器(Vsual Studio Code)，首先选择并打开我们新建的文件夹，然后新建文件名为 index、后缀为.html的文件，如下图所示
3.编写第一个 Cesium 程序
(1) 单击打开新建的 HTML 文件，在网页的<head>标签中引入Cesium.js库文件。该文件定义了 Cesium 的对象，几乎包含了我们需要的一切。
(2) 为了能够使用Cesium的各个可视化控件，我们需要在网页的<head>标签中引入widgets.css 文件。
(3) 在HTML文件的body部分创建一个div作为地图容器，并设置其id为“cesiumContainer”。
(4) 在网页的<head>标签中添加<style>标签，并设置容器样式的高度和宽度均为100%边距为 0。
(5) 在脚本区域编写代码，申请一个token。首先登录网址 Cesium ion，在注册后申请 token，然后创建一个Cesium 对象，并使用我们创建的 div 容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<title>cesium教程第二章快速入门</title>
</head>
<body>
<div id="cesiumContainer"></div>
<script type="module">
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZTViOTRlYy00ZWNmLTQwYWUtODc3OS01OTNhMGVlNWJkMTEiLCJpZCI6OTg4MzQsImlhdCI6MTY1NjE1NDE5NX0.IN0uM3_aJVdIgyoXgDIAehwSPzKGTv6NKNLXLv8uwp8';
const viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: true,
homeButton: true,
//是否显示首页位置工具
sceneModePicker: true,
//是否显示视角模式切换工具//是否显示默认图层选择工具//是否显示导航帮助工具
baseLayerPicker: true,
navigationHelpButton: true,
animation: true,
//是否显示动画工具
timeline: true,
//是否显示时间轴工具
fullscreenButton: true,
//是否显示全屏按钮工具
terrain: Cesium.Terrain.fromWorldTerrain(),
});
// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-15.0),
}
});
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = await Cesium.createOsmBuildingsAsync();
viewer.scene.primitives.add(buildingTileset);
</script>
</div>
</body>
</html>4.发布 Cesium 程序服务
打开VS code终端，进入Cesium 程序目录，通过 http-server 发布本地服务，VS code终端所示。点击下方的网址，并在浏览器中打开，可以看到，第一个 Cesium 程序运行成功，如下图所示。
2.3 界面介绍
在 Cesiun 程序中，Viewer,是所有内容的基础。Viewer是一个带有多种功能的可交互的三维数字地球容器，在此之前，我历召经透过 new cesium Viewer初始化了一个视图窗口，即一个最简单的三维地球。
初始化的 cesium 程序由两部分组成:第一部分是初始化的三维地球;第二部分是默认自带的一些控件，如下图所示：
三维地球场景支持采用鼠标(PC端)和手指触摸(移动端)的方式进行交互，并默认支持以下几种相机漫游方式。
。按住鼠标左键拖曳:拖动相机在三维地球平面平移。
。按住鼠标右键拖曳:缩放相机。
。使用鼠标滚轮(即鼠标中键)滑动:缩放相机。
。按住鼠标滚轮拖曳:根据当前地球的屏幕中点，旋转相机。
2.4 默认控件介绍
2.4.1 Geocoder
Geocoder是位置查找工具，如下图所示。使用该控件可以输入要查找的地址，且在找到后，会将相机跳转并对准找到的结果，默认使用的是微软Bing地图。在初始化 Viewer 时将 geocoder配置项设置为 false，即可隐藏该控件。
2.4.2 HomeButton
HomeButton 是首页位置工具，如下图所示。单击该控件后，会将相机跳转到默认全球视角,也可以通过代码修改跳转位置。在初始化 Viewer 时,将 homeButton 配置项设置为 false即可隐藏该控件。
2.4.3 SceneModePicker
SceneModePicker是视角模式切换工具。使用该控件可以设置视角模式为 3D、2D 及哥伦视图(CV)、当切换为2D视角模式时、地图可以平移旋转，但始终保持平面显示，如下图所示，在初始化时Viewer时，将sceneModePicker配置设置为false,即可隐藏该控件。
2D视图模式
哥伦布视图模式
2.4.4 BaseLayerPicker
BaseLayerpicker是默认图层选择工具，用于选择要显示的地图服务和地形服务，如下图所示，这里选择修改底图数据源为ESRIWorldlmagery.在初始化 Viewer 时,将 baseLayerpicker设置项设置为false,即可隐藏该控件。
2.4.5 NavigationHelpButton
NavigationHelpButton是导航帮助工具，用于显示默认的地图控制和帮助选项，如下图所示。在初始化 Viewer 时，将 navigationHelpButton 配置项设置为 false，即可隐藏该控件。
2.4.6 Animation
Animation是动画工具、用于控制器图动面的播放速度，如下图所示。在初始化时，将Animation配项设置为false，即可隐藏该控件，
2.4.7 TimeLine
TimeLine 是时间轴工具，用于指示当前时间，并且允许用户跳转到指定时间，如下图所示。在初始化Viewer时，将timeline配置项设置为false,即可隐藏该控件。
2.4.8 FullscreenBufton
fullscreenBunon 是全屏按钮工具,如下图所示。单击该控件，可以进入全屏模式，，再次单击该控件，即可退出全屏模式。在初始化Viewer时，将fullscreenBunon 配置项设置为false,即可隐藏该控件。
