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

一、环境搭建

复制代码
<script src="../cesium1.99/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="../cesium1.99/Build/Cesium/Widgets/widgets.css">

关键配置点

  1. 路径验证:确保相对路径../cesium1.99/存在Cesium SDK
  2. 版本锁定:代码对应Cesium 1.99版API
  3. 依赖关系: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>
相关推荐
Feather_741 小时前
从Taro的Dialog.open出发,学习远程控制组件之【事件驱动】
javascript·学习·taro
\光辉岁月/1 小时前
Axios基本使用
javascript·axios
波波鱼દ ᵕ̈ ૩2 小时前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
cypking3 小时前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
Watermelo6173 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
Micro麦可乐3 小时前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api
Watermelo6173 小时前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
Hilaku3 小时前
AVIF vs. JPEG XL:2025年,我们该为网站选择哪种下一代图片格式?
前端·javascript·html
拾光拾趣录4 小时前
如何优雅地实现每 5 秒轮询请求?
前端·javascript
袋鱼不重4 小时前
Vue3 Effect源码解析
前端·javascript·vue.js