Cesium開發實踐（二）模擬多架飛機飛行
阿新 • • 發佈：2019-02-04
今天在看官網Demo的時候，看到一個關於時間軸的例子，正巧之前一直想做一個飛機飛行的例子，正愁不知道弄，現在有思路，趕緊乘熱打鐵。
先看下實現的效果圖:
雖然有點瑕疵，但是效果還是可以的。核心就是利用之前說的時間軸來實現，理解掌握這個後就好辦了。
初始化
<body>
<div id="cesiumDemo"></div>
<script type="text/javascript">
let view = new Cesium.Viewer('cesiumDemo', {
baseLayerPicker: false,
imageryProvider: new Cesium 因為沒有真實資料，就用假的來代替了，座標點是從百度地圖上拾取的。
設定時間軸時間
// 起始時間
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。。