cesium-相机的使用

直接上代码

<template>
	<div id="cesiumContainer" style="height: 100vh;"></div>
	<div id="toolbar" style="position: fixed;top:20px;left:220px;">
		<el-breadcrumb>
			<el-breadcrumb-item>场景设置实例</el-breadcrumb-item>
			<el-breadcrumb-item>相机</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row class="mb-4" style="margin-top: 15px">
			<el-button type="primary" @click="flyInACity">飞行进城市</el-button>
			<el-button type="primary" @click="flyToSanDiego">飞行圣迭哥</el-button>
			<el-button type="primary" @click="flyToLocation">飞行到当前</el-button>
			<el-button type="primary" @click="flyToHeadingPitchRoll">飞行控制角度</el-button>
			<el-button type="primary" @click="flyToRectangle">飞行到正方形</el-button>
			<el-button type="primary" @click="viewRectangle">打开到正方形</el-button>
			<el-button type="primary" @click="setReferenceFrame">设置相机参考</el-button>
			<el-button type="primary" @click="setHeadingPitchRoll">设置相机角度</el-button>
			<el-button type="primary" @click="viewInICRF">设置地球自转</el-button>
			<el-button type="primary" @click="cameraEvents">相机移动事件</el-button>
		</el-row>
		<el-row class="mb-4" style="margin-top: 15px">
			<el-button type="primary" @click="cameraChanges">相机发生变化</el-button>
			<el-button type="primary" @click="flyOverLongitude">从洛杉矶经欧洲飞往东京</el-button>
			<el-button type="primary" @click="flyOverLongitudeWithPitch">夸张飞行时向下看</el-button>
		</el-row>
	</div>
	<div id="toolbar" style="position: fixed;top:150px;left:220px;color: #fff;">
		<div id="viewChanged">View Changed</div>
		<div id="cameraChanged">Camera Changed</div>
	</div>
</template>
<script>
import * as Cesium from "cesium";
import InitCesiumHide from "../js/InitCesiumHide.js";

