轨迹回放

在初始化的时候需要开启shouldAnimate

viewer.value = new Cesium.Viewer('viewerDivRef', {
    shouldAnimate: true
});

function addRouter() {
    // 1.先把这条线绘制到map上
    const routerData = [
        [112.4602886710001, 28.14388249900003, 11.147400000001653],
        [113.45620292800007, 29.143328030000028, 11.529899999994086],
        [114.45347615200001, 28.14381135600007, 11.687300000005052],
        [115.45082070700005, 29.140899211000033, 13.289099999994505],
        [116.45082070700005, 28.140899211000033, 13.289099999994505]
    ]
    const dataSource = new Cesium.CustomDataSource("routerData");
    viewer.value.dataSources.add(dataSource)
    dataSource.entities.add({
        name: "line",
        polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(routerData.flat()),
            material: Cesium.Color.RED,
            width: 1
        }
    })
    // 2.
    const property = new Cesium.SampledPositionProperty();
    const startTime = new Date();
    let stopTime = new Date();
    const timeStamp = startTime.getTime();

    routerData.forEach((pos, index) => {
        const time = new Date(timeStamp + index * 5000);
        stopTime = time;
        const position = Cesium.Cartesian3.fromDegrees(pos[0], pos[1], pos[2])
        property.addSample(Cesium.JulianDate.fromDate(time), position);
    })
    property.setInterpolationOptions({
        interpolationDegree: 0.0001,
        interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
    });

    const entity = dataSource.entities.add({
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            start: Cesium.JulianDate.fromDate(startTime),
            stop: Cesium.JulianDate.fromDate(new Date(stopTime))
        })]),
        position: property, // 点集
        orientation: new Cesium.VelocityOrientationProperty(property),
        model: {
            uri: './src/assets/glb/mini-car.gltf',
            scale: 1,
            minimumPixelSize: 72
        },
        label: {
            text: 'test',
            fillColor: Cesium.Color.RED,
            pixelOffset: new Cesium.Cartesian2(0, -40)
        },
        path: {
            leadTime: 0,
            resolution: 1,
            material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.5,
                color: Cesium.Color.GREEN
            }),
            width: 10
        }
    });

    viewer.value.clock.onTick.addEventListener((clock: { currentTime: Cesium.JulianDate; }) => {
        const cartographicPos = Cesium.Ellipsoid.WGS84.cartesianToCartographic(entity.position?.getValue(clock.currentTime))
        cartographicPos.longitude = Cesium.Math.toDegrees(cartographicPos.longitude)
        cartographicPos.latitude = Cesium.Math.toDegrees(cartographicPos.latitude)
        entity.label.text = `经度：${cartographicPos.longitude.toFixed(5)}，纬度：${cartographicPos.latitude.toFixed(5)}`
    });
    viewer.value.clock.currentTime = Cesium.JulianDate.fromDate(startTime); //修改时间轴的当前时间
    viewer.value.clock.stopTime = Cesium.JulianDate.fromDate(new Date(stopTime));
    viewer.value.clock.clockRange = Cesium.ClockRange.LOOP_STOP
    viewer.value.clock.shouldAnimate = true; //开始播放
    viewer.value.trackedEntity = entity;
}