Cesium .PathGraphics 绘制小车轨迹图

Cesium是一个强大的JavaScript库，用于创建交互式三维地球浏览器应用程序，特别是在WebGL上。`Cesium.PathGraphics` 是Cesium的一个内置组件，它允许你在地球表面上绘制路径数据，如车辆轨迹、飞行路线等。

要使用 `Cesium.PathGraphics` 绘制小车轨迹图，你需要按照以下步骤操作：

1. **初始化Cesium**：
首先，在HTML文件中引入Cesium库，并创建一个沙盒来放置Cesium视图：

   <script src="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Cesium.js"></script>
   <div id="cesiumContainer" style="width: 100%; height: 500px;"></div>

2. **创建场景和摄像机**：
JavaScript中，创建Cesium Viewer对象并设置初始视角：

   const viewer = new Cesium.Viewer('cesiumContainer');
   viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(0, 0), orientation: { heading: 0, pitch: -60 } });

3. **准备轨迹数据**：
将车辆的经纬度坐标点存储在一个数组中，例如每一步的位置信息：

   const positions = [
     // 车辆行驶的每一步的经纬度...
   ];

4. **创建PathGraphics对象**：
使用 `Cesium.PathGraphics` 构造函数，并将位置数据传递给它：

   const pathGraphics = viewer.entities.add({
     position: Cesium defaultValue(new Cesium.CallbackProperty(positions, true)), // 初始位置和更新位置的回调函数
     path: {
       resolution: 20, // 描绘路径的分辨率
       followsSurface: true, // 是否让路径跟随地形
       material: new Cesium.PolylineMaterialProperty({
         color: Cesium.Color.RED, // 路径颜色
       }),
     },
   });

5. **动态更新轨迹**：
如果有实时的数据流，你可以定期更新 `position` 的回调函数：

   function updatePosition() {
     // 更新当前位置到新的值
     // pathGraphics.position.setValue(newPosition);
   }
   setInterval(updatePosition, 1000); // 每秒更新一次，这里假设你有获取新位置的方法

6. **启用动画**：
设置 `viewer.clock.shouldAnimate` 为 `true` 来启用帧动画效果。

viewer.clock.shouldAnimate = true;