三维GIS开发cesium智慧地铁教程（7）路径漫游

一、引入Cesium库

1.1 Cesium库的基本配置

在HTML文档中，我们引入了Cesium所需的JavaScript和CSS文件。确保路径正确，以便能够加载Cesium的功能和样式。

1.2 视口设置

为了使Cesium的地图能够自适应屏幕尺寸，我们在部分设置了视口的meta标签。

二、创建Cesium视图

2.1 初始化Cesium视图

在部分，我们创建了一个div，作为Cesium的容器。

接下来，我们在脚本中初始化Cesium Viewer。

const viewer = new Cesium.Viewer('cesiumContainer');

2.2 设置时间轴

我们使用JulianDate来定义动画的时间范围。这里设置了动画的起始时间和结束时间。

const start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
const stop = Cesium.JulianDate.addSeconds(start, 120, new Cesium.JulianDate());

三、配置时钟

3.1 时钟设置

我们通过以下代码设置了时钟的起始时间、结束时间和当前时间，并启用了动画。

viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.shouldAnimate = true; // 启用动画

四、设置轨迹

4.1 定义位置

我们使用Cartesian3.fromDegrees方法定义了两个位置点，作为轨迹的起点和终点。

const pos1 = Cesium.Cartesian3.fromDegrees(-75.15787310614596, 39.97862668312678);
const pos2 = Cesium.Cartesian3.fromDegrees(-75.1633691390455, 39.95355089912078);

4.2 创建位置属性

接下来，我们创建了一个SampledPositionProperty对象，用于存储轨迹的样本点。

const position = new Cesium.SampledPositionProperty();
position.addSample(start, pos1);
position.addSample(stop, pos2);

五、动画实体的创建

5.1 添加动画实体

我们使用viewer.entities.add方法，创建一个动画实体并设置其属性。

const animateEntity = viewer.entities.add({
    availability: new Cesium.TimeIntervalCollection([
        new Cesium.TimeInterval({
            start: start,
            stop: stop,
        }),
    ]),
    position: position,
    orientation: new Cesium.VelocityOrientationProperty(position),
    model: {
        scale: 0.17,
        uri: "./metro.gltf",
        minimumPixelSize: 40,
    },
});

关键属性说明：

• availability：定义实体的可用时间范围。
• position：设置实体的位置轨迹。
• orientation：使用VelocityOrientationProperty自动计算方向。
• model：设置模型的缩放比例和路径。

5.2 追踪实体

最后，我们设置了追踪的实体，使得视图始终跟随该实体。

viewer.trackedEntity = animateEntity; // Cesium追踪实体

完整代码：

总结：

通过以上步骤，我们成功创建了一个包含动态轨迹的Cesium应用。可以通过调整时间、位置和模型参数，进一步探索Cesium功能。