三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

文末获取【智慧地铁】视频+源码
往期内容：
三维GIS开发cesium智慧地铁教程（1）地球初始化
 三维GIS开发cesium智慧地铁教程（2）隐藏地图控件
 三维GIS开发cesium智慧地铁教程（3）entity实体
 三维GIS开发cesium智慧地铁教程（4）城市白模加载与样式控制

一、环境搭建

```javascript ```

关键配置点：

路径验证：确保相对路径../cesium1.99/存在Cesium SDK
版本锁定：代码对应Cesium 1.99版API
依赖关系：Cesium.js为核心引擎，widgets.css控制界面元素样式

二、视窗布局

```javascript #cesiumContainer { width: 100vw; height: 100vh; overflow: hidden; } ```

空间坐标系解析：

vw/vh单位确保容器始终占据全视口
overflow: hidden禁用滚动条，防止场景溢出
三维坐标系原点：代码中设置的经度110°E/纬度20°N（WGS84坐标系）

场景初始化

```javascript Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYzhiZTM4ZC0yN2NiLTQ5MjQtOWRjMS1hOGY2Y2ZhMGQ3MzAiLCJpZCI6MTE1MTg3LCJpYXQiOjE2OTIzNDczMzh9.Ealj0HH4x_WU4fG5dI2XvnBNeNNhq5rXjBFsmDgt-mg' const viewer = new Cesium.Viewer('cesiumContainer') ```

相机控制模块

1. 空间定位

```javascript const position = Cesium.Cartesian3.fromDegrees(110, 20, 20000); ```

三维坐标转换：

fromDegrees(lon, lat, height)将WGS84地理坐标转换为笛卡尔空间坐标
参数说明：
- 110: 东经度数
- 20: 北纬度数
- 20000: 相机高度（米），相当于20公里高空

2. 视角切换方案对比

```javascript // 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

});

复制代码

**<font style="color:rgb(38, 38, 38);">参数解析表</font>**<font style="color:rgb(38, 38, 38);">：</font>

| <font style="color:rgb(38, 38, 38);">参数</font> | <font style="color:rgb(38, 38, 38);">单位</font> | <font style="color:rgb(38, 38, 38);">当前值</font> | <font style="color:rgb(38, 38, 38);">视觉效果</font> |
| :--- | :--- | :--- | :--- |
| <font style="color:rgb(38, 38, 38);">heading</font> | <font style="color:rgb(38, 38, 38);">弧度</font> | <font style="color:rgb(38, 38, 38);">0</font> | <font style="color:rgb(38, 38, 38);">正北方向（经线对齐）</font> |
| <font style="color:rgb(38, 38, 38);">pitch</font> | <font style="color:rgb(38, 38, 38);">弧度</font> | <font style="color:rgb(38, 38, 38);">-π/2</font> | <font style="color:rgb(38, 38, 38);">垂直俯视（-90度俯角）</font> |
| <font style="color:rgb(38, 38, 38);">roll</font> | <font style="color:rgb(38, 38, 38);">弧度</font> | <font style="color:rgb(38, 38, 38);">0</font> | <font style="color:rgb(38, 38, 38);">水平无倾斜</font> |
| <font style="color:rgb(38, 38, 38);">duration</font> | <font style="color:rgb(38, 38, 38);">秒</font> | <font style="color:rgb(38, 38, 38);">3</font> | <font style="color:rgb(38, 38, 38);">3秒飞行动画</font> |




**<font style="color:rgb(38, 38, 38);">视角控制原理</font>**<font style="color:rgb(38, 38, 38);">：</font>

+ `<font style="color:rgb(38, 38, 38);">pitch:-90</font>`<font style="color:rgb(38, 38, 38);">使相机镜头垂直向下，形成卫星图的典型观测角度</font>
+ `<font style="color:rgb(38, 38, 38);">duration</font>`<font style="color:rgb(38, 38, 38);">参数控制视角切换速度，值越大飞行越平缓</font>

<h2 id="yK8C3">完整代码：</h2>
```javascript
<!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>

** **