这个Demo是官方Demo中的Interpolation(差值器),不过我更喜欢叫它转圈的飞机o( ̄ε ̄*)
这个Demo看上去就是一个飞机在绕着一个圈在飞,你可以通过切换差值器看效果
话说这个Demo困扰了我好久,我一直以为这个飞机飞行是自己画出来的,因为上一个就是嘛,然后一直找啊找,就是找不到
最后才发现其实它只是在几个时间段填了几个sample,其他的都是靠差值器自动生成的。。。
一起来看一下代码吧
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="Sandcastle/templates/bucket.css">
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
</style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="toolbar">
<div id="interpolationMenu"></div>
</div>
<script src="你的js路径"></script>
</body>
</html>
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();
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);
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: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
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();
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);
property.addSample(time, position);
}
return property;
}
var satellitePosition = computeCirclularFlight(0, 0);
var entity = viewer.entities.add({
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
});