export default {
	name: 'cesium24001',
	data() {
		return {
			viewer: undefined,
			scene: undefined
		}
	},
	mounted() {
		let initCesium = new InitCesiumHide('cesiumContainer')
		this.viewer = initCesium.initViewer({});
		//去除版权信息
		this.viewer._cesiumWidget._creditContainer.style.display = "none";
		this.scene = this.viewer.scene;
		let clock = this.scene.clock;

	},
	methods: {
		flyOverLongitudeWithPitch() {
			this.losAngelesToTokyo(true);
		},
		flyOverLongitude(adjustPitch) {
			this.losAngelesToTokyo();
		},
		losAngelesToTokyo(adjustPitch) {
			var camera = this.scene.camera;
			// 东京
			var tokyoOptions = {
				destination: Cesium.Cartesian3.fromDegrees(139.8148, 35.7142, 20000.0),
				orientation: {
					heading: Cesium.Math.toRadians(15.0),
					pitch: Cesium.Math.toRadians(-60),
					roll: 0.0
				},
				duration: 20,
				flyOverLongitude: Cesium.Math.toRadians(60.0)
			};
			// 洛杉矶
			var laOptions = {
				destination: Cesium.Cartesian3.fromDegrees(-117.729, 34.457, 10000.0),
				duration: 5,
				orientation: {
					heading: Cesium.Math.toRadians(-15.0),
					pitch: -Cesium.Math.PI_OVER_FOUR,
					roll: 0.0
				}
			};

			laOptions.complete = function () {
				setTimeout(function () {
					camera.flyTo(tokyoOptions);
				}, 1000);
			};

			if (adjustPitch) {
				tokyoOptions.pitchAdjustHeight = 1000;
				laOptions.pitchAdjustHeight = 1000;
			}

			camera.flyTo(laOptions);
		},
		cameraChanges() {
			var cameraChanged = document.getElementById('cameraChanged');
			var i = 0;
			//相机发生变化时触发
			let removeChanged = this.viewer.camera.changed.addEventListener(function (percentage) {
				++i;
				cameraChanged.innerText = 'Camera Changed: ' + i + ', ' + percentage.toFixed(6);
				cameraChanged.style.display = 'block';
			});
		},
		cameraEvents() {
			var viewChanged = document.getElementById('viewChanged');
			var camera = this.viewer.camera;
			camera.moveStart.addEventListener(function () {
				viewChanged.style.display = 'block';
			});
			camera.moveEnd.addEventListener(function () {
				viewChanged.style.display = 'none';
			});
		},
		icrf(scene, time) {
			if (this.scene.mode !== Cesium.SceneMode.SCENE3D) {
				return;
			}
			// 计算一个旋转矩阵，在给定时间将一个点或向量从国际天文参考坐标系  time计算旋转矩阵的时间
			var icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
			if (Cesium.defined(icrfToFixed)) {
				var camera = this.viewer.camera;
				var offset = Cesium.Cartesian3.clone(camera.position);
				var transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
				camera.lookAtTransform(transform, offset);
			}
		},
		viewInICRF() {
			this.viewer.camera.flyHome(0);

			this.viewer.clock.multiplier = 3 * 60 * 60;

			// 实时更新执行
			this.scene.postUpdate.addEventListener(this.icrf);
			this.scene.globe.enableLighting = true;
		},
		setHeadingPitchRoll() {
			var camera = this.viewer.camera;
			camera.setView({
				destination: Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),
				orientation: {
					heading: -Cesium.Math.PI_OVER_TWO,
					pitch: -Cesium.Math.PI_OVER_FOUR,
					roll: 0.0
				}
			});
		},
		setReferenceFrame() {
			var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
			var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

			// View in east-north-up frame
			var camera = this.viewer.camera;
			camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
			camera.lookAtTransform(transform, new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0));

			// Show reference frame.  Not required.
			this.scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
				modelMatrix: transform,
				length: 100000.0
			}));
		},
		viewRectangle() {
			var west = -77.0;
			var south = 38.0;
			var east = -72.0;
			var north = 42.0;

			var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);
			this.viewer.camera.setView({
				destination: rectangle
			});

			// Show the rectangle.  Not required; just for show.
			this.viewer.entities.add({
				rectangle: {
					coordinates: rectangle,
					fill: false,
					outline: true,
					outlineColor: Cesium.Color.WHITE
				}
			});
		},
		flyToRectangle() {
			var west = -90.0;
			var south = 38.0;
			var east = -87.0;
			var north = 40.0;
			var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

			this.viewer.camera.flyTo({
				destination: rectangle
			});

			// Show the rectangle.  Not required; just for show.
			this.viewer.entities.add({
				rectangle: {
					coordinates: rectangle,
					fill: false,
					outline: true,
					outlineColor: Cesium.Color.WHITE
				}
			});
		},
		flyToHeadingPitchRoll() {
			this.viewer.camera.flyTo({
				destination: Cesium.Cartesian3.fromDegrees(-122.22, 46.12, 5000.0),
				orientation: {
					heading: Cesium.Math.toRadians(20.0),
					pitch: Cesium.Math.toRadians(-35.0),
					roll: 0.0
				}
			});
		},
		flyToLocation() {
			// Create callback for browser's geolocation
			function fly(position) {
				console.log(position)
				this.viewer.camera.flyTo({
					destination: Cesium.Cartesian3.fromDegrees(position.coords.longitude, position.coords.latitude, 1000.0)
				});
			}

			// Ask browser for location, and fly there.
			navigator.geolocation.getCurrentPosition(fly);
		},
		flyToSanDiego() {
			this.viewer.camera.flyTo({
				destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
			});
		},
		flyInACity() {
			let camera = this.scene.camera;
			camera.flyTo({
				destination: Cesium.Cartesian3.fromDegrees(-73.98580932617188, 40.74843406689482, 363.34038727246224),
				complete: function () {
					setTimeout(function () {
						camera.flyTo({
							destination: Cesium.Cartesian3.fromDegrees(-73.98585975679403, 40.75759944127251, 186.50838555841779),
							orientation: {
								heading: Cesium.Math.toRadians(200.0),
								pitch: Cesium.Math.toRadians(-50.0)
							},
							easingFunction: Cesium.EasingFunction.LINEAR_NONE
						});
					}, 1000);
				}
			});
		}
	}
}
</script>
<style>
.el-breadcrumb__inner {
	color: #ffffff !important;
}
</style>

效果展示