内容来源于李军、赵学胜、李晶编著的《面向三维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
npm install cesiumCDN
<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.设置视角
```js
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.切换视角
```js
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)使用笛卡尔坐标偏移
```js
const center = Cesium.Cartesian3.fromDegrees(-98.0, 40.0);
viewer.camera.lookAt(center, new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0));
（2）使用偏航角俯仰角范围偏移
```js
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));
相关资料
- Cesium 开发参考资料
- Cesium 官方网站：https://cesium.com/
- Cesium Javascript 库网站：https://cesium.com/cesiumjs/
- Cesium 开发文档：https://cesium.com/docs/
- Cesium 开发示例：https://cesium.com/blog/categories/userstories/
- Cesium 官方论坛：https://groups.google.com/forum/#!forum/cesium-dev
- Cesium 源码：https://github.com/CesiumGS/cesium
- Cesium 中文开发教程：http://cesium.marsgis.cn/docs/go.html?id=12 （来源火星科技）
- Cesium 中文网：http://cesium.xin/
- Cesium 实验室（支持 Cesium 的数据处理）：https://www.cesiumlab.com/
- MarsGIS for Cesium 官方网站：http://cesium.marsgis.cn/
- 三维地球开发书籍(Cesium 创始人 Patrick Cozzi 作品) ：http://www.virtualglobebook.com/
- Cesium Language (CZML)指南：https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Guide
- 3D Tiles 数据格式说明：https://github.com/CesiumGS/3d-tiles
- glTF 格式文档：https://github.com/KhronosGroup/glTF
