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();
}
相關方法
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]);
}
}