cesium实现轨迹回放镜头跟踪

cesium实现轨迹回放镜头跟踪

适用于贴地运动的情况

实现轨迹回放物体运动

通过构造property让entity运动

构造模型entity

                this.model = this.billboardCollection.entities.add(
                    {
                        position: this.modelProperty,
                        // 根据所提供的速度计算模型的朝向
                        orientation: new Cesium.VelocityOrientationProperty(this.modelProperty),
                        // 模型数据
                        model: {
                            uri: this.markerPath,
                            minimumPixelSize: 50,
                            scale: 0.5,
                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                        },
                        polyline: {
                            positions: this.cartesian3ModelPositions,
                            material: Cesium.Color.fromCssColorString(this.initRouteColor),
                            clampToGround: true,
                            width: this.routeWidth
                        },
                        viewFrom: this.viewFrom
                    });


### 构造entity的property
```javascript
 // 构造entity的property
    /** 开始运动*/
    computeFlight() {
        let times = 0;
        let cartographicModelPoints = []
        var stopTime
        var p
        // 转换坐标的格式为Cartographic
        for (let i = 0; i < this.routecoords.length; i++) {
            cartographicModelPoints[i] = new Cesium.Cartographic.fromDegrees(this.routecoords[i][0], this.routecoords[i][1])
        }

        let computeModelHeightPromise = Cesium.sampleTerrainMostDetailed(this.terrain, cartographicModelPoints);
        Cesium.when.all([computeModelHeightPromise], () => {

            this.getSpaceDistance(cartographicModelPoints)
            this.timeArray.push(0)
            for (let i = 0; i < this.distanceArray.length; i++) {
                p = (this.distanceArray[i] * 0.001) / 111
                let time = (this.timeInterval / this.sampleInterval) * (p)
                this.timeArray.push(time)
            }

            for (let i = 0; i < cartographicModelPoints.length; i++) {
                let Cartesian3ModelPoints = Cesium.Cartesian3.fromRadians(cartographicModelPoints[i].longitude,
                    cartographicModelPoints[i].latitude, cartographicModelPoints[i].height)
                times = times + this.timeArray[i]
                let time = Cesium.JulianDate.addSeconds(this.start, times, new Cesium.JulianDate);
                this.timeList.push(time)
                this.modelProperty.addSample(time, Cartesian3ModelPoints);
                this.cartesian3ModelPositions.push(Cartesian3ModelPoints)
            }
            
            stopTime = this.timeList[this.timeList.length - 1]
            this.viewer.timeline.zoomTo(this.start, stopTime)
            this.viewer.clock.stopTime = stopTime

            this.viewFrom = new Cesium.Cartesian3(this.cartesian3ModelPositions[0].x,
                this.cartesian3ModelPositions[0].y,
                Math.abs(60))
            this.addModel()
        })

    }

实现镜头跟踪

设置this.viewer.trackedEntity = this.model

该方式在运动过程中鼠标可以改变镜头的heading、pitch、roll

自定义视角跟踪

通过构造相机的property，构造方式跟模型property一样,思路构造一条相机的运动路线，与模型保持相对运动，但是在运动过程中鼠标无法改变相机的参数。

tracking() {
        let that = this
        let lookHeight = this.cameraHeight
        this.cameraListener = function () {
            var cameraCartesian3 = that.cameraProperty.getValue(that.viewer.clock.currentTime)
            var modelCartesian3 = that.model.position.getValue(that.viewer.clock.currentTime);
            if (cameraCartesian3 !== undefined && that.viewer.clock.shouldAnimate && modelCartesian3 !== undefined) {
                var cameraCartographic = Cesium.Cartographic.fromCartesian(cameraCartesian3)
                var newCameraCartesian3 = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(cameraCartographic.longitude), Cesium.Math.toDegrees(cameraCartographic.latitude), cameraCartographic.height + lookHeight)

                let heading = that.getHeading(newCameraCartesian3, modelCartesian3)
                let pitch = that.getPitch(newCameraCartesian3, modelCartesian3)
                that.viewer.camera.setView({
                    destination: newCameraCartesian3,
                    orientation: {
                        heading: heading,
                        pitch: pitch,
                        roll: 0.0,
                    }
                })

            }
        }
        that.viewer.scene.postRender.addEventListener(this.cameraListener);
    }

效果展示