Cesium开发实践（二）模拟多架飞机飞行

来源：互联网发布：淘宝网电脑端描述编辑：程序博客网时间：2024/05/09 08:59

今天在看官网Demo的时候，看到一个关于时间轴的例子，正巧之前一直想做一个飞机飞行的例子，正愁不知道弄，现在有思路，赶紧乘热打铁。

先看下实现的效果图:

这里写图片描述

虽然有点瑕疵，但是效果还是可以的。核心就是利用之前说的时间轴来实现，理解掌握这个后就好办了。

初始化

<body>    <div id="cesiumDemo"></div>    <script type="text/javascript">        let view = new Cesium.Viewer('cesiumDemo', {            baseLayerPicker: false,            imageryProvider: new Cesium.ArcGisMapServerImageryProvider({                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'            }),            // 阴影是否被太阳投射            shadows: true        });        // 启用地球照明        view.scene.globe.enableLighting = true;        // 数据        let data = [];        data[0] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:116.2821, dimension:39.918145, height:0, time:40},{longitude:115.497402, dimension:39.344641, height:70000, time:100},{longitude:107.942392, dimension:29.559967, height:70000, time:280}, {longitude:106.549265, dimension:29.559967, height:0, time:360}];        data[1] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:117.034586, dimension:39.881202, height:0, time:40},{longitude:116.340088, dimension:38.842224, height:70000, time:100},{longitude:113.489176, dimension:23.464017, height:70000, time:280}, {longitude:113.262084, dimension:23.13901, height:0, time:360}];        data[2] = [{longitude:118.838979, dimension:32.073514, height:0, time:0},{longitude:118.438838, dimension:32.03777, height:0, time:40},{longitude:117.802406, dimension:31.91231, height:70000, time:100},{longitude:104.043645, dimension:35.993845, height:70000, time:280}, {longitude:101.807224, dimension:36.660972, height:0, time:360}];   </script></body>

因为没有真实数据，就用假的来代替了，坐标点是从百度地图上拾取的。

设置时间轴时间

        // 起始时间        let start = Cesium.JulianDate.fromDate(new Date(2017,7,11));        // 结束时间        let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());        // 设置始时钟始时间        view.clock.startTime = start.clone();        // 设置时钟当前时间        view.clock.currentTime = start.clone();        // 设置始终停止时间        view.clock.stopTime  = stop.clone();        // 时间速率，数字越大时间过的越快        view.clock.multiplier = 10;        // 时间轴        view.timeline.zoomTo(start,stop);        // 循环执行        view.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

添加坐标到时间轴

        /**         * 计算飞行         * @param source 数据坐标         * @returns {SampledPositionProperty|*}         */        function computeFlight(source) {            // 取样位置 相当于一个集合            let property = new Cesium.SampledPositionProperty();            for(let i=0; i<source.length; i++){                let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);                let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);                // 添加位置，和时间对应                property.addSample(time, position);            }            return property;        }

添加模型

        for(let j=0; j<data.length; j++){            let property = computeFlight(data[j]);            // 添加模型            let planeModel = view.entities.add({                // 和时间轴关联                availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({                    start : start,                    stop : stop                })]),                position: property,                // 根据所提供的速度计算点                orientation: new Cesium.VelocityOrientationProperty(property),                // 模型数据                model: {                    uri: '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',                    minimumPixelSize:128                }            });        }

完整代码

<body>    <div id="cesiumDemo"></div>    <script type="text/javascript">        let view = new Cesium.Viewer('cesiumDemo', {            baseLayerPicker: false,            imageryProvider: new Cesium.ArcGisMapServerImageryProvider({                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'            }),            // 阴影是否被太阳投射            shadows: true        });        // 启用地球照明        view.scene.globe.enableLighting = true;        let data = [];        data[0] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:116.2821, dimension:39.918145, height:0, time:40},{longitude:115.497402, dimension:39.344641, height:70000, time:100},{longitude:107.942392, dimension:29.559967, height:70000, time:280}, {longitude:106.549265, dimension:29.559967, height:0, time:360}];        data[1] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:117.034586, dimension:39.881202, height:0, time:40},{longitude:116.340088, dimension:38.842224, height:70000, time:100},{longitude:113.489176, dimension:23.464017, height:70000, time:280}, {longitude:113.262084, dimension:23.13901, height:0, time:360}];        data[2] = [{longitude:118.838979, dimension:32.073514, height:0, time:0},{longitude:118.438838, dimension:32.03777, height:0, time:40},{longitude:117.802406, dimension:31.91231, height:70000, time:100},{longitude:104.043645, dimension:35.993845, height:70000, time:280}, {longitude:101.807224, dimension:36.660972, height:0, time:360}];        // 起始时间        let start = Cesium.JulianDate.fromDate(new Date(2017,7,11));        // 结束时间        let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());        // 设置始时钟始时间        view.clock.startTime = start.clone();        // 设置时钟当前时间        view.clock.currentTime = start.clone();        // 设置始终停止时间        view.clock.stopTime  = stop.clone();        // 时间速率，数字越大时间过的越快        view.clock.multiplier = 10;        // 时间轴        view.timeline.zoomTo(start,stop);        // 循环执行        view.clock.clockRange = Cesium.ClockRange.LOOP_STOP;        for(let j=0; j<data.length; j++){            let property = computeFlight(data[j]);            // 添加模型            let planeModel = view.entities.add({                // 和时间轴关联                availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({                    start : start,                    stop : stop                })]),                position: property,                // 根据所提供的速度计算点                orientation: new Cesium.VelocityOrientationProperty(property),                // 模型数据                model: {                    uri: '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',                    minimumPixelSize:128                }            });        }            /**             * 计算飞行             * @param source 数据坐标             * @returns {SampledPositionProperty|*}             */            function computeFlight(source) {                // 取样位置 相当于一个集合                let property = new Cesium.SampledPositionProperty();                for(let i=0; i<source.length; i++){                    let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);                    let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);                    // 添加位置，和时间对应                    property.addSample(time, position);                }                return property;            }    </script></body>

可能刚开始会有点不理解，把点和时间添加到时间轴当成补间动画的话，这样就会很好理解了。总得来说，还是很简单的~~多看demo，多看demo，多看demo。。

阅读全文

1 0