Cesium路径回放

写项目时，有路径回放功能。但是网上资料有些不适用或者不全。写完之后想着放上来，共大家参考。
代码参考：
cesium实现飞行漫游
cesium轨迹回放，按路径飞行

核心代码：

• 绘制轨迹线

 const handler = new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
 const self = this;
        handler.setInputAction(function(event) {
            var earthPosition = self.viewer.scene.pickPosition(event.position);
            if (Cesium.defined(earthPosition)) {
                if (self.activeShapePoints.length === 0) {
                    self.floatingPoint = self.createPoint(earthPosition);
                    self.activeShapePoints.push(earthPosition);
                    var dynamicPositions = new Cesium.CallbackProperty(function() {
                        return self.activeShapePoints;
                    }, false);
                    self.activeShape = self.drawShape(dynamicPositions); //绘制动态图
                }
                self.activeShapePoints.push(earthPosition);
                self.createPoint(earthPosition);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        //鼠标移动
        handler.setInputAction(function(event) {
            if (Cesium.defined(self.floatingPoint)) {
                var newPosition = self.viewer.scene.pickPosition(event.endPosition);
                if (Cesium.defined(newPosition)) {
                    self.floatingPoint.position.setValue(newPosition);
                    self.activeShapePoints.pop();
                    self.activeShapePoints.push(newPosition);
                }
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        handler.setInputAction(function() {
            self.terminateShape();
        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

//绘制点
    createPoint(worldPosition) {
        var point = this.viewer.entities.add({
            position: worldPosition,
            point: {
                color: Cesium.Color.WHITE,
                pixelSize: 1
            }
        });
        return point;
    }
    //画线
    drawShape(positionData) {
        var shape;
        if (this.drawingMode === 'line') {
            shape = this.viewer.entities.add({
                polyline: {
                    positions: positionData,
                    clampToGround: true,
                    width: 3
                }
            });
            this.drawinLink.push(shape)
        }
        return shape;
    }

    terminateShape() {
        this.activeShapePoints.pop(); //去除最后一个动态点
        if (this.activeShapePoints.length) {
            this.marks = [];
            for (const position of this.activeShapePoints) {
                const latitude = this.toDegrees(Cesium.Cartographic.fromCartesian(position).latitude)
                const longitude = this.toDegrees(Cesium.Cartographic.fromCartesian(position).longitude)
                this.marks.push({
                    lat: latitude,
                    lng: longitude,
                    flytime: this.flytime,
                    height: 0
                })
            }
            this.drawShape(this.activeShapePoints); //绘制最终图
            this.startFly();
        }
        this.viewer.entities.remove(this.floatingPoint); //去除动态点图形（当前鼠标点）
        this.viewer.entities.remove(this.activeShape); //去除动态图形
        this.floatingPoint = undefined;
        this.activeShape = undefined;
        this.activeShapePoints = [];
    }

    drawShape(positionData) {
        var shape;
        if (this.drawingMode === 'line') {
            shape = this.viewer.entities.add({
                polyline: {
                    positions: positionData,
                    clampToGround: true,
                    width: 3
                }
            });
        }
        return shape;
    }

• 模型按轨迹运动

          let planeModel = this.viewer.entities.add({
            // 和时间轴关联
            availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                start: start,
                stop: stop
            })]),
            position: property,
            // 根据所提供的速度计算模型的朝向
            orientation: new Cesium.VelocityOrientationProperty(property),
            // 模型数据
            model: {
                uri: '../../static/CesiumAir/Cesium_Air.glb',
                minimumPixelSize: 128
            }
        });

• 重点：脱离时间轴
  找了很多代码基本都是依靠Cesium的时间轴进行移动，但是写的时候遇到了问题，如果是多条线路，可能存在时间轴播放结束但是模型未移动到终点的情况。于是将路线对应的时间轴终点修改，不再统一使用一条时间轴，而是多条时间轴(页面不显示时间轴)。以解决每条路径长度不同移动时间不同的问题。

  computeFlight(source, start) {
        let property = new Cesium.SampledPositionProperty();
        let end = ""
        for (let i = 0; i < source.length; i++) {
            let time = Cesium.JulianDate.addSeconds(start, source[i].flytime*i*10, new Cesium.JulianDate);
            let position = Cesium.Cartesian3.fromDegrees(source[i].lng, source[i].lat, source[i]
            .height);
            // 添加位置，和时间对应
            property.addSample(time, position);
            if(i == source.length -1){
            //获取最后节点时间
                end = Cesium.JulianDate.addSeconds(start, source[i].flytime*i*10, new Cesium.JulianDate)
            }
        }
        return {
            property,end
        };
    }

// 设置始终停止时间
        this.viewer.clock.stopTime = stop.clone();

最后效果(删了点帧)：

drawLine.gif