[cesium] 自定義無人機軌跡 和 無人機探測效果

效果

實現

/**
 * 飛行路徑封裝類
 */
import Camera from './camera.js'
import CVTools from './cvTool.js';
import Entitys from './entitys.js';
import entityFactory from './entityFactory.js';
import Handler from './handler.js';
import mouseManager from './mouseManager.js';
import {Components} from '../BaseUI/component.js';
import ModelManager from './modelManager.js';
export default class FlyPath{

    constructor(v){
        //核心類
        this.CoreV = v;
        //時鐘對象
        this.flyClock = v.clock;
          /**
         * mouseManager
         * 座標轉換
         */
        this.mouseManager = new mouseManager(v);
        //默認飛行路線
        this.mFlyPath = [
            {longitude:116.538799, dimension:39.9948, height:0, time:0},
            {longitude:116.130034, dimension:38.291387, height:5000, time:120},
            {longitude:116.415192, dimension:34.841955, height:5000, time:240},
            {longitude:117.261468, dimension:31.831171, height:5000, time:360}, 
            {longitude:115.881671, dimension:28.70164, height:5000, time:480},
            {longitude:116.120835, dimension:24.308311, height:5000, time:600},
            {longitude:113.269254, dimension:23.13956, height:0, time:720}
        ]

        //相機對象
        this.ccc = new Camera(v);
        //工具對象
        this.Tools = new CVTools();
        //實體對象
        this.entitys = new Entitys(v);
        //時間速率
        this.flySpeed = 10;
        //飛行時間間隔
        this.flyInterval = 120;
        //飛行高度
        this.flyHeight = 5000;
        //自定義畫線
        this.positions = [];
        //自定義位置點信息
        this.lnglatPositions = [];
        //自定義線實體
        this.polyLine = null;
        //飛機實體
        this.pickedFeature = null;
        //模型管理
        this.ModelManager = new ModelManager(v);
    }
    /**
     * 準備飛行
     */
    initFly(){
        this.startTime = new Cesium.JulianDate(); //當前時間
        this.stopTime = Cesium.JulianDate.addSeconds(this.startTime, (this.mFlyPath.length-1)*120,new Cesium.JulianDate()); //結束時間
        this.flyClock.startTime = this.startTime.clone();  // 設置始時鐘始時間
        this.flyClock.currentTime = this.startTime.clone();  // 設置時鐘當前時間
        this.flyClock.stopTime  = this.stopTime.clone();  // 設置始終停止時間
        this.flyClock.multiplier = this.flySpeed;  // 時間速率，數字越大時間過的越快
        this.flyClock.clockRange = Cesium.ClockRange.LOOP_STOP;// 循環執行
        this.run(); //run方法
        this.toView(); //切換視野
        this.flyInfo(); //飛行信息
        this.addModel(); //添加模型
    }
    //相機視野
    toView(){
        this.ccc.toView(Cesium.Cartesian3.fromDegrees(this.mFlyPath[0].longitude , this.mFlyPath[0].dimension , 100000));
    }
    /**
     * 飛行
     */
    run(){
        let _self = this;
        let property = new Cesium.SampledPositionProperty(); //屬性
        _self.Tools.arrForEach(_self.mFlyPath,function(vue,index){ //value index
            let time = Cesium.JulianDate.addSeconds(_self.startTime, vue.time, new Cesium.JulianDate());
            let position = Cesium.Cartesian3.fromDegrees(vue.longitude, vue.dimension, vue.height);
            property.addSample(time, position); // 添加位置，和時間對應
        });
        let entity = _self.entitys.createEntity(); //創建一個實體
        //給實體賦值
        entity.name = "無人機";
        entity.availability = new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start : _self.startTime,stop : _self.stopTime})]); // 和時間軸關聯
        entity.position = property;
        entity.orientation =  new Cesium.VelocityOrientationProperty(property); //基於位置移動自動計算方向
        entity.model = _self.entitys.getModel({url:'../src/Cesium/Apps/SampleData/models/CesiumAir/Cesium_Air.gltf'}); // 模型數據,跨域，模型文件必須放本地
        entity.path = _self.entitys.getPath(); //路徑
        _self.entityObj = _self.entitys.add(entity); //添加飛行
        _self.bindScan(); //綁定掃描物體
    }
    /**
     * 綁定掃描物
     */
    bindScan(){
       this.scanEntity = new entityFactory({type:"dynamicCylinder",data:{positions:this.entityObj.position.getValue(this.flyClock.currentTime),entity:this.entityObj,v:this.CoreV,cylinder:{legnth:5000,slices:10,bottomRadius:5000/2}}});
       this.scanEntityObj = this.entitys.add( this.scanEntity);
    }
    /**
     * flyInfo
     */
    flyInfo(){
        let _self = this;
        _self.handlerAction = new Handler(_self.CoreV);
         _self.handlerAction.Action(function(e){   //單擊
            if(!e.position){
                return false;
            }
            _self.pickedFeature = _self.mouseManager.piObj(e.position);
            if (!Cesium.defined(_self.pickedFeature) && _self.pickedFeature == undefined){
                return false;
            };
            if(_self.pickedFeature.id == undefined){ //自己創建的
                return false;
            };
            let f_position = _self.mouseManager.piEllipsoid(_self.pickedFeature.id.position.getValue(_self.flyClock.currentTime));
            
            _self.pickedFeature.id.description = _self.infoTable( _self.pickedFeature.id.name,f_position) + 
            '<h2> 掃描結果 </h2>' + _self.scanInfo(f_position) +
            '<h2> 偵察分析 </h2><div class="flytool"><button type="button" class="analysisGround" style="height:40px;margin:2px;">地面分析</button>' +
            '<button type="button" class="analysisRetrieve" style="height:40px;margin:2px;">地面檢索</button>'+
            '<button type="button" class="analysisWord" style="height:40px;margin:2px;">分析報告</button></div>' + 
            '<h2> 視頻回放 </h2><div class="flyAMT"><video id="video_div" width="350" height="250" src="video/fly.mp4" controls autoplay></video></div>';
            
            setTimeout(function(){_self.Anction();},20);
        },_self.handlerAction.LEFT_CLICK)
        //時鐘監聽
        _self.flyClock.onTick.addEventListener(function(clock) {
            if(!clock.shouldAnimate)return; 
            if(_self.pickedFeature == null){
                return false;
            }
            let position = _self.pickedFeature.id.position.getValue(clock.currentTime);
            let f_position = _self.mouseManager.piEllipsoid(position);
            _self.pickedFeature.id.description = _self.infoTable( _self.pickedFeature.id.name,f_position) + 
            '<h2> 掃描結果 </h2>' + _self.scanInfo(f_position);
        });
        
        //分析工具 和 動畫
    }
    /**
     * 座標info
     */
    infoTable(f_name,cartesian){
        if(f_name == undefined && cartesian == undefined){
            return false;
        };
        let tr = "",table = `<h2> 位置點 </h2><table class="cesium-infoBox-defaultTable"><thead><tr><th>Name</th><th>Latitude</th><th>Longitude</th><th>Elevation</th></tr></thead><tbody>`;
        let f_point = [ parseInt(cartesian.longitude / Math.PI * 180), parseInt(cartesian.latitude / Math.PI * 180)];
        tr = `<tr><td>${f_name}</td><td>${f_point[0]}°</td><td>${f_point[1]}°</td><td> ${parseInt(cartesian.height)}</td></tr>`;
        return table + tr + `</tbody></table>`;
    }
    /**
     * 掃描info
     */
    scanInfo(position){
        if(!position){
            return false;
        }
        let tr = "",table = `<table class="cesium-infoBox-defaultTable"><thead><tr><th>類別</th><th>經度</th><th>緯度</th><th>總數</th></tr></thead><tbody>`;
        let f_point = [ parseInt(position.longitude / Math.PI * 180), parseInt(position.latitude / Math.PI * 180)];
        tr += `<tr><td>`+ '建築物' +`</td><td>${f_point[0]}°</td><td>${f_point[1]}°</td><td>${parseInt(Math.floor(Math.random()*100))}</td></tr>`;
        tr += `<tr><td>`+ '車輛' +`</td><td>${f_point[0]}°</td><td>${f_point[1]}°</td><td>${parseInt(Math.floor(Math.random()*100))}</td></tr>`;
        return table + tr + `</tbody></table>`;
    }
    /**
     * 分析工具
     */
    Anction(){
        let iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
        this.analysisGround(iframe.contentWindow.document);
        this.analysisRetrieve(iframe.contentWindow.document);
        this.analysisWord(iframe.contentWindow.document);
    }
    /**
     * 添加模型
     */
    addModel(){
        this.entitys.add(this.ModelManager.createCar(Cesium.Cartesian3.fromDegrees(this.mFlyPath[1].longitude , this.mFlyPath[1].dimension , 0)));
    }
    /**
     * 播放動畫
     */
    playAMT(){
        let video_div = document.getElementById('video_div');
    }
    /**
     * 機身分析報告
     */
    analysisWord(doc){
        doc.getElementsByClassName("analysisWord")[0].onclick = function(){
            Components.TAG.analysisBox.open();
        }
    }
    /**
     * 地面檢索
     */
    analysisRetrieve(doc){
        doc.getElementsByClassName("analysisRetrieve")[0].onclick = function(){
            Components.TAG.searchGround.create();
        }
    }
    /**
     * 地面分析
     */
    analysisGround(doc){
        doc.getElementsByClassName("analysisGround")[0].onclick = function(){
            Components.TAG.analysisBox.open();
        }
    }
     /**
     * 向後飛行
     */
    flyBack(){
        this.flySpeed = -10;
        this.flyClock.multiplier = this.flySpeed;
    }
    /**
     * 向前飛行
     */
    flyForward(){
        this.flySpeed = 10;
        this.flyClock.multiplier = this.flySpeed;
    }
    /**
     * 開始飛行
     */
    startFly(){
        this.flyClock.shouldAnimate = true; 
    }
    /**
     * 暫停飛行
     */
    pauseFly(){
        this.flyClock.shouldAnimate = false;
    }
    /**
     * 清除飛行
     */
    removeFly(){
        this.CoreV.trackedEntity = null;
        let start = Cesium.JulianDate.fromDate(new Date());
        this.flyClock.startTime = start.clone();
        var stop = Cesium.JulianDate.addSeconds(start, 300000000, new Cesium.JulianDate());
        this.flyClock.stopTime = stop.clone();
        this.entitys.remove(this.entityObj);
        this.entitys.remove(this.polyLine);
        this.entitys.remove(this.scanEntityObj);
        this.pauseFly();
    }
    /**
     * 跟隨視圖
     */
    aircraftView(){
        this.ccc.aircraftView(this.entityObj);
    }
     /**
     * 頂部視圖
     */
    topView(){
        this.ccc.sideView(this.entityObj);
    }
     /**
     * 側邊視圖
     */
    sideView(){
        this.ccc.topView(this.entityObj);
    }
    /**
     * 保存自定義飛行
     */
    saveCustomFly(){
        let _self = this;
        if( _self.lnglatPositions.length > 0){
            _self.Tools.saveJsonText({
                jsonData : _self.mFlyPath,
                jsonName : 'flyJson.json'
            })
        }
    }
    /**
     * 開始自定義飛行
     */
    startCustomFly(){
        let _self = this;
        _self.removeFly();
        $.get('data/flyJson.json',{},function(json){
                if(json == null)return false;
                _self.mFlyPath = json;
                _self.initFly();
        });
    }
    /**
     * 自定義飛行
     */
    customFly(){
        let _self = this;
        _self.positions = [], _self.lnglatPositions = [];
        _self.handlerAction = new Handler(_self.CoreV);
        //單擊
        _self.handlerAction.Action(function(e){
            if(!e.position){
                return false;
            }
            let cartesian = _self.mouseManager.piScreen(e.position); //拾取屏幕座標

            if(_self.positions.length == 0)_self.positions.push(cartesian); //第一次創建保證有兩個點
            _self.positions.push(cartesian);
            
            //飛行路徑實體
            let lonlat = _self.mouseManager.screenToLonlat(e.position); //屏幕座標轉經緯度 高程
            _self.lnglatPositions.push({longitude:lonlat.lon, dimension:lonlat.lat, height: _self.flyHeight, time:_self.lnglatPositions.length * _self.flyInterval}); //時間間隔
            
            _self.handlerAction.COUNTER = _self.positions.length; //畫線規則
        },_self.handlerAction.LEFT_CLICK);
        //移動
        _self.handlerAction.Actions(function(){},function(e){
            if(!e.endPosition){
                return false;
            }
            let cartesian = _self.mouseManager.piScreen(e.endPosition); //拾取屏幕座標
            if (!Cesium.defined(_self.polyLine)) {
                _self.lineOption = new entityFactory({type:"createLine",data:_self.positions});

                _self.entitys.add(_self.lineOption);
            }else{
                _self.positions.pop();
                cartesian.y += (1 + Math.random());
                _self.positions.push(cartesian);
            }
        },_self.handlerAction.MOUSE_MOVE,_self.handlerAction.COUNTER);
       //雙擊
       _self.handlerAction.Action(function(e){
            _self.handlerAction.destroy();
            if(_self.positions.length == 0 ){
                return false;
            }
            _self.mFlyPath = _self.lnglatPositions;
            _self.saveCustomFly();
       },_self.handlerAction.LEFT_DOUBLE_CLICK);
    }
    /**
     * 鍵盤控制飛行
     */
    flyByKeyword(){
        console.log('暫不實現');
    }
  
}