基於Cesium實現衛星在軌繞行動畫
這個效果其實網上很多案例瞭,本來不打算寫瞭,但是做都做瞭,稍微來說一下吧,代碼實測可用!
最後的效果就是這個樣子的啦!
就是很簡單的一個衛星,放射信號,然後圍著軌道轉圈圈。
資源網站
首先呢,分享幾個網站,盡管大傢應該都有,但是還是分享一下子吧。
cesium API 中文網站
3D模型下載
其中這個下載3D模型的網站有很多3D模型,可以根據自己的需要搜索下載使用,盡管大部分是收費的,但是又免費的呀,自己測試或者是玩的話,我覺得夠用瞭,我覺得還不錯的呢!
繪制衛星繞軌動效
首先這個稍微說一下哈,其實就是用瞭 cesium 的時間軸,然後添加衛星模型,在距離地面的固定高度按照設置好的軌跡進行繞地旋轉,關於下面的錐形信號覆蓋區域,就是在衛星正下方,添加繪制瞭一個圓柱形的模型,使得上面的圓截面半徑為0,下面的圓截面半徑大一些,然後就是一個錐形瞭,具體錐形繪制案例看我 這篇博客【穿梭門】 哈,有好多繪制形狀的案例。
接下來直接上代碼!!!! 其實我也是看的別的博主發的文章,然後稍作修改出來的效果,但是大體實現方式就是我上面說的。
初始化藍星
首先要實現這個功能,一定要開啟時間軸的呀,不然不好使哈!
timeline: true, //是否顯示時間線控件
上面這個得開起來!
viewer = new Cesium.Viewer('map', { baseLayerPicker: false, // 影像切換 animation: true, //是否顯示動畫控件 infoBox: false, //是否顯示點擊要素之後顯示的信息 geocoder: false, //是否顯示地名查找控件 timeline: true, //是否顯示時間線控件 fullscreenButton: false, shouldAnimate: false, navigationHelpButton: false, //是否顯示幫助信息控件 terrainProvider: new Cesium.createWorldTerrain({ requestWaterMask: true, requestVertexNormals: true }), imageryProvider: new Cesium.UrlTemplateImageryProvider({ url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali" }) })
添加衛星模型方法
主要是配置這個時間軸,然後就調用方法把衛星放進藍星裡面。
// 衛星 function satellite() { start = new Cesium.JulianDate.fromDate(new Date()); // 獲取當前時間 這不是國內的時間 start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 添加八小時,得到我們東八區的北京時間 stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate()); // 設置一個結束時間,意思是360秒之後時間結束 viewer.clock.startTime = start.clone(); // 給cesium時間軸設置開始的時間,也就是上邊的東八區時間 viewer.clock.stopTime = stop.clone(); // 設置cesium時間軸設置結束的時間 viewer.clock.currentTime = start.clone(); // 設置cesium時間軸設置當前的時間 viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 時間結束瞭,再繼續重復來一遍 //時間變化來控制速度 // 時間速率,數字越大時間過的越快 viewer.clock.multiplier = 2; //給時間線設置邊界 viewer.timeline.zoomTo(start, stop); rrStates = []; getRandState(arrStates, 1); startFunc(); }
相關方法
一股腦直接把代碼發過來瞭,然後網上其實都有,我不發你也找得到,然後這些也是網上拼湊起來的,然後嘞,應該能看懂,看不懂的直接找那個 Cesium API 中文版網站去查,應該沒什麼難的。加油!
function mySatePosition() { this.lon = 0; this.lat = 0; this.hei = 700000; //衛星高度 this.phei = 700000 / 2; //軌道高度 this.time = 0; } function computeCirclularFlight(source, panduan) { var property = new Cesium.SampledPositionProperty(); if (panduan == 1) { //衛星位置 for (var i = 0; i < source.length; i++) { var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate); var position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, source[i].hei); // 添加位置,和時間對應 property.addSample(time, position); } } else if (panduan == 2) {//軌道位置 for (var i = 0; i < source.length; i++) { var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate); var position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, source[i].phei); // 添加位置,和時間對應 property.addSample(time, position); } } return property; } function getRandState(brr, count) { for (var m = 0; m < count; m++) { var arr = []; var t1 = Math.floor(Math.random() * 360); var t2 = Math.floor(Math.random() * 360); for (var i = t1; i <= 360 + t1; i += 30) { var aaa = new mySatePosition(); aaa.lon = t2; aaa.lat = i; aaa.time = i - t1; arr.push(aaa); } brr.push(arr); } } function getStatePath(aaa) { var entity_ty1p = computeCirclularFlight(aaa, 2); var entity_ty1 = viewer.entities.add({ availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop })]), position: entity_ty1p, //軌道高度 orientation: new Cesium.VelocityOrientationProperty(entity_ty1p), cylinder: { HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND, length: 700000, topRadius: 0, bottomRadius: 900000 / 2, // material: Cesium.Color.RED.withAlpha(.4), // outline: !0, numberOfVerticalLines: 0, // outlineColor: Cesium.Color.RED.withAlpha(.8), material: Cesium.Color.fromBytes(35, 170, 242, 80) }, }); entity_ty1.position.setInterpolationOptions({ interpolationDegree: 5, interpolationAlgorithm: Cesium.LagrangePolynomialApproximation }); var entity1p = computeCirclularFlight(aaa, 1); //創建實體 var entity1 = viewer.entities.add({ // 將實體availability設置為與模擬時間相同的時間間隔。 availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop })]), position: entity1p,//計算實體位置屬性 //基於位置移動自動計算方向. orientation: new Cesium.VelocityOrientationProperty(entity1p), //加載飛機模型 model: { uri: './models/weixing/scene.gltf', scale: 1000 }, //路徑 path: { resolution: 1, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.1, color: Cesium.Color.PINK }), width: 5 } }); //差值器 entity1.position.setInterpolationOptions({ interpolationDegree: 5, interpolationAlgorithm: Cesium.LagrangePolynomialApproximation }); } function startFunc() { for (var i = 0; i < arrStates.length; i++) { getStatePath(arrStates[i]); } }
到此這篇關於基於Cesium實現衛星在軌繞行動畫的文章就介紹到這瞭,更多相關Cesium衛星在軌繞行動畫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 基於Cesium實現繪制圓形,正方形,多邊形,橢圓圖形標註
- cesium開發之如何在vue項目中使用cesium,使用離線地圖資源
- 詳解cesium實現大批量POI點位聚合渲染優化方案
- vue中安裝使用cesium方式(親測可用)
- three.js顯示中文字體與tween應用詳析