这是官方的教程Demo，名字叫Use HeadingPitchRoll，顾名思义，就是教你用HeadingPitchRoll这个方法的，下面我们就来看一看这个Demo
首先先说一下，这个Demo是沙盒里面的，所以如果你想在本地运行的话需要改一下html
这里是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>
<script src="../Apps/Sandcastle/Sandcastle-header.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">
<table class="infoPanel">
<tbody>
<tr>
<td>Click on the 3D window then use the keyboard to change settings.
</td>
</tr>
<tr>
<td>Heading:
<span id="heading"></span>°
</td>
</tr>
<tr>
<td>← to left/→ to right
</td>
</tr>
<tr>
<td>Pitch:
<span id="pitch"></span>°
</td>
</tr>
<tr>
<td>↑ to up/↓ to down
</td>
</tr>
<tr>
<td>roll:
<span id="roll"></span>°
</td>
</tr>
<tr>
<td>← + ⇧ left/→ + ⇧ right
</td>
</tr>
<tr>
<td>Speed:
<span id="speed"></span>m/s
</td>
</tr>
<tr>
<td>↑ + ⇧ to speed up/↓ + ⇧ to speed down
</td>
</tr>
<tr>
<td>following aircraft
<input id="fromBehind" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
<script src="你的js文件"></script>
</body>
</html>
这是js代码
var canvas = viewer.canvas;
canvas.setAttribute(
'tabindex',
'0');
canvas.addEventListener(
'click',
function() {
canvas.focus();
});
canvas.focus();
var pathPosition =
new Cesium.SampledPositionProperty();
var entityPath = viewer.entities.add({
position : pathPosition,
name :
'path',
path : {
show :
true,
leadTime :
0,
trailTime :
60,
width :
10,
resolution :
1,
material :
new Cesium.PolylineGlowMaterialProperty({
glowPower :
0.3,
color : Cesium.Color.PALEGOLDENROD
})
}
});
var camera = viewer.camera;
var controller = scene.screenSpaceCameraController;
var r =
0;
var center =
new Cesium.Cartesian3();
var hpRoll =
new Cesium.HeadingPitchRoll();
var hpRange =
new Cesium.HeadingPitchRange();
var speed =
10;
var deltaRadians = Cesium.Math.toRadians(
3.0);
var position = Cesium.Cartesian3.fromDegrees(-
123.0744619,
44.0503706,
5000.0);
var speedVector =
new Cesium.Cartesian3();
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
'north',
'west');
var planePrimitive = scene.primitives.add(Cesium.Model.fromGltf({
url :
'../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform),
minimumPixelSize :
128
}));
planePrimitive.readyPromise.then(
function(model) {
model.activeAnimations.addAll({
speedup :
0.5,
loop : Cesium.ModelAnimationLoop.REPEAT
});
r =
2.0 *
Math.max(model.boundingSphere.radius, camera.frustum.near);
controller.minimumZoomDistance = r *
0.5;
Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
var heading = Cesium.Math.toRadians(
230.0);
var pitch = Cesium.Math.toRadians(-
20.0);
hpRange.heading = heading;
hpRange.pitch = pitch;
hpRange.range = r *
50.0;
camera.lookAt(center, hpRange);
});
document.addEventListener(
'keydown',
function(e) {
switch (e.keyCode) {
case 40:
if (e.shiftKey) {
speed =
Math.max(--speed,
1);
}
else {
hpRoll.pitch -= deltaRadians;
if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
hpRoll.pitch += Cesium.Math.TWO_PI;
}
}
break;
case 38:
if (e.shiftKey) {
speed =
Math.min(++speed,
100);
}
else {
hpRoll.pitch += deltaRadians;
if (hpRoll.pitch > Cesium.Math.TWO_PI) {
hpRoll.pitch -= Cesium.Math.TWO_PI;
}
}
break;
case 39:
if (e.shiftKey) {
hpRoll.roll += deltaRadians;
if (hpRoll.roll > Cesium.Math.TWO_PI) {
hpRoll.roll -= Cesium.Math.TWO_PI;
}
}
else {
hpRoll.heading += deltaRadians;
if (hpRoll.heading > Cesium.Math.TWO_PI) {
hpRoll.heading -= Cesium.Math.TWO_PI;
}
}
break;
case 37:
if (e.shiftKey) {
hpRoll.roll -= deltaRadians;
if (hpRoll.roll <
0.0) {
hpRoll.roll += Cesium.Math.TWO_PI;
}
}
else {
hpRoll.heading -= deltaRadians;
if (hpRoll.heading <
0.0) {
hpRoll.heading += Cesium.Math.TWO_PI;
}
}
break;
default:
}
});
var headingSpan = document.getElementById(
'heading');
var pitchSpan = document.getElementById(
'pitch');
var rollSpan = document.getElementById(
'roll');
var speedSpan = document.getElementById(
'speed');
var fromBehind = document.getElementById(
'fromBehind');
viewer.scene.preRender.addEventListener(
function(scene, time) {
headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(
1);
pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(
1);
rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(
1);
speedSpan.innerHTML = speed.toFixed(
1);
speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, speed /
10, speedVector);
position = Cesium.Matrix4.multiplyByPoint(planePrimitive.modelMatrix, speedVector, position);
pathPosition.addSample(Cesium.JulianDate.now(), position);
Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform, planePrimitive.modelMatrix);
if (fromBehind.checked) {
Cesium.Matrix4.multiplyByPoint(planePrimitive.modelMatrix, planePrimitive.boundingSphere.center, center);
hpRange.heading = hpRoll.heading;
hpRange.pitch = hpRoll.pitch;
camera.lookAt(center, hpRange);
}
});
如上就是这个Demo的源码了，具体运行我就不展示了（csdn上传不了这么大的gif），还是很有趣的
我觉得注释已经很详细了，就不多说了，不清楚或者发现错误的请留言，大家一起学习
