Cesium 轨迹回放

效果

第一步

创建线的实体 

class Fly {
    constructor(viewer, data) {
        this.viewer = viewer;
        this.data = data;
        this.initLocus();
    }

    initLocus() {
        const datasoure = new Cesium.CustomDataSource('entiestestdata');
        this.viewer.dataSources.add(datasoure);
        const pathData = this.generatePathData(this.data);
        this.addPathToDatasource(datasoure, pathData);

    }
    generatePathData(data) {
        let pathData = [];
        data.forEach((item) => {
            pathData.push(item[0], item[1], item[2]);
        });
        return pathData;
    }
    addPathToDatasource(datasoure, pathData) {
        datasoure.entities.add({
            name: "line",
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights(pathData),
                material: Cesium.Color.YELLOW,
                width: 1,
                heightReference: Cesium.HeightReference.NONE,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
        });
    }
}

export default Fly;

第二步

添加运动对象属性 核心api是 SampledPositionProperty 

SampledPositionProperty  主要是用来表示物体的动态位置变化  

interpolationDegree 值得大小好像是影响效率和精度的

class Fly {
    constructor(viewer, data) {
        this.viewer = viewer;
        this.data = data;
        this.initLocus();
    }

    initLocus() {
        const datasoure = new Cesium.CustomDataSource('entiestestdata');
        this.viewer.dataSources.add(datasoure);
        const pathData = this.generatePathData(this.data);
        this.addPathToDatasource(datasoure, pathData);

        const property = this.createPositionProperty(this.data);

    }
    generatePathData(data) {
        let pathData = [];
        data.forEach((item) => {
            pathData.push(item[0], item[1], item[2]);
        });
        return pathData;
    }
    addPathToDatasource(datasoure, pathData) {
        datasoure.entities.add({
            name: "line",
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights(pathData),
                material: Cesium.Color.YELLOW,
                width: 1,
                heightReference: Cesium.HeightReference.NONE,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
        });
    }
    createPositionProperty(data) {
        let property = new Cesium.SampledPositionProperty();
        data.forEach((item, index) => {
            let time = new Date(Date.now() + index * 2000);
            let position = Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2]);
            property.addSample(Cesium.JulianDate.fromDate(time), position);
            this.viewer.entities.add({
                position: position,
                point: {
                    pixelSize: 10,
                    color: Cesium.Color.RED,
                    outlineWidth: 2,
                    outlineColor: Cesium.Color.DARKRED,
                },
            });
        });
        property.setInterpolationOptions({
            interpolationDegree: 0.01,
            interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
        });
        return property;
    }
}

export default Fly;

第三步（完整代码）

添加模型

orientation 计算朝向的api

clock.currentTime 开始时间

clock.stopTime 结束时间

 this.viewer.clock.clockRange 几个属性

CLAMPED:达到终止时间后停止

LOOP_STOP:达到终止时间后重新循环

UNBOUNDED：达到终止时间后继续读秒（默认）

clock.shouldAnimate true是开始 赋值为false则结束

class Fly {
    constructor(viewer, data) {
        this.viewer = viewer;
        this.data = data;
        this.initLocus();
    }

    initLocus() {

        const datasoure = new Cesium.CustomDataSource('entiestestdata');
        this.viewer.dataSources.add(datasoure);

        const pathData = this.generatePathData(this.data);
        this.addPathToDatasource(datasoure, pathData);
        const property = this.createPositionProperty(this.data);
        const dates = this.getStopTime(this.data);

        this.addEntityWithModelAndAnimation(property, dates, datasoure);
    }
    generatePathData(data) {
        let pathData = [];
        data.forEach((item) => {
            pathData.push(item[0], item[1], item[2]);
        });
        return pathData;
    }

    addPathToDatasource(datasoure, pathData) {
        datasoure.entities.add({
            name: "line",
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights(pathData),
                material: Cesium.Color.YELLOW,
                width: 1,
                heightReference: Cesium.HeightReference.NONE,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
        });
    }

    createPositionProperty(data) {
        let property = new Cesium.SampledPositionProperty();
        data.forEach((item, index) => {
            let time = new Date(Date.now() + index * 2000);
            let position = Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2]);
            property.addSample(Cesium.JulianDate.fromDate(time), position);
            this.viewer.entities.add({
                position: position,
                point: {
                    pixelSize: 10,
                    color: Cesium.Color.RED,
                    outlineWidth: 2,
                    outlineColor: Cesium.Color.DARKRED,
                },
            });
        });
        property.setInterpolationOptions({
            interpolationDegree: 0.01,
            interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
        });
        return property;
    }

    getStopTime(data) {
        const stoptime = new Date(Date.now() + (data.length - 1) * 2000);
        return stoptime;
    }

    addEntityWithModelAndAnimation(property, dates, datasource) {
        this.viewer.entities.add({
            availability: new Cesium.TimeIntervalCollection([
                new Cesium.TimeInterval({
                    start: Cesium.JulianDate.fromDate(new Date()),
                    stop: Cesium.JulianDate.fromDate(dates),
                }),
            ]),
            zIndex: 1,
            position: property,
            orientation: new Cesium.VelocityOrientationProperty(property),
            model: {
                uri: "http://localhost:8080/GroundVehicle.glb",
            },
            path: {
                resolution: 1,
                material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.1,
                    color: Cesium.Color.YELLOW
                }),
                width: 10
            }

        });
        this.viewer.clock.currentTime = Cesium.JulianDate.fromDate(new Date());
        this.viewer.clock.stopTime = Cesium.JulianDate.fromDate(dates);
        this.viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
        this.viewer.flyTo(datasource);
        this.viewer.clock.shouldAnimate = true;
    }
}

export default Fly;