Cesium學習筆記（八）：Demo學習(差值器)
阿新 • • 發佈：2019-01-03
這個Demo是官方Demo中的Interpolation（差值器），不過我更喜歡叫它轉圈的飛機o(￣ε￣*)
這個Demo看上去就是一個飛機在繞著一個圈在飛，你可以通過切換差值器看效果
話說這個Demo困擾了我好久，我一直以為這個飛機飛行是自己畫出來的，因為上一個就是嘛，然後一直找啊找，就是找不到
最後才發現其實它只是在幾個時間段填了幾個sample，其他的都是靠差值器自動生成的。。。
一起來看一下程式碼吧
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset js
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProviderViewModels: [], //禁用地形變化
infoBox: false,
selectionIndicator: false
});
// 開啟自然光照
viewer.scene.globe.enableLighting = true;
// 開啟地形變化
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestWaterMask: true,
requestVertexNormals: true
});
//啟用深度測試，所以地形後面的東西會消失
viewer.scene.globe.depthTestAgainstTerrain = true;
//生成一個隨機數
Cesium.Math.setRandomNumberSeed(3);
//設定了模擬時間的邊界
var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
//確保檢視器處於預期的時間
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //迴圈結束時
//時間變化來控制速度
viewer.clock.multiplier = 10;
//給時間線設定邊界
viewer.timeline.zoomTo(start, stop);
//多邊形和點（高度隨機）
function computeCirclularFlight(lon, lat, radius) {
var property = new Cesium.SampledPositionProperty();
//i為角度(多邊形的偏離角度)
for (var i = 0; i <= 360; i += 45) {
var radians = Cesium.Math.toRadians(i);
var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
//計算位置
var position = Cesium.Cartesian3.fromDegrees(
lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), Cesium.Math.nextRandomNumber() * 500 + 1750);
//添加了8個sample
property.addSample(time, position);
//那幾個黃圈圈
viewer.entities.add({
position: position,
point: {
pixelSize: 8,
color: Cesium.Color.TRANSPARENT,
outlineColor: Cesium.Color.YELLOW,
outlineWidth: 3
}
});
}
return property;
}
//計算實體位置屬性
var position = computeCirclularFlight(0, 180, 0.03);
//建立實體
var entity = viewer.entities.add({
// 將實體availability設定為與模擬時間相同的時間間隔。
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
//這是一個4x4的矩陣，包含了方位方向等屬性
position: position,
//基於位置移動自動計算方向.
orientation: new Cesium.VelocityOrientationProperty(position),
//載入飛機模型
model: {
uri: '../Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
minimumPixelSize: 64
},
//路徑
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.PINK
}),
width: 10
}
});
//頭頂視角
Sandcastle.addDefaultToolbarButton('View Top Down', function () {
viewer.trackedEntity = undefined;
viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)));
});
//側面視角
Sandcastle.addToolbarButton('View Side', function () {
viewer.trackedEntity = undefined;
viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(-90), Cesium.Math.toRadians(-15), 7500));
});
//追隨視角
Sandcastle.addToolbarButton('View Aircraft', function () {
viewer.trackedEntity = entity;
});
//切換差值器
Sandcastle.addToolbarMenu([{
text: 'Interpolation: Linear Approximation',
onselect: function () {
entity.position.setInterpolationOptions({
interpolationDegree: 1,
interpolationAlgorithm: Cesium.LinearApproximation
});
}
}, {
text: 'Interpolation: Lagrange Polynomial Approximation',
onselect: function () {
entity.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
}
}, {
text: 'Interpolation: Hermite Polynomial Approximation',
onselect: function () {
entity.position.setInterpolationOptions({
interpolationDegree: 2,
interpolationAlgorithm: Cesium.HermitePolynomialApproximation
});
}
}], 'interpolationMenu');看完了這個例子，讓我們來趁熱打鐵，寫個小例子玩玩
一個環赤道的衛星，然而沒有衛星就拿飛機吧。。。
var viewer = new Cesium.Viewer("cesiumContainer");
//設定了模擬時間的邊界
var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
//確保檢視器處於預期的時間
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //迴圈結束時
//時間變化來控制速度
viewer.clock.multiplier = 10;
//給時間線設定邊界
viewer.timeline.zoomTo(start, stop);
function computeCirclularFlight(lon, lat) {
var property = new Cesium.SampledPositionProperty();
//i的增量不能太大，不然差值器無法把圖形如願畫出來
for (var i = 0; i <= 360; i+=30) {
var radians = Cesium.Math.toRadians(i);
var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
//繞赤道飛
var position = Cesium.Cartesian3.fromDegrees(lon+i, lat, 9999999);
//新增sample
property.addSample(time, position);
}
return property;
}
//計算實體位置屬性
var satellitePosition = computeCirclularFlight(0, 0);
//建立實體
var entity = viewer.entities.add({
// 將實體availability設定為與模擬時間相同的時間間隔。
availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start : start,
stop : stop
})]),
position : satellitePosition,
//基於位置移動自動計算方向.
orientation : new Cesium.VelocityOrientationProperty(satellitePosition),
//載入飛機模型
model : {
uri : '../Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
minimumPixelSize : 64
},
//路徑
path : {
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.1,
color : Cesium.Color.PINK
}),
width : 10
}
});
//差值器
entity.position.setInterpolationOptions({
interpolationDegree : 5,
interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
});