czml的模型运动及轨迹实现

非实时代码

 /*
            *功能:点选查看无人机飞行轨迹
            *参数:data 无人机数据 请求后台接口 获取轨迹信息
            *返回数据:无人机轨迹
            */
           lookPath(data){
                //删除之前创建的轨迹
                window.map.map3D.entities.remove(window.RealTime);
                window.map.map3D.entities.remove(window.planeModel)
                delete window.RealTime;
                delete window.planeModel;
                delete window.StopTime;
                delete window.eutUavId;
                clearInterval(window.t);
                // 1,"2021-11-11 15:00:00","2021-11-11 15:08:23"
                //判断当前是实时轨迹还是历史轨迹
                let that = this;
                if(!data.eutCompletionTime){
                    window.StopTime = data.eutStartTime;
                    window.eutUavId = data.eutUavId;
                    getUavTracks(data.eutUavId,data.eutStartTime,'').then( res => {
                        if(res.data.length > 0 ){
                            that.FlyByRealTime(res.data);
                            window.StopTime = res.data[res.data.length-1].posTime
                        }
                    })
                    window.t = setInterval(function(){
                        getUavTracks(window.eutUavId,window.StopTime,'').then( res => {
                            if(res.data.length > 0 ){
                                that.FlyByRealTime(res.data);
                                window.StopTime = res.data[res.data.length-1].posTime
                            }
                        })
                    },6000);
                }else{
                    getUavTracks(data.eutUavId,data.eutStartTime,data.eutCompletionTime).then( res => {
                        let path = new Array();
                        if(res.data.length > 0 ){
                            that.FlyByPath(res.data)
                        }
                    })
                }
           },

 实时显示的:

 /*
           *功能:模拟飞行
           *参数:path 飞行路径
           */
            FlyByPath(source){
                // 起始时间
                let start = Cesium.JulianDate.fromDate(new Date(source[0].posTime));
                // 结束时间
                let stop = Cesium.JulianDate.fromDate(new Date(source[source.length-1].posTime));
                //持续时间
                let trailTime = new Date(source[source.length-1].posTime).getTime()-new Date(source[0].posTime).getTime()
                // 设置始时钟始时间
                window.map.map3D.clock.startTime = start.clone();
                // 设置时钟当前时间
                window.map.map3D.clock.currentTime = start.clone();
                // 设置始终停止时间
                window.map.map3D.clock.stopTime  = stop.clone();
                // 时间速率,数字越大时间过的越快
                window.map.map3D.clock.multiplier = 1;
                window.map.map3D.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER;
                window.map.map3D.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
                //拼接无人机飞行路线数据
                let property = new Cesium.SampledPositionProperty();
                source.forEach(item =>{
                    let time = Cesium.JulianDate.fromDate(new Date(item.posTime));
                    let position = Cesium.Cartesian3.fromDegrees(item.posLng, item.posLat, item.posHei);
                    property.addSample(time, position);
                })
                window.planeModel = window.map.map3D.entities.add({
                    // 和时间轴关联
                    availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                        start : start,
                        stop : stop
                    })]),
                    position: property,
                    // 根据所提供的速度计算模型的朝向
                    orientation: new Cesium.VelocityOrientationProperty(property),
                    // 模型数据
                    billboard: {
                        //image: drawCompanyTip(item),
                        image: require('@/assets/images/uav/无人机.png'),
                        scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        width:60,
                        height:60,
                    },path: {
                        resolution: 1,
                        material: new Cesium.PolylineGlowMaterialProperty({
                            glowPower: 0.1,
                            color: Cesium.Color.YELLOW
                        }),
                        // leadTime、trailTime 不设置 path全显示
                        // leadTime:0,// 设置为0时 模型通过后显示path
                        leadTime: 0, // 路线提前执行时间
                        trailTime: trailTime, // 路线跟踪时间
                        width: 10
                    }
                });
                window.map.map3D.clock.onStop.addEventListener((tick) => {
                    window.map.map3D.entities.remove(window.planeModel)
                })

            },

上一篇:cesium转换坐标,将没有高度的坐标转换为世界坐标


下一篇:cesium 粒子系统