Cesium基础-（Entity）-（path）

10、path 路径

Cesium中的Path是用于描述一个实体随时间移动形成的路径的折线。简单来说，如果你有一个移动的物体，比如飞机或者车辆，Path可以帮助你在Cesium中画出这个物体的移动轨迹。下面是Path的属性和方法的详细解读，以及它们在表格中的表示：

属性

方法

这些属性和方法可以帮助你控制路径的外观和行为，比如是否显示路径、路径的宽度和颜色，以及路径在何时可见等。通过使用这些属性和方法，你可以在Cesium中创建出各种动态的路径效果，比如飞机的飞行轨迹或者车辆的行驶路线。

代码：

// 定义一个函数addPath，用于在Cesium Viewer中添加路径和模型
function addPath(viewer) {
    // 起始时间，获取当前的JulianDate时间
    let start = Cesium.JulianDate.now();
    // 结束时间，从起始时间增加360秒
    let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
    
    // 设置时钟开始时间
    viewer.clock.startTime = start.clone();
    // 设置时钟停止时间
    viewer.clock.stopTime = stop.clone();
    // 设置时钟当前时间
    viewer.clock.currentTime = start.clone();
    // 循环执行，即为2，到达终止时间，重新从起点时间开始
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
    // 时间速率，数字越大时间过的越快
    viewer.clock.multiplier = 10;
    // 时间轴，设置时间轴的范围
    viewer.timeline.zoomTo(start, stop);

    // 定义一个函数computePath，用于计算路径
    function computePath(lon, lat) {
        // 创建一个SampledPositionProperty对象，用于存储位置和时间的样本
        let property = new Cesium.SampledPositionProperty();
        // 循环添加10个样本点
        for (let i = 0; i < 10; i++) {
            // 计算每个样本点的时间，从起始时间开始，每次增加60秒
            let time = Cesium.JulianDate.addSeconds(start, i * 60, new Cesium.JulianDate());
            // 计算每个样本点的位置，使用Cesium.Cartesian3.fromDegrees将经纬度转换为笛卡尔坐标
            let position = Cesium.Cartesian3.fromDegrees(lon, lat + i * 0.1, 1750);
            // 将时间和位置添加到SampledPositionProperty对象中
            property.addSample(time, position);
        }
        // 返回SampledPositionProperty对象
        return property;
    }
    
    // 调用computePath函数，计算当前位置
    let position = computePath(-120, 40);

    // 添加一个实体，包含模型和路径
    let path = viewer.entities.add({
        // 设置实体的位置，使用SampledPositionProperty对象
        position: position,
        // 根据所提供的速度计算模型的朝向
        orientation: new Cesium.VelocityOrientationProperty(position),
        // 设置实体的可用时间范围
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            start: start,
            stop: stop
        })]),
        // 添加模型
        model: {
            // 模型的URI，这里使用的是本地服务器的模型地址
            // 注意：请确保模型地址有效，否则模型将无法加载
            uri: "http://localhost:8888/Models/weixin.gltf"
        },
        // 添加路径
        path: {
            // 指定在对该位置进行采样时要移动的最大秒数
            resolution: 600,
            // 显示路径前面的秒数
            leadTime: 100,
            // 显示路径尾部的秒数
            trailTime: 10,
            // 设置路径的材质，这里使用发光材质
            material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 10,
                color: Cesium.Color.ORANGE,
            }),
            // 设置路径的宽度
            width: 3
        }
    });
    
    // 设置viewer跟踪的实体为path
    viewer.trackedEntity = path;
}

要在Vue代码环境中运行上述addPath函数

步骤 1: 安装Cesium

首先，确保你的Vue项目中已经安装了Cesium。如果还没有安装，可以通过npm或yarn来安装：

npm install cesium

或者

yarn add cesium

步骤 2: 创建Vue组件

创建一个新的Vue组件，用于承载Cesium Viewer。例如，你可以创建一个名为CesiumPathViewer.vue的文件。

步骤 3: 引入Cesium

在Vue组件中引入Cesium库：

<template>
  <div ref="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script>
import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css'; // 引入Cesium的样式文件

export default {
  name: 'CesiumPathViewer',
  mounted() {
    this.initCesium();
  },
  methods: {
    initCesium() {
      // 初始化Cesium Viewer
      const viewer = new Cesium.Viewer(this.$refs.cesiumContainer);

      // 添加路径和模型
      this.addPath(viewer);
    },
    addPath(viewer) {
      let start = Cesium.JulianDate.now();
      let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

      viewer.clock.startTime = start.clone();
      viewer.clock.stopTime = stop.clone();
      viewer.clock.currentTime = start.clone();
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
      viewer.clock.multiplier = 10;
      viewer.timeline.zoomTo(start, stop);

      function computePath(lon, lat) {
        let property = new Cesium.SampledPositionProperty();
        for (let i = 0; i < 10; i++) {
          let time = Cesium.JulianDate.addSeconds(start, i * 60, new Cesium.JulianDate());
          let position = Cesium.Cartesian3.fromDegrees(lon, lat + i * 0.1, 1750);
          property.addSample(time, position);
        }
        return property;
      }

      let position = computePath(-120, 40);

      let path = viewer.entities.add({
        position: position,
        orientation: new Cesium.VelocityOrientationProperty(position),
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
          start: start,
          stop: stop
        })]),
        model: {
          uri: "http://localhost:8888/Models/weixin.gltf", // 确保模型文件的URL正确
        },
        path: {
          resolution: 600,
          leadTime: 100,
          trailTime: 10,
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 10,
            color: Cesium.Color.ORANGE,
          }),
          width: 3
        }
      });

      viewer.trackedEntity = path;
    }
  }
};
</script>

