基于Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫(huà)
這個(gè)效果其實(shí)網(wǎng)上很多案例了,本來(lái)不打算寫(xiě)了,但是做都做了,稍微來(lái)說(shuō)一下吧,代碼實(shí)測(cè)可用!
最后的效果就是這個(gè)樣子的啦!
就是很簡(jiǎn)單的一個(gè)衛(wèi)星,放射信號(hào),然后圍著軌道轉(zhuǎn)圈圈。
資源網(wǎng)站
首先呢,分享幾個(gè)網(wǎng)站,盡管大家應(yīng)該都有,但是還是分享一下子吧。
其中這個(gè)下載3D模型的網(wǎng)站有很多3D模型,可以根據(jù)自己的需要搜索下載使用,盡管大部分是收費(fèi)的,但是又免費(fèi)的呀,自己測(cè)試或者是玩的話(huà),我覺(jué)得夠用了,我覺(jué)得還不錯(cuò)的呢!
繪制衛(wèi)星繞軌動(dòng)效
首先這個(gè)稍微說(shuō)一下哈,其實(shí)就是用了 cesium 的時(shí)間軸,然后添加衛(wèi)星模型,在距離地面的固定高度按照設(shè)置好的軌跡進(jìn)行繞地旋轉(zhuǎn),關(guān)于下面的錐形信號(hào)覆蓋區(qū)域,就是在衛(wèi)星正下方,添加繪制了一個(gè)圓柱形的模型,使得上面的圓截面半徑為0,下面的圓截面半徑大一些,然后就是一個(gè)錐形了,具體錐形繪制案例看我 這篇博客【穿梭門(mén)】 哈,有好多繪制形狀的案例。
接下來(lái)直接上代碼?。。。?其實(shí)我也是看的別的博主發(fā)的文章,然后稍作修改出來(lái)的效果,但是大體實(shí)現(xiàn)方式就是我上面說(shuō)的。
初始化藍(lán)星
首先要實(shí)現(xiàn)這個(gè)功能,一定要開(kāi)啟時(shí)間軸的呀,不然不好使哈!
timeline: true, //是否顯示時(shí)間線(xiàn)控件
上面這個(gè)得開(kāi)起來(lái)!
viewer = new Cesium.Viewer('map', { baseLayerPicker: false, // 影像切換 animation: true, //是否顯示動(dòng)畫(huà)控件 infoBox: false, //是否顯示點(diǎn)擊要素之后顯示的信息 geocoder: false, //是否顯示地名查找控件 timeline: true, //是否顯示時(shí)間線(xiàn)控件 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" }) })
添加衛(wèi)星模型方法
主要是配置這個(gè)時(shí)間軸,然后就調(diào)用方法把衛(wèi)星放進(jìn)藍(lán)星里面。
// 衛(wèi)星 function satellite() { start = new Cesium.JulianDate.fromDate(new Date()); // 獲取當(dāng)前時(shí)間 這不是國(guó)內(nèi)的時(shí)間 start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 添加八小時(shí),得到我們東八區(qū)的北京時(shí)間 stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate()); // 設(shè)置一個(gè)結(jié)束時(shí)間,意思是360秒之后時(shí)間結(jié)束 viewer.clock.startTime = start.clone(); // 給cesium時(shí)間軸設(shè)置開(kāi)始的時(shí)間,也就是上邊的東八區(qū)時(shí)間 viewer.clock.stopTime = stop.clone(); // 設(shè)置cesium時(shí)間軸設(shè)置結(jié)束的時(shí)間 viewer.clock.currentTime = start.clone(); // 設(shè)置cesium時(shí)間軸設(shè)置當(dāng)前的時(shí)間 viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 時(shí)間結(jié)束了,再繼續(xù)重復(fù)來(lái)一遍 //時(shí)間變化來(lái)控制速度 // 時(shí)間速率,數(shù)字越大時(shí)間過(guò)的越快 viewer.clock.multiplier = 2; //給時(shí)間線(xiàn)設(shè)置邊界 viewer.timeline.zoomTo(start, stop); rrStates = []; getRandState(arrStates, 1); startFunc(); }
相關(guān)方法
一股腦直接把代碼發(fā)過(guò)來(lái)了,然后網(wǎng)上其實(shí)都有,我不發(fā)你也找得到,然后這些也是網(wǎng)上拼湊起來(lái)的,然后嘞,應(yīng)該能看懂,看不懂的直接找那個(gè) Cesium API 中文版網(wǎng)站去查,應(yīng)該沒(méi)什么難的。加油!
function mySatePosition() { this.lon = 0; this.lat = 0; this.hei = 700000; //衛(wèi)星高度 this.phei = 700000 / 2; //軌道高度 this.time = 0; } function computeCirclularFlight(source, panduan) { var property = new Cesium.SampledPositionProperty(); if (panduan == 1) { //衛(wèi)星位置 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); // 添加位置,和時(shí)間對(duì)應(yīng) 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); // 添加位置,和時(shí)間對(duì)應(yīng) 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); //創(chuàng)建實(shí)體 var entity1 = viewer.entities.add({ // 將實(shí)體availability設(shè)置為與模擬時(shí)間相同的時(shí)間間隔。 availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop })]), position: entity1p,//計(jì)算實(shí)體位置屬性 //基于位置移動(dòng)自動(dòng)計(jì)算方向. orientation: new Cesium.VelocityOrientationProperty(entity1p), //加載飛機(jī)模型 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]); } }
到此這篇關(guān)于基于Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)Cesium衛(wèi)星在軌繞行動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS中三目運(yùn)算符和if else的區(qū)別分析與示例
本文是通過(guò)示例詳細(xì)分析了JS中三目運(yùn)算符和if else的區(qū)別,是篇非常不錯(cuò)的文章,這里推薦給大家。2014-11-11js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的方法
這篇文章主要介紹了js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的方法,以實(shí)例形式講述了js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JS中通過(guò)slice()&substring()截取字符串前幾位的方法
在Javascript使用字符串中,我們不一定需要全部的字符串,這時(shí)就需要截取字符串,本文主要介紹js中截取字符串前幾位的兩種方法:1、使用slice() 方法;2、使用substring() 方法,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-12-12基于Bootstrap3表格插件和分頁(yè)插件實(shí)例詳解
這篇文章主要介紹了基于Bootstrap3表格插件和分頁(yè)插件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05十個(gè)免費(fèi)的web前端開(kāi)發(fā)工具詳細(xì)整理
這篇文章主要介紹了十個(gè)免費(fèi)的web前端開(kāi)發(fā)工具詳細(xì)整理的相關(guān)資料,希望通過(guò)本文大家能夠理解使用免費(fèi)web開(kāi)發(fā)工具,需要的朋友可以參考下2017-09-09js判斷當(dāng)前頁(yè)面在移動(dòng)設(shè)備還是在PC端中打開(kāi)
這篇文章主要介紹了js判斷當(dāng)前頁(yè)面在移動(dòng)設(shè)備還是在PC端中打開(kāi)的相關(guān)資料,需要的朋友可以參考下2016-01-01ES6記錄異步函數(shù)的執(zhí)行時(shí)間詳解
在這篇文章里,我會(huì)實(shí)現(xiàn)一個(gè)可重用的函數(shù)來(lái)處理 JavaScript 延時(shí)異步操作。有需要的小伙伴們可以參考借鑒,下面來(lái)一起看看。2016-08-08