基于Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫
這個(gè)效果其實(shí)網(wǎng)上很多案例了,本來不打算寫了,但是做都做了,稍微來說一下吧,代碼實(shí)測可用!
最后的效果就是這個(gè)樣子的啦!

就是很簡單的一個(gè)衛(wèi)星,放射信號,然后圍著軌道轉(zhuǎn)圈圈。
資源網(wǎng)站
首先呢,分享幾個(gè)網(wǎng)站,盡管大家應(yīng)該都有,但是還是分享一下子吧。
其中這個(gè)下載3D模型的網(wǎng)站有很多3D模型,可以根據(jù)自己的需要搜索下載使用,盡管大部分是收費(fèi)的,但是又免費(fèi)的呀,自己測試或者是玩的話,我覺得夠用了,我覺得還不錯(cuò)的呢!
繪制衛(wèi)星繞軌動(dòng)效
首先這個(gè)稍微說一下哈,其實(shí)就是用了 cesium 的時(shí)間軸,然后添加衛(wèi)星模型,在距離地面的固定高度按照設(shè)置好的軌跡進(jìn)行繞地旋轉(zhuǎn),關(guān)于下面的錐形信號覆蓋區(qū)域,就是在衛(wèi)星正下方,添加繪制了一個(gè)圓柱形的模型,使得上面的圓截面半徑為0,下面的圓截面半徑大一些,然后就是一個(gè)錐形了,具體錐形繪制案例看我 這篇博客【穿梭門】 哈,有好多繪制形狀的案例。
接下來直接上代碼!?。?! 其實(shí)我也是看的別的博主發(fā)的文章,然后稍作修改出來的效果,但是大體實(shí)現(xiàn)方式就是我上面說的。
初始化藍(lán)星
首先要實(shí)現(xiàn)這個(gè)功能,一定要開啟時(shí)間軸的呀,不然不好使哈!
timeline: true, //是否顯示時(shí)間線控件
上面這個(gè)得開起來!
viewer = new Cesium.Viewer('map', {
baseLayerPicker: false, // 影像切換
animation: true, //是否顯示動(dòng)畫控件
infoBox: false, //是否顯示點(diǎn)擊要素之后顯示的信息
geocoder: false, //是否顯示地名查找控件
timeline: true, //是否顯示時(shí)間線控件
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í)間 這不是國內(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è)置開始的時(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ù)來一遍
//時(shí)間變化來控制速度 // 時(shí)間速率,數(shù)字越大時(shí)間過的越快
viewer.clock.multiplier = 2;
//給時(shí)間線設(shè)置邊界
viewer.timeline.zoomTo(start, stop);
rrStates = [];
getRandState(arrStates, 1);
startFunc();
}
相關(guān)方法
一股腦直接把代碼發(fā)過來了,然后網(wǎng)上其實(shí)都有,我不發(fā)你也找得到,然后這些也是網(wǎng)上拼湊起來的,然后嘞,應(yīng)該能看懂,看不懂的直接找那個(gè) Cesium API 中文版網(wǎng)站去查,應(yīng)該沒什么難的。加油!
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í)間對應(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í)間對應(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)畫的文章就介紹到這了,更多相關(guān)Cesium衛(wèi)星在軌繞行動(dòng)畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法
這篇文章主要介紹了JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
Javascript-Mozilla和IE中的一個(gè)函數(shù)直接量的問題
Javascript-Mozilla和IE中的一個(gè)函數(shù)直接量的問題...2007-01-01
js實(shí)現(xiàn)一個(gè)鏈接打開兩個(gè)鏈接地址的方法
這篇文章主要介紹了js實(shí)現(xiàn)一個(gè)鏈接打開兩個(gè)鏈接地址的方法,可實(shí)現(xiàn)連續(xù)打開兩個(gè)鏈接的功能,非常簡單實(shí)用的技巧,需要的朋友可以參考下2015-05-05
javascript的alert box在java中如何顯示多行
這篇文章主要介紹了javascript的alert box在java中如何顯示多行,需要的朋友可以參考下2014-05-05
Javascript 模擬mvc實(shí)現(xiàn)點(diǎn)餐程序案例詳解
這篇文章主要介紹了Javascript 模擬mvc實(shí)現(xiàn)點(diǎn)餐程序案例詳解,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12

