Cesium路徑回放

寫項目時,有路徑回放功能。但是網(wǎng)上資料有些不適用或者不全。寫完之后想著放上來,共大家參考。
代碼參考:
cesium實現(xiàn)飛行漫游
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); //繪制動態(tài)圖
                }
                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(); //去除最后一個動態(tài)點
        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); //去除動態(tài)點圖形(當前鼠標點)
        this.viewer.entities.remove(this.activeShape); //去除動態(tài)圖形
        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({
            // 和時間軸關聯(lián)
            availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                start: start,
                stop: stop
            })]),
            position: property,
            // 根據(jù)所提供的速度計算模型的朝向
            orientation: new Cesium.VelocityOrientationProperty(property),
            // 模型數(shù)據(jù)
            model: {
                uri: '../../static/CesiumAir/Cesium_Air.glb',
                minimumPixelSize: 128
            }
        });
  • 重點:脫離時間軸
    找了很多代碼基本都是依靠Cesium的時間軸進行移動,但是寫的時候遇到了問題,如果是多條線路,可能存在時間軸播放結束但是模型未移動到終點的情況。于是將路線對應的時間軸終點修改,不再統(tǒng)一使用一條時間軸,而是多條時間軸(頁面不顯示時間軸)。以解決每條路徑長度不同移動時間不同的問題。
  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){
            //獲取最后節(jié)點時間
                end = Cesium.JulianDate.addSeconds(start, source[i].flytime*i*10, new Cesium.JulianDate)
            }
        }
        return {
            property,end
        };
    }

// 設置始終停止時間
        this.viewer.clock.stopTime = stop.clone();

最后效果(刪了點幀):


drawLine.gif
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容