在cesium中添加航线，并加入模型，使之沿航线移动

打怪升级咯

于 2024-08-20 17:11:23 发布

阅读量243

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/m0_57211146/article/details/141363112

版权

添加效果图

一、添加航线

    
    const polylineEntity = this.viewer.entities.add({
        polyline: {
            positions: points, // 线的坐标数组
            width: 2 // 线的宽度
        }
    });
    this.lineEntities.push(polylineEntity);

二、添加模型

this.viewer.entities.add({
    id: 'drone',
    name: "Cesium_Air",
    position: positionProperty,
    model: {
        uri: "/test/Cesium_Air.glb",
        minimumPixelSize: 60,
        maximumScale: 100
    },
    orientation: new Cesium.VelocityOrientationProperty(positionProperty) // 设置方向与采样属性一致
});

我使用的是官网下载的模型，附上下载模型网址

https://sandcastle.cesium.com/SampleData/models/CesiumAir/Cesium_Air.glb

如果想下载其他模型，换模型名称即可。

三、完整代码

drawLine(points) {
    // 删除现有模型
    this.viewer.entities.removeById('drone')
    const polylineEntity = this.viewer.entities.add({
        polyline: {
            positions: points, // 线的坐标数组
            width: 2 // 线的宽度
        }
    });
    this.lineEntities.push(polylineEntity);
    // 创建一个SampledPositionProperty对象来处理动画
    const positionProperty = new Cesium.SampledPositionProperty();
    const startTime = Cesium.JulianDate.now();
    points.forEach((position, index) => {
        const time = Cesium.JulianDate.addSeconds(startTime, index * 5, new Cesium.JulianDate()); // 处理动画时间
        positionProperty.addSample(time, position);
    });
    // 创建模型实体
    this.viewer.entities.add({
        id: 'drone',
        name: "Cesium_Air",
        position: positionProperty,
        model: {
            uri: "/test/Cesium_Air.glb",
            minimumPixelSize: 60,
            maximumScale: 100
        },
        orientation: new Cesium.VelocityOrientationProperty(positionProperty) // 设置方向与采样属性一致
    });
    // 设置动画时间
    this.viewer.clock.startTime = startTime;
    this.viewer.clock.currentTime = startTime;
    this.viewer.clock.stopTime = Cesium.JulianDate.addSeconds(startTime, points.length * 3.5, new Cesium.JulianDate());
    this.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
    this.viewer.clock.multiplier = 2; // 可以调整速度
    this.viewer.clock.shouldAnimate = true;

    // 设置视角
    this.viewer.zoomTo(this.viewer.entities);
    return polylineEntity;
}

this.viewer.entities.removeById('drone')这行代码作用是在画新的航线时，将之前画的航线上的模型去除，只在当前航线展示模型。this.viewer.clock.shouldAnimate = true;可以使动画自动播放。orientation: new Cesium.VelocityOrientationProperty(positionProperty)这行代码可以使得模型沿着航线的方向，效果非常好。