[cesium] 自定义无人机轨迹和无人机探测效果

Dear 丶 2023-08-17 16:27 132阅读 0赞

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70][]

实现

/**
     * 飞行路径封装类
     */
    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('暂不实现');
        }
      
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70]: /images/20230810/094055ad52c24c5d8381ecd8c7841adf.png