步骤 4: 使用CesiumPathViewer组件

在你的Vue应用中的任何地方引入并使用CesiumPathViewer组件：

<template>
  <div id="app">
    <CesiumPathViewer />
  </div>
</template>

<script>
import CesiumPathViewer from './components/CesiumPathViewer.vue';

export default {
  name: 'App',
  components: {
    CesiumPathViewer
  }
};
</script>

步骤 5: 确保Cesium资源加载

Cesium需要加载大量的资源文件，确保你的项目配置了正确的路径或者使用了Cesium的CDN服务。

步骤 6: 调试和测试

运行你的Vue应用，并确保Cesium Viewer正确加载，并且路径和模型实体正确显示。

要在React代码环境中运行上述addPath函数

步骤 1: 安装Cesium

首先，确保你的React项目中已经安装了Cesium。如果还没有安装，可以通过npm或yarn来安装：

npm install cesium

或者

yarn add cesium

步骤 2: 创建React组件

创建一个新的React组件，用于承载Cesium Viewer。例如，你可以创建一个名为CesiumPathViewer.js的文件。

步骤 3: 引入Cesium

在React组件中引入Cesium库：

import React, { useRef, useEffect } from 'react';
import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css'; // 引入Cesium的样式文件

步骤 4: 设置Cesium Viewer

在React组件中设置Cesium Viewer，并添加一个ref来引用DOM元素：

const CesiumPathViewer = () => {
  const cesiumContainerRef = useRef(null);

  useEffect(() => {
    // 初始化Cesium Viewer
    const viewer = new Cesium.Viewer(cesiumContainerRef.current);

    // 添加路径和模型
    addPath(viewer);

    // 清理资源，组件卸载时销毁viewer
    return () => {
      viewer.destroy();
    };
  }, []);

  return (
    <div ref={cesiumContainerRef} style={{ width: '100%', height: '100vh' }} />
  );
};

export default CesiumPathViewer;

步骤 5: 定义addPath函数

在同一个文件中定义addPath函数：

const addPath = (viewer) => {
  let start = Cesium.JulianDate.now();
  let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

  viewer.clock.startTime = start.clone();
  viewer.clock.stopTime = stop.clone();
  viewer.clock.currentTime = start.clone();
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
  viewer.clock.multiplier = 10;
  viewer.timeline.zoomTo(start, stop);

  function computePath(lon, lat) {
    let property = new Cesium.SampledPositionProperty();
    for (let i = 0; i < 10; i++) {
      let time = Cesium.JulianDate.addSeconds(start, i * 60, new Cesium.JulianDate());
      let position = Cesium.Cartesian3.fromDegrees(lon, lat + i * 0.1, 1750);
      property.addSample(time, position);
    }
    return property;
  }

  let position = computePath(-120, 40);

  let path = viewer.entities.add({
    position: position,
    orientation: new Cesium.VelocityOrientationProperty(position),
    availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
      start: start,
      stop: stop
    })]),
    model: {
      uri: "http://localhost:8888/Models/weixin.gltf", // 确保模型文件的URL正确
    },
    path: {
      resolution: 600,
      leadTime: 100,
      trailTime: 10,
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 10,
        color: Cesium.Color.ORANGE,
      }),
      width: 3
    }
  });

  viewer.trackedEntity = path;
};

步骤 6: 使用CesiumPathViewer组件

在你的React应用中的任何地方引入并使用CesiumPathViewer组件：

import React from 'react';
import ReactDOM from 'react-dom';
import CesiumPathViewer from './CesiumPathViewer';

ReactDOM.render(
  <React.StrictMode>
    <CesiumPathViewer />
  </React.StrictMode>,
  document.getElementById('root')
);

步骤 7: 确保Cesium资源加载

Cesium需要加载大量的资源文件，确保你的项目配置了正确的路径或者使用了Cesium的CDN服务。

步骤 8: 调试和测试

运行你的React应用，并确保Cesium Viewer正确加载，并且路径和模型实体正确显示。

欢迎关注我的博客及B站：

博客：

https://blog.csdn.net/weixin_44857463/article/details/129157708

B站：

https://space.bilibili.com/610654927?spm_id_from=..0.0

点击蓝字  关注我们

扫码关注

我们一起学习！