Vue3+Cesium Camera 相机与动画操作大全｜定位、飞行、环绕、视角锁定、动画取消

前言Cesium 的Camera控制我们看到的三维世界相机有两套常用操作即时跳转瞬间切换视角无动画动画飞行flyTo/flyBoundingSphere带平滑过渡动画业务最常用还有lookAt锁定关注点、orbit环绕旋转、相机姿态heading/pitch/roll控制。前置环境Vue3 Vite vite-plugin-cesium和本系列前面代码统一先搞懂三个角度非常关键heading方位角水平旋转正北为 0向东增加yawpitch俯仰角抬头低头-90 度朝下垂直地面0 度水平向前90 度朝上roll翻滚角左右倾斜一般大屏场景保持 0单位Cesium 内部全部是弧度开发习惯用角度配合Cesium.Math.RADIANS_PER_DEGREE转换一、Camera 核心 API 速查1. flyTo 飞行动画最常用viewer.camera.flyTo({ destination: Cartesian3, // 目标位置 orientation: { heading: headingRad, pitch: pitchRad, roll: rollRad }, duration: 3, // 动画时长 s maximumHeight: 10000, // 飞行途中最高高度规避地形 easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT, // 缓动函数 complete: () { console.log(飞行完成) }, cancel: () { console.log(飞行被打断) } }) 优先使用flyTo飞到点飞到实体直接viewer.flyTo(entity)自动计算包围盒不用自己算姿态2. setView 瞬间设置视角无动画硬切viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(108.95,34.27,5000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-30), roll: 0 } })3. lookAt 锁定目标相机看向某点适合定点观察const target Cesium.Cartesian3.fromDegrees(108.95,34.27,0) viewer.camera.lookAt(target, new Cesium.HeadingPitchRange( Cesium.Math.toRadians(0), Cesium.Math.toRadians(-45), 3000 // 距离目标多少米 ))lookAt 之后相机被锁定鼠标拖拽是绕目标旋转解除锁定viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)4. orbit 环绕动画绕点旋转viewer.camera.orbit(target, new Cesium.HeadingPitchRange(offsetHeading, pitch, range))5. 获取当前相机信息// 获取相机位置Cartographic经纬度、高度 const cartographic Cesium.Cartographic.fromCartesian(viewer.camera.position) const lon Cesium.Math.toDegrees(cartographic.longitude) const lat Cesium.Math.toDegrees(cartographic.latitude) const height cartographic.height console.log(相机位置, lon, lat, height) // 获取当前姿态 const hpr viewer.camera.headingPitchRoll const heading Cesium.Math.toDegrees(hpr.heading) const pitch Cesium.Math.toDegrees(hpr.pitch) const roll Cesium.Math.toDegrees(hpr.roll)二、完整 Vue3 组件代码template div classcesium-wrap div classbtn-group button clickflyToPoint飞行到点位3秒动画/button button clicksetViewInstant瞬间切换视角/button button clicklookAtTarget锁定目标定点观察/button button clickunLookAt解除锁定/button button clickstartOrbit开始环绕旋转/button button clickstopAllAnimation停止所有相机动画/button button clickgetCameraInfo打印相机当前信息/button /div div classcesium-container refcesiumRef/div /div /template script setup import { ref, onMounted, onUnmounted } from vue import * as Cesium from cesium import cesium/Build/Cesium/Widgets/widgets.css const cesiumRef ref(null) let viewer null let orbitInterval null // 环绕定时器 function initViewer() { viewer new Cesium.Viewer(cesiumRef.value, { animation: false, timeline: false, baseLayerPicker: false, geocoder: false, homeButton: false, fullscreenButton: false, navigationHelpButton: false }) // 初始定位 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(108.95, 34.27, 80000) }) } // 1. flyTo 平滑飞行动画 function flyToPoint() { const dest Cesium.Cartesian3.fromDegrees(108.95, 34.27, 3000) viewer.camera.flyTo({ destination: dest, orientation: { heading: Cesium.Math.toRadians(45), pitch: Cesium.Math.toRadians(-35), roll: 0 }, duration: 3, easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT, complete: () { console.log(✅ 飞行动画完成) }, cancel: () { console.log(⚠️ 飞行动画被用户打断) } }) } // 2. setView 无动画瞬间跳转 function setViewInstant() { viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(108.92, 34.25, 6000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-40), roll: 0 } }) } // 3. lookAt 锁定目标 function lookAtTarget() { const targetPoint Cesium.Cartesian3.fromDegrees(108.95, 34.27, 0) // HeadingPitchRange(偏移方位角,俯仰角,距离) viewer.camera.lookAt(targetPoint, new Cesium.HeadingPitchRange( Cesium.Math.toRadians(0), Cesium.Math.toRadians(-45), 4000 )) } // 解除lookAt锁定 function unLookAt() { viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY) } // 4. 环绕旋转定时修改heading实现绕点漫游 function startOrbit() { stopAllAnimation() const target Cesium.Cartesian3.fromDegrees(108.95, 34.27, 0) let h 0 orbitInterval setInterval(() { h 0.3 viewer.camera.lookAt(target, new Cesium.HeadingPitchRange( Cesium.Math.toRadians(h), Cesium.Math.toRadians(-40), 4500 )) }, 50) } // 停止动画、清除环绕 function stopAllAnimation() { viewer.camera.cancelFlight() // 取消正在进行的flyTo动画 clearInterval(orbitInterval) orbitInterval null } // 获取相机当前经纬度、姿态 function getCameraInfo() { const carto Cesium.Cartographic.fromCartesian(viewer.camera.position) const hpr viewer.camera.headingPitchRoll const info { lon: Cesium.Math.toDegrees(carto.longitude).toFixed(4), lat: Cesium.Math.toDegrees(carto.latitude).toFixed(4), height: carto.height.toFixed(2), heading: Cesium.Math.toDegrees(hpr.heading).toFixed(2), pitch: Cesium.Math.toDegrees(hpr.pitch).toFixed(2), roll: Cesium.Math.toDegrees(hpr.roll).toFixed(2), } console.log( 相机信息, info) alert(JSON.stringify(info, null, 2)) } onMounted(() { initViewer() }) onUnmounted(() { stopAllAnimation() viewer?.destroy() }) /script style scoped .cesium-wrap { width: 100%; height: 100vh; } .btn-group { padding: 10px; background: #fff; z-index: 9; position: relative; } button { margin: 0 4px; padding: 6px 10px; } .cesium-container { width: 100%; height: calc(100vh - 50px); } /style三、重要知识点1. 动画取消机制viewer.camera.cancelFlight()只要用户在飞行途中拖动鼠标、滚轮缩放默认就会触发cancel回调动画停止很多大屏需要禁止用户打断动画可以在动画期间临时关闭相机输入viewer.scene.screenSpaceCameraController.enableInputs false // complete / cancel 回调里面恢复 viewer.scene.screenSpaceCameraController.enableInputs true2. flyTo 两种版本区分// 版本1camera.flyTo → 指定坐标姿态 viewer.camera.flyTo({...}) // 版本2viewer.flyTo(entity/boundingSphere) 推荐自动适配包围盒不用写heading pitch viewer.flyTo(entity)业务中标绘完实体直接viewer.flyTo(entity)代码最少不会出现视角穿模。3. HeadingPitchRangelookAt / orbit使用三个参数heading相机相对于目标点的水平角度pitch俯仰range相机和目标点直线距离米4. 缓动函数 easingFunction 常用Cesium.EasingFunction.LINEAR_NONE // 匀速 Cesium.EasingFunction.QUADRATIC_IN_OUT // 慢-快-慢最舒服默认推荐 Cesium.EasingFunction.CUBIC_IN_OUT Cesium.EasingFunction.CIRCULAR_IN_OUT四、高频踩坑清单飞行动画飞到一半穿进地形里面增加maximumHeight飞行路径抬高或者开启viewer.scene.globe.depthTestAgainstTerrain truelookAt 之后地图拖拽异常lookAt 是锁定变换矩阵必须lookAtTransform(Matrix4.IDENTITY)解除单纯 flyTo 不一定能解开角度忘记转弧度Cesium 所有角度参数都是弧度直接填数字 30 会飞到离谱位置环绕动画用 setInterval 卡顿高频漫游优先用preRender每一帧更新而不是 setInterval和前面 WASD 漫游写法一致多个 flyTo 连续调用后一个 flyTo 会直接取消前一个动画执行 cancel 回调队列漫游需要在 complete 回调里启动下一段飞行高度为 0 贴地飞行抖动给目标高度预留几十米偏移不要贴着地形表面。五、拓展方案巡检路线漫游很多项目需要沿着一条轨迹线自动巡航拿到 polyline 点位数组在preRender里面按时间插值点位实时lookAt下一个点相机看向前进方向实现巡检视频式漫游