cesium飞行方法
时间: 2023-11-28 21:44:45 浏览: 128
以下是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.viewerCesiumNavigationMixin);
```
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();
```
阅读全文