vue3使用cesium实现轨迹回放。

最新推荐文章于 2025-11-18 10:03:57 发布

原创

最新推荐文章于 2025-11-18 10:03:57 发布 · 2.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该示例展示了如何在Cesium中创建一个3D车辆模型，通过定位、速度和旋转属性模拟车辆从起点到终点的行驶过程，同时实现了车轮随速度旋转的效果。使用了JulianDate进行时间管理，以及VelocityVectorProperty和CallbackProperty来计算车速和车轮角度变化。

效果图如下：

cesium官方案例

具体代码如下：

<template>
  <div>
    <CesiumViewer />
    <el-button @click="handleStart()">开始</el-button>
    <el-button @click="handlePause()">暂停</el-button>
    <el-button @click="handleStop()">结束</el-button>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
import CesiumViewer from "../../components/cesiumViewer.vue";

onMounted(() => {
  const viewer = window.cesiumViewer;
  const start = Cesium.JulianDate.fromDate(new Date(2018, 11, 12, 15));
  const totalSeconds = 10;
  const stop = Ces