vue-cesium 实时绘制轨迹线

### 实现 Vue-Cesium 实时绘制轨迹线 为了在 `vue-cesium` 中实现实时绘制轨迹线功能，可以参照以下方法： #### 安装依赖库 首先确保已经安装了必要的开发工具和库。对于 Vue3 项目而言，全局安装 `@vue/cli` 是必需的操作[^3]。 ```bash npm install -g @vue/cli ``` 接着创建新的 Vue 项目并选择合适的预设选项来初始化项目结构: ```bash vue create cesium-learning ``` 进入新创建的项目文件夹内继续操作： ```bash cd cesium-learning ``` #### 引入 Cesium 库 由于直接引入整个 Cesium 可能会增加打包体积，在现代前端构建工具的支持下推荐按需加载的方式引入特定模块。不过这里简化处理，通过 CDN 或者 npm 方式快速集成基本版本即可满足需求。 如果采用 NPM 形式的安装，则执行如下命令获取最新稳定版Cesium包及其样式资源： ```bash npm install cesium --save ``` 编辑项目的入口 HTML 文件（通常是 public/index.html），加入 Cesium 提供的地图容器 div 并设置其宽高属性以便显示地图视图；同时也可以在此处添加指向官方托管服务端提供的 CSS 资源链接以应用默认主题风格。 #### 编写组件逻辑 接下来定义一个名为 `RealtimeTrack.vue` 的单文件组件用于承载核心业务代码片段。该组件内部维护着一条由多个时间戳标记的位置点构成的时间序列数据集，并利用这些离散采样点构造出连续变化的空间曲线效果展示给用户查看。 ```html <template> <div id="cesiumContainer"></div> </template> <script setup lang="ts"> import * as Cesium from 'cesium'; import './Widgets/Cesium.css'; // 初始化 Viewer 对象实例化地球仪控件 const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain(), }); let positions = []; let timeStamps = []; function addPosition(longitude, latitude, height) { let cartographic = Cesium.Cartographic.fromDegrees( longitude, latitude, height ); positions.push(Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height)); timeStamps.push(new Date().toISOString()); } setInterval(() => { // 模拟每隔一秒向路径上追加随机坐标位置 const lon = Math.random() * 360 - 180; const lat = Math.random() * 180 - 90; const hgt = Math.random() * 5e3; addPosition(lon, lat, hgt); }, 1000); setTimeout(() => { drawPath(); }, 5000); async function drawPath(){ await sleep(5000); var property = new Cesium.SampledPositionProperty(); for (var i = 0; i < positions.length; ++i){ property.addSample(timeStamps[i],positions[i]); } viewer.entities.add({ name : "Trajectory Line", position : property, path : { resolution : 1, material : new Cesium.PolylineGlowMaterialProperty({ glowPower : 0.2, color : Cesium.Color.RED.withAlpha(0.7) }), width : 4 } }); viewer.zoomTo(viewer.entities); } function sleep(ms:number):Promise<void> { return new Promise(resolve=> setTimeout(resolve,ms)) } </script> <style scoped> #csmContainer { width: 100%; height: calc(100vh - 2rem); border: none; } </style> ``` 上述代码实现了每秒钟往三维空间里新增一个随机分布的数据节点，并最终形成一段动态演化的飞行航迹线条图形对象呈现在界面上让用户直观感受物体移动过程中的时空演变规律特性[^4]。