以下是
Cesium飞行的方法和步骤：
1.引入
Cesium库和相关依赖库
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Cesium飞行漫游</title>
<script src="https://
cesium.com/downloads/
cesiumjs/releases/1.83/Build/
Cesium/
Cesium.js"></script>
<link rel="stylesheet" href="https://
cesium.com/downloads/
cesiumjs/releases/1.83/Build/
Cesium/Widgets/widgets.css">
<style>
#
cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="
cesiumContainer"></div>
<script src="https://
cesium.com/downloads/
cesiumjs/releases/1.83/Build/
Cesium/Widgets/widgets.js"></script>
</body>
</html>
```
2.创建
Cesium Viewer对象
```javascript
var viewer = new
Cesium.Viewer('
cesiumContainer');
```
3.创建
Cesium Camera对象
```javascript
var camera = viewer.camera;
```
4.设置相机位置和方向
```javascript
camera.setView({
destination:
Cesium.Cartesian3.fromDegrees(116.3,39.9, 10000000),
orientation: {
heading:
Cesium.Math.toRadians(0),
pitch:
Cesium.Math.toRadians(-90),
roll:
Cesium.Math.toRadians(0)
}
});
```
5.创建
Cesium Clock对象
```javascript
var clock = new
Cesium.Clock({
startTime:
Cesium.JulianDate.fromIso8601('2021-01-01T00:00:00Z'),
currentTime:
Cesium.JulianDate.fromIso8601('2021-01-01T00:00:00Z'),
stopTime:
Cesium.JulianDate.fromIso8601('2021-01-02T00:00:00Z'),
clockRange:
Cesium.ClockRange.LOOP_STOP,
clockStep:
Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
multiplier: 1000
});
viewer.clock = clock;
```
6.创建
Cesium Path对象
```javascript
var path = viewer.entities.add({
name: 'Path',
path: {
resolution: 1,
material: new
Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color:
Cesium.Color.YELLOW
}),
width: 10
}
});
```
7.设置
Cesium Path对象的位置和方向
```javascript
var positions = [
Cesium.Cartesian3.fromDegrees(116.3, 39.9, 10000000),
Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000),
Cesium.Cartesian3.fromDegrees(116.5, 39.9, 10000000),
Cesium.Cartesian3.fromDegrees(116.6, 39.9, 10000000)
];
path.position = new
Cesium.CallbackProperty(function(time, result) {
var position =
Cesium.Cartesian3.fromElements(0, 0, 0, result);
var timeInSeconds =
Cesium.JulianDate.secondsDifference(time, clock.startTime);
var index = Math.floor(timeInSeconds / 10) % positions.length;
var nextIndex = (index + 1) % positions.length;
var timeOffset = (timeInSeconds % 10) / 10;
Cesium.Cartesian3.lerp(positions[index], positions[nextIndex], timeOffset, position);
return position;
}, false);
path.orientation = new
Cesium.CallbackProperty(function(time, result) {
var timeInSeconds =
Cesium.JulianDate.secondsDifference(time, clock.startTime);
var index = Math.floor(timeInSeconds / 10) % positions.length;
var nextIndex = (index + 1) % positions.length;
var position =
Cesium.Cartesian3.fromElements(0, 0, 0, result);
Cesium.Cartesian3.subtract(positions[nextIndex], positions[index], position);
Cesium.Matrix4.fromTranslationQuaternionRotationScale(
Cesium.Cartesian3.ZERO,
Cesium.Quaternion.IDENTITY,
Cesium.Cartesian3.UNIT_SCALE,
result
);
return result;
}, false);
```
8.创建
Cesium Viewer的控制面板
```javascript
var toolbar = new
Cesium.Toolbar(viewer.container);
toolbar.addDefaultActions(
Cesium.viewer
CesiumNavigationMixin);
```
9.实现
Cesium Viewer的控制面板功能
```javascript
// 开始
飞行
viewer.clock.shouldAnimate = true;
// 暂停
飞行
viewer.clock.shouldAnimate = false;
// 向前
飞行
viewer.clock.multiplier *= 2;
// 向后
飞行
viewer.clock.multiplier /= 2;
// 设定路线
positions = [
Cesium.Cartesian3.fromDegrees(116.3, 39.9, 10000000),
Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000),
Cesium.Cartesian3.fromDegrees(116.5, 39.9, 10000000),
Cesium.Cartesian3.fromDegrees(116.6, 39.9, 10000000)
];
path.position.setCallback(function(time, result) {
var position =
Cesium.Cartesian3.fromElements(0, 0, 0, result);
var timeInSeconds =
Cesium.JulianDate.secondsDifference(time, clock.startTime);
var index = Math.floor(timeInSeconds / 10) % positions.length;
var nextIndex = (index + 1) % positions.length;
var timeOffset = (timeInSeconds % 10) / 10;
Cesium.Cartesian3.lerp(positions[index], positions[nextIndex], timeOffset, position);
return position;
}, false);
// 保存路线
var positionsJson = JSON.stringify(positions);
// 清空路线
positions = [];
path.position.setCallback(function(time, result) {
return
Cesium.Cartesian3.ZERO;
}, false);
// 退出
飞行
viewer.destroy();
```
本文详细介绍了如何使用Cesium库创建飞行动画效果，通过设置视点的位置和方向，实现从一个地理位置平滑地飞向另一个位置。内容包括Cesium的基本用法、视图控制、时间和动态更新等关键知识点。
最低0.47元/天 解锁文章
1574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
