1. 环境准备与项目搭建想用Vue3和Cesium搞点酷炫的动态导航效果比如让一辆消防车在地图上沿着规划好的路线跑起来别被那些专业术语吓到其实一步步来你会发现这事儿比想象中简单。我自己在好几个智慧园区和物流监控项目里都用过这套组合实测下来非常稳。今天我就把自己踩过的坑和总结的最佳实践用最直白的话分享给你保证你跟着做就能跑通。首先你得有个Vue3的项目。如果你还没创建用Vite来初始化是最快最爽的一条命令的事儿。打开你的终端找个顺眼的文件夹运行npm create vuelatest my-cesium-app创建过程中那些可选的配置像TypeScript、Router啥的按需选择就行对我们这个演示来说不是必须的。项目建好后别急着启动我们先把两个核心的依赖请进来cesium和vite-plugin-cesium。后者是个神器能帮我们省去一大堆繁琐的Cesium库配置和静态资源拷贝工作。在项目根目录下执行npm install cesium vite-plugin-cesium --save安装完成后我们需要修改vite.config.js文件把插件配置上。找到这个文件用你喜欢的编辑器打开把内容改成下面这样import { defineConfig } from vite import vue from vitejs/plugin-vue import cesium from vite-plugin-cesium // 引入插件 export default defineConfig({ plugins: [ vue(), cesium() // 使用插件 ] })就这么简单vite-plugin-cesium会自动处理好Cesium所需的Widgets.css样式、Web Workers文件以及其他静态资源我们再也不用手动去node_modules里拷贝那些文件了开发体验直接起飞。接下来我们创建一个用来展示3D地球的组件。在src/components目录下新建一个CesiumViewer.vue文件。在这个组件里我们首先要初始化Cesium Viewer。关键点在于Cesium需要一个实际的DOM容器来挂载所以我们必须确保在组件挂载到DOM之后再执行初始化。这就要用到Vue3的onMounted生命周期钩子。另外Cesium的访问令牌Token现在几乎是必须的没有它地形和影像服务可能会受限。你可以去Cesium Ion官网免费注册一个账号获取你的专属Token。初始化代码大概长这样template div idcesium-container/div /template script setup import { onMounted, onUnmounted, ref } from vue import * as Cesium from cesium const viewerRef ref(null) onMounted(() { // 设置你的Cesium Ion访问令牌 Cesium.Ion.defaultAccessToken 你的_Token_字符串 // 初始化Viewer viewerRef.value new Cesium.Viewer(cesium-container, { terrainProvider: Cesium.createWorldTerrain(), // 使用真实世界地形 animation: false, // 先关闭动画控件我们后面自己控制 timeline: false, // 先关闭时间线控件 geocoder: false, // 根据需要关闭搜索框 homeButton: false, // 根据需要关闭主页按钮 baseLayerPicker: false, // 关闭底图选择器简化界面 sceneModePicker: false // 关闭2D/3D模式选择器 }) // 可以在这里调整一些默认视角比如飞到中国上空 viewerRef.value.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 1500000) }) }) onUnmounted(() { // 组件销毁时务必销毁Viewer实例释放内存 if (viewerRef.value !viewerRef.value.isDestroyed()) { viewerRef.value.destroy() } }) /script style scoped #cesium-container { width: 100%; height: 100vh; /* 让容器占满整个视口 */ } /style把上面的你的_Token_字符串替换成你真实的Token。然后在App.vue里引入并使用这个组件运行npm run dev你应该就能看到一个旋转的蓝色地球了。恭喜你万里长征第一步已经稳稳迈出。这里有个小提示如果你发现模型加载不出来或者地形是黑的十有八九是Token没设置对或者网络问题先去检查Token和网络连接。2. 路径数据准备与处理逻辑地球是出来了但光有个球没意思我们得让车跑起来。车往哪跑这就得靠路径数据。路径本质上就是一系列有序的坐标点经度、纬度、高度。这些数据可以来自后台接口也可以是我们手动模拟的。为了演示我们就用一组静态数据比如模拟一辆消防车在某个区域的巡逻路线。原始文章里给出了一大串坐标我们拿过来直接用就行。但这里我想强调一个非常关键的点坐标的顺序和密度。顺序决定了模型移动的走向而密度则影响路径的平滑度和速度计算的准确性。如果点与点之间距离太远模型移动起来会有“跳跃感”如果太密计算量又会增加。对于车辆导航这种场景通常采集实际道路的轨迹点就足够了。拿到坐标数组后我们不能直接扔给Cesium让它动。我们需要为这条路径注入“时间”和“速度”的灵魂。核心思路是根据设定的移动速度计算出模型到达每个路径点所需的时刻。这样Cesium的时钟系统才能知道在某个时间点模型应该出现在哪个位置。我们来写一个处理函数。假设我们有一个dataPoint数组每个元素都包含longitude,latitude,height。我们设定一个速度speed单位是公里/小时。处理过程分为三步计算分段距离计算相邻两个坐标点之间的空间直线距离单位米。计算分段耗时用距离除以速度得到从上一个点移动到当前点需要的时间单位秒。这里要注意单位换算速度是公里/小时距离是米需要统一。计算累计时间从起点时间0开始把每一段的耗时累加起来得到到达每个点的累计时间戳。下面是我在实际项目中封装的一个函数比原始文章的更健壮一些加了些错误处理/** * 处理路径数据附加时间和速度信息 * param {Array} points 原始坐标点数组格式 [{longitude, latitude, height}, ...] * param {number} speedKmh 移动速度单位公里/小时 * returns {Array} 处理后的点数组增加了 time(段耗时) 和 times(累计时间) 属性 */ function processPathData(points, speedKmh) { if (!points || points.length 2) { console.warn(路径点数量不足至少需要2个点); return points; } const processedPoints JSON.parse(JSON.stringify(points)); // 深拷贝避免污染原数据 const speedMs speedKmh * (1000 / 3600); // 将公里/小时转换为米/秒 let totalSeconds 0; for (let i 0; i processedPoints.length; i) { let segmentTime 0; // 从上一个点到当前点的耗时 if (i 0) { const prevPoint processedPoints[i - 1]; const currPoint processedPoints[i]; // 计算两点间距离 const distance calculateDistance(prevPoint, currPoint); // 计算这段距离需要的时间 segmentTime distance / speedMs; } // 记录这段路的时间 processedPoints[i].segmentTime segmentTime; // 记录到达这个点的累计时间 processedPoints[i].cumulativeTime totalSeconds; // 为下一个点更新总时间 totalSeconds segmentTime; } // 顺便计算一下总路径长度和预估总时间方便调试 console.log(路径处理完成共${processedPoints.length}个点总长度约${(totalSeconds * speedMs / 1000).toFixed(2)}公里预计耗时${(totalSeconds / 60).toFixed(2)}分钟); return processedPoints; }这个函数依赖一个计算距离的函数calculateDistance它利用Cesium的数学库进行三维空间距离计算比单纯用经纬度算球面距离更准确尤其是考虑高度差时/** * 计算两个地理坐标点之间的三维空间直线距离 * param {Object} pointA 点A包含 longitude, latitude, height * param {Object} pointB 点B包含 longitude, latitude, height * returns {number} 距离单位米 */ function calculateDistance(pointA, pointB) { const cartesianA Cesium.Cartesian3.fromDegrees(pointA.longitude, pointA.latitude, pointA.height); const cartesianB Cesium.Cartesian3.fromDegrees(pointB.longitude, pointB.latitude, pointB.height); return Cesium.Cartesian3.distance(cartesianA, cartesianB); }经过processPathData函数处理我们的路径数据就从一个静态的“空间序列”变成了一个“时空序列”。每个点都知道“模型在什么时刻应该到达我这里”。这是实现动态导航的基石。你可以尝试调整speedKmh参数比如设为60城市道路速度或120高速公路速度看看对总耗时的影响这能帮你更好地理解数据与动画的关系。3. 绘制动态路径与时间轴控制数据准备好了我们得先把路径在地球上“画”出来让人能直观地看到这条路线。在Cesium里画线最常用的就是Cesium.PolylineGeometry或者它的地面版本Cesium.GroundPolylineGeometry。后者更高级它会贴着地形表面走适合车辆、行人等地面移动物体视觉效果更真实。我们就用它。但是我们不仅要画一条静态的线还要让这条线的出现和模型的移动在时间上同步。这就需要用上Cesium强大的Property属性系统和Clock时钟系统。简单来说Property可以让我们定义某个实体属性如位置、颜色如何随时间变化而Clock则是整个场景的时间驱动器。首先我们来创建一条贴地线。注意这里我们直接使用处理好的、带时间信息的路径点。我们先根据所有点的经纬度创建一个GroundPolylineGeometry来定义线的几何形状。为了让线看起来更醒目我们可以设置它的颜色和宽度。// 假设 processedPoints 是上一步处理好的路径数据 // 提取所有点的经纬度生成Cesium需要的数组格式 const positionsArray []; processedPoints.forEach(point { positionsArray.push(point.longitude, point.latitude); }); // 创建贴地线图元Primitive const polylinePrimitive viewer.scene.primitives.add( new Cesium.GroundPolylinePrimitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.GroundPolylineGeometry({ positions: Cesium.Cartesian3.fromDegreesArray(positionsArray), width: 8.0, // 线宽单位像素 vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT, }), attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor( Cesium.Color.fromCssColorString(#FF6B6B) // 给一个醒目的颜色比如珊瑚红 ), }, }), appearance: new Cesium.PolylineColorAppearance({ translucent: false, // 不透明 }), }) );现在静止的路径有了。接下来是重头戏设置时间轴。我们要告诉Cesium我们的动画从什么时候开始到什么时候结束以多快的速度播放。// 1. 定义动画的起止时间 const startTime Cesium.JulianDate.fromDate(new Date()); // 动画开始时间设为现在 const totalDuration processedPoints[processedPoints.length - 1].cumulativeTime; // 总时长就是到达最后一个点的累计时间 const stopTime Cesium.JulianDate.addSeconds(startTime, totalDuration, new Cesium.JulianDate()); // 2. 配置Viewer的时钟 viewer.clock.startTime startTime.clone(); viewer.clock.stopTime stopTime.clone(); viewer.clock.currentTime startTime.clone(); // 当前时间指向开始 viewer.clock.clockRange Cesium.ClockRange.LOOP_STOP; // 播放模式到达停止时间后循环回到开始时间 viewer.clock.multiplier 1.0; // 时间流逝乘数。1.0是实时2.0就是两倍速播放 // 3. 为了让时间轴控件能显示和控制我们的动画需要把时间范围设置给它 viewer.timeline.zoomTo(startTime, stopTime);这里解释一下clockRange和multiplier。LOOP_STOP模式意味着动画播放到stopTime后会自动跳回startTime重新开始非常适合演示循环巡逻的场景。如果你想只播放一次可以设置为CLAMPED到达终点后就停止。multiplier是个非常实用的参数在调试时特别有用。当你的路径很长总耗时几小时你不可能真等那么久。这时可以把multiplier设为 60 或 3600意味着每秒模拟1分钟或1小时就能快速看到全程效果。在实际产品中通常会提供一个UI滑块让用户控制这个倍速。4. 3D模型加载与沿路径运动路线和时间都设好了主角该上场了——我们的3D模型比如一辆消防车。Cesium支持多种3D格式最常用的是glTF/GLB格式因为它体积小、功能全。你可以在网上找到很多免费的glTF模型资源比如Sketchfab注意选择允许商业使用的许可。加载模型并让它动起来我们需要创建一个Cesium.Entity并为其position属性赋一个SampledPositionProperty。这个Property类型允许我们定义一系列时间-位置采样点Cesium的时钟在走到某个时间点时会自动根据这些采样点进行插值计算出模型的精确位置从而实现平滑运动。首先我们需要一个函数将我们处理好的、带时间戳的路径点转换成SampledPositionProperty。/** * 根据路径点生成位置属性SampledPositionProperty * param {Array} processedPoints 处理后的路径点含cumulativeTime * param {Cesium.JulianDate} startTime 动画开始时间 * returns {Cesium.SampledPositionProperty} */ function createPositionProperty(processedPoints, startTime) { // 创建一个采样位置属性 const positionProperty new Cesium.SampledPositionProperty(); // 遍历每个点将时间位置作为样本添加进去 for (let i 0; i processedPoints.length; i) { const point processedPoints[i]; // 计算这个点对应的时刻 const sampleTime Cesium.JulianDate.addSeconds( startTime, point.cumulativeTime, new Cesium.JulianDate() ); // 将经纬度转换为Cesium空间直角坐标 const position Cesium.Cartesian3.fromDegrees( point.longitude, point.latitude, point.height ); // 添加样本 positionProperty.addSample(sampleTime, position); } // 设置插值方式使模型在点与点之间平滑移动 positionProperty.setInterpolationOptions({ interpolationDegree: 3, // 三次多项式插值运动更平滑 interpolationAlgorithm: Cesium.LagrangePolynomialApproximation, }); return positionProperty; }有了位置属性创建模型实体就水到渠成了。这里有几个关键参数需要注意uri: 你的模型文件路径。建议放在public目录下这样可以直接通过相对路径引用比如‘/models/firetruck.glb’。minimumPixelSize: 这个很重要它保证了无论相机缩放到多远模型都不会小于指定像素大小避免模型缩成一个小点看不见。heightReference: 设置为CLAMP_TO_GROUND可以让模型“贴地”自动适应地形起伏。但对于车辆有时RELATIVE_TO_GROUND相对地面并设置一个固定高度偏移可能更合适避免车轮陷入地下。// 生成位置属性 const modelPosition createPositionProperty(processedPoints, startTime); // 创建模型实体 const movingModel viewer.entities.add({ id: Firetruck-01, // 给实体一个唯一ID方便后续查找控制 name: 巡逻消防车, // 定义实体在时间轴上的可用区间和动画时间一致 availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: startTime, stop: stopTime, }), ]), position: modelPosition, // 绑定动态位置属性 // 关键让模型根据运动方向自动调整朝向 orientation: new Cesium.VelocityOrientationProperty(modelPosition), model: { uri: /models/firetruck.glb, // 你的模型路径 scale: 2.0, // 缩放比例根据模型大小调整 minimumPixelSize: 64, // 模型最小像素尺寸保证远处可见 heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 可以设置一些颜色材质覆盖比如高亮显示 color: Cesium.Color.fromCssColorString(#FFFFFF).withAlpha(0.9), }, // 可以添加一个文字标签实时显示车辆信息 label: { text: 消防车01, font: 14px sans-serif, style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -40), // 标签显示在模型下方 show: true, }, });代码里的Cesium.VelocityOrientationProperty是另一个魔法。它接收一个位置属性然后自动计算模型在每个时间点的运动速度方向并让模型的“前方向”对准这个方向。这样你的消防车在转弯时就会自动调整车头方向而不是侧着身子平移非常智能。现在运行你的项目点击时间轴控件上的播放按钮你应该能看到消防车沿着红色的路径开始移动了而且车头方向始终朝着前进方向。如果模型没动首先检查时间轴是否在走然后检查模型路径是否正确、控制台是否有加载错误比如404找不到模型文件。5. 高级技巧与性能优化基础功能跑通后我们可以玩点更花的让效果更专业同时也要关注性能毕竟3D应用很吃资源。5.1 添加轨迹拖尾效果让模型身后留下一段逐渐消失的运动轨迹能极大地增强动态感和视觉效果。我们可以用Cesium.PolylineGlowMaterialProperty来实现一个发光尾迹。思路是动态地创建一条线它的位置属性是模型过去一段时间内的位置集合。我们需要在时钟的onTick事件中不断记录模型的历史位置并更新这条线的几何形状。// 在创建模型实体之后 const trailLength 30; // 记录最近30个位置点 const trailPositions []; const trailEntity viewer.entities.add({ polyline: { positions: new Cesium.CallbackProperty(() trailPositions, false), // 动态回调获取位置 width: 6, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.2, color: Cesium.Color.CYAN.withAlpha(0.7), }), }, }); // 订阅时钟滴答事件 viewer.clock.onTick.addEventListener((clock) { const currentPosition movingModel.position.getValue(clock.currentTime); if (currentPosition) { trailPositions.push(currentPosition); // 保持轨迹长度移除旧的点 if (trailPositions.length trailLength) { trailPositions.shift(); } } });5.2 模型姿态微调与相机跟随有时候模型的默认朝向通常是glTF文件的Y轴可能和运动方向对不上。比如模型车头朝的是Z轴而VelocityOrientationProperty计算的是速度方向通常是XZ平面。这时就需要用Cesium.Transforms.headingPitchRollQuaternion来手动计算一个包含偏航角heading的朝向四元数替换掉简单的VelocityOrientationProperty。更酷的功能是相机跟随。你可以让镜头一直锁定在移动的模型上就像第三人称视角游戏一样。// 切换视图到模型跟随模式 function setCameraToFollowModel() { viewer.trackedEntity movingModel; // 就这么简单 } // 如果想取消跟随设置为 undefined function cancelCameraFollow() { viewer.trackedEntity undefined; }5.3 性能优化要点当路径点非常多比如上万点或者场景中有多个移动模型时性能可能会下降。这里有几个我总结的优化窍门路径点抽稀在保证路径形状大体不变的前提下减少不必要的路径点。可以使用道格拉斯-普克算法等。模型细节层次LOD使用具有LOD的glTF模型或者通过Cesium的maximumScale和minimumPixelSize配合在不同距离加载不同精度的模型。按需渲染如果模型跑出视野外了可以暂停其位置计算。可以通过viewer.scene.camera.positionWC和模型位置计算距离来判断。避免频繁的实体增删viewer.entities.add/remove有一定开销。对于需要频繁显示/隐藏的物体比如轨迹线可以控制其show属性而不是删除实体。使用Web Worker处理复杂计算像大规模路径点的距离、时间计算可以放到Web Worker里避免阻塞UI线程。5.4 与Vue状态管理结合在实际项目中路径数据、模型状态、播放速度等很可能需要被多个组件共享或响应式更新。强烈建议使用Pinia来管理这些3D场景的状态。例如你可以创建一个cesiumStore// stores/cesium.js import { defineStore } from pinia import { ref, computed } from vue export const useCesiumStore defineStore(cesium, () { const speed ref(80) // 默认速度 const isPlaying ref(false) const currentModelPosition ref(null) const doubleSpeed computed(() speed.value * 2) function updateSpeed(newSpeed) { speed.value newSpeed // 这里可以触发重新计算路径时间 } return { speed, isPlaying, currentModelPosition, doubleSpeed, updateSpeed } })然后在你的Vue组件中可以方便地绑定这些状态到UI控件上实现一个交互式的控制面板实时调整速度、暂停/播放、切换模型等。