内容来源于李军、赵学胜、李晶编著的《面向三维GIS的Cesium开发与应用》，以下为读书笔记，仅供学习

可以参考读书笔记的内容进行入门和了解cesium，更详细的学习内容请看官网：https://cesium.com/learn/cesiumjs-learn/

书中有些代码应该是旧版本的，有些错误，我根据官网地址进行了纠正。

1.开源GIS三维可视化平台

Cesium
Three.js
MapBox
Echarts
DECK GL
MapTalks
World Wind
OpenSceneGraph

2.开发实践

(1)安装 cesium

npm install cesium

<script src="https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Cesium.js"></script>
<link
  href="https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Widgets/widgets.css"
  rel="stylesheet"
/>

(2)简单示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script>
  <link href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
  const viewer = new Cesium.Viewer('cesiumContainer');
    viewer.camera.setView({
    //广州大学城上方
      destination : Cesium.Cartesian3.fromDegrees(113.392987,23.051086, 10000),
      orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: 0.0
  }
    });
  </script>
 </div>
</body>
</html>

滚动鼠标滚轮放缩，就可以看到一个完整的地球

注意：Cesium默认使用的是Bing地图，

(3)Viewer 地图展示窗口

new Cesium.Viewer('cesiumContainer', options);

options 设置空间和基础图层属性对应官方 API 地址：https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html

3.Cesium 坐标系统

屏幕坐标系，二维笛卡尔坐标系（Cartesian2）
笛卡尔空间指教坐标系（Cartesian3）
WGS-84 地理坐标：x 经度 lng 向东为正，向西为负，y 纬度 lat 向北为正，向南为负，z 高度 height,弧度坐标值

Cesium 坐标转换

角度与弧度转换

Cesium.Math 官方 API 地址：https://cesium.com/learn/cesiumjs/ref-doc/Math.html

var radians = Cesium.Math.toRadians(degrees);
var degrees = Cesium.Math.toDegrees(radians);

经纬度坐标转笛卡尔空间指教坐标系

Cartesian3 官方 API 地址：https://cesium.com/learn/cesiumjs/ref-doc/Cartesian3.html

var c3 = Cesium.Cartesian3.fromDegrees(lng, lat, height);
var coordinates = [lng, lat, lng, lat];
var c3 = Cesium.Cartesian3.fromDegreesArray(coordinates);
var coordinates = [lng, lat, h, lng, lat, h];
var c3 = Cesium.Cartesian3.fromDegreesArrayHeights(coordinates);

通过椭球体转换 Ellipsoid官方 API 地址： https://cesium.com/learn/cesiumjs/ref-doc/Ellipsoid.html

Cartographic官方 API 地址：https://cesium.com/learn/cesiumjs/ref-doc/Cartographic.html

var ellipsoid84 = Cesium.Ellipsoid.WGS84;
var position = Cesium.Cartographic.fromDegrees(lng, lat, height);
var c3 = ellipsoid84.cartographicToCartesian(position);
var c3s = ellipsoid84.cartographicArrayToCartesianArray([pos1, pos2, pos3]);

笛卡尔空间坐标转经纬度坐标

var cartographoc = Cesium.Cartographic.fromCartesian(cartesian3);
//椭球体转换
var cartographoc = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3);

var cartographocs = Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray([c1, c2, c3]);

屏幕坐标转笛卡尔空间坐标

//屏幕坐标转场景空间指教坐标，包含地形，倾斜摄影测量模型等三维模型的坐标
var cartesian3 = viewer.scene.pickPosition(cartesian2);
//屏幕坐标转地表笛卡尔空间坐标，包含地形，不包含倾斜摄影测量等三维模型的坐标
var cartesian3 = viewer.scene.globe.pick(viewer.camera.getPickRay(cartesian2), viewer.scene);
//屏幕坐标转椭球面笛卡尔空间坐标，不包含地形、倾斜摄影测量等三维模型的坐标
var cartesian3 = viewer.camera.pickEllipsoid(center, viewer.scene.globe.ellipsoid)

5.笛卡尔空间坐标转屏幕坐标

var c2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(cartesian3);

4. Cesium 相机系统

Camera官方API地址：https://cesium.com/learn/cesiumjs/ref-doc/Camera.html

(1)鼠标和触摸事件与摄像头交互

左点击并拖动：移动整个地图
右点击并拖动：放缩相机
滚轮：放缩相机
点击滚轮并拖动：围绕地球表面的点旋转相机

(2)相机的方位和位置

1.右手笛卡尔坐标系

yaw:围绕 y 轴旋转，偏航角，水平旋转
pitch：围绕 x 轴旋转，俯仰角，上下旋转
roll：围绕 z 轴旋转，翻滚角，左右旋转

2.Cesium 相机

与右手笛卡尔坐标系相同，用 heading 替换 yaw

heading:偏航角,默认 0
pitch:俯仰角，默认-90
roll:翻滚角，默认 0

另一种是DirectionUp，两个都是Cartesian3类型

direction
up

3.设置视角

var position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
viewer.camera.setView({
  destination: position,//飞行目标点
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: 0.0
  }
});

4.切换视角

viewer.camera.flyTo({
  destination: position,//飞行目标点
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: 0.0
  },
  duration:5//持续时间
});

5.看向某个点

 lookAt(target,offset)//两个参数都是Cartesian3

target:目标位置
offset:在以目标为中心的局部东-北向上参考系中距目标的偏移。 (1)使用笛卡尔坐标偏移


const center = Cesium.Cartesian3.fromDegrees(-98.0, 40.0);
viewer.camera.lookAt(center, new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0));

（2）使用偏航角俯仰角范围偏移

const center = Cesium.Cartesian3.fromDegrees(-72.0, 40.0);
const heading = Cesium.Math.toRadians(50.0);
const pitch = Cesium.Math.toRadians(-20.0);
const range = 5000.0;
viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));

5.一个纯净的地球（取消界面控件）

    const viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false, // 左下角动画小组件
            baseLayerPicker: false, // 右上角底图选择组件
            fullscreenButton: false, // 右下角全屏组件
            vrButton: false, // 右下角VR模式组件
            geocoder: false, // 右上角地址搜索组件
            homeButton: false, // 右上角Home组件，点击之后将视图跳转到默认视角
            infoBox: false, // 信息框
            sceneModePicker: false, // 右上角场景模式切换组件，2D、3D 和 Columbus View (CV) 模式。
            selectionIndicator: false, //选取指示器组件
            timeline: false, // 底部时间轴
            navigationHelpButton: false, // 右上角鼠标操作
            // 导航说明
            navigationInstructionsInitiallyVisible: false,
            
          });
          //Cesium的logo
          viewer._cesiumWidget._creditContainer.style.display = "none";

《面向三维GIS的Cesium开发与应用》读书笔记