一、环境搭建
<script src="../cesium1.99/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="../cesium1.99/Build/Cesium/Widgets/widgets.css">关键配置点：
- 路径验证：确保相对路径
../cesium1.99/存在Cesium SDK - 版本锁定：代码对应Cesium 1.99版API
- 依赖关系：
Cesium.js为核心引擎，widgets.css控制界面元素样式
二、视窗布局
#cesiumContainer {
width: 100vw;
height: 100vh;
overflow: hidden;
}空间坐标系解析：
vw/vh单位确保容器始终占据全视口overflow: hidden禁用滚动条，防止场景溢出- 三维坐标系原点：代码中设置的经度110°E/纬度20°N（WGS84坐标系）
场景初始化
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYzhiZTM4ZC0yN2NiLTQ5MjQtOWRjMS1hOGY2Y2ZhMGQ3MzAiLCJpZCI6MTE1MTg3LCJpYXQiOjE2OTIzNDczMzh9.Ealj0HH4x_WU4fG5dI2XvnBNeNNhq5rXjBFsmDgt-mg'
const viewer = new Cesium.Viewer('cesiumContainer')相机控制模块
1. 空间定位
const position = Cesium.Cartesian3.fromDegrees(110, 20, 20000);三维坐标转换：
fromDegrees(lon, lat, height)将WGS84地理坐标转换为笛卡尔空间坐标- 参数说明：
-
- 110: 东经度数
- 20: 北纬度数
- 20000: 相机高度（米），相当于20公里高空
2. 视角切换方案对比
// setView 立即跳转
viewer.camera.setView({...});
// flyTo 动画飞行（当前采用方案）
viewer.camera.flyTo({
destination: position,
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: Cesium.Math.toRadians(0)
},
duration: 3
});参数解析表：
| 参数 | 单位 | 当前值 | 视觉效果 |
| heading | 弧度 | 0 | 正北方向（经线对齐） |
| pitch | 弧度 | -π/2 | 垂直俯视（-90度俯角） |
| roll | 弧度 | 0 | 水平无倾斜 |
| duration | 秒 | 3 | 3秒飞行动画 |
视角控制原理：
pitch:-90使相机镜头垂直向下，形成卫星图的典型观测角度duration参数控制视角切换速度，值越大飞行越平缓
完整代码：
<!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>Document</title>
<script src="../cesium1.99/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="../cesium1.99/Build/Cesium/Widgets/widgets.css">
<style>
* {
margin: 0;
padding: 0;
}
#cesiumContainer {
width: 100vw;
height: 100vh;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
</body>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYzhiZTM4ZC0yN2NiLTQ5MjQtOWRjMS1hOGY2Y2ZhMGQ3MzAiLCJpZCI6MTE1MTg3LCJpYXQiOjE2OTIzNDczMzh9.Ealj0HH4x_WU4fG5dI2XvnBNeNNhq5rXjBFsmDgt-mg'
const viewer = new Cesium.Viewer('cesiumContainer')
const position = Cesium.Cartesian3.fromDegrees(110, 20, 20000)
// setView通过定义相机的目的地,直接跳转到目的地
// viewer.camera.setView({
// destination: position,
// orientation: {//默认方向(0,-90,0)
// heading: Cesium.Math.toRadians(0),
// pitch: Cesium.Math.toRadians(0),
// roll: Cesium.Math.toRadians(0)
// }
// })
// flyTo快速切换视角,带飞行动画,可以设置飞行时长
viewer.camera.flyTo({
destination: position,
orientation: {//默认方向(0,-90,0)
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: Cesium.Math.toRadians(0)
},
duration: 3 //秒
})
</script>
</html>
