[cesium] 自定义无人机轨迹 和 无人机探测效果_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('暂不实现');
    }
  
}