cesium实现飞行漫游
代码
<template>
<div>
<div class="container">
<el-button
type="primary"
size='mini'
@click="goHome"
>回到首页</el-button>
<el-button
type="primary"
size='mini'
@click="drawLineRoad"
>绘制路线</el-button>
<el-button
type="primary"
size='mini'
@click="startFly"
>开始飞行</el-button>
<el-button
type="primary"
size='mini'
@click="stopFly"
>暂停飞行</el-button>
<el-button
type="primary"
size='mini'
@click="continueFly"
>继续飞行</el-button>
<el-button
type="primary"
size='mini'
@click="exitFly"
>退出飞行</el-button>
</div>
<div id="cesiumContainer">
</div>
</div>
</template>
<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
export default {
name: "CesiumViewer",
data() {
return {
TerrionUrl: '/3D-stk_terrain/rest/realspace/datas/info/data/path',
viewer: {
},
marks: [
{
lng: 108.9423344082, lat: 34.2609052589, height: 6000, flytime: 1 },
{
lng: 116.812948, lat: 36.550064, height: 1000, flytime: 1 },
{
lng: 116.812948, lat: 36.560064, height: 1000, flytime: 1 },
{
lng: 116.802948, lat: 36.560064, height: 1000, flytime: 1 },
{
lng: 116.802948, lat: 36.550064, height: 1000, flytime: 1 },
],
marksIndex: 1,
pitchValue: -20,
changeCameraTime: 5,
flytime: 5,
Exection: {
},
handler: {
},
activeShapePoints: [],
floatingPoint: undefined,
activeShape: undefined,
drawingMode: 'line',
Exection: {
},
}
},
mounted() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWI5NTY0Mi1iOGE3LTQ3ZTMtOGQ4OC03NThiN2VkZGI4NTYiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU1MDIyNTM5OX0.2Abc9p46PA9kJ3E-BaKMXiyb0rvgo7AFUR1nR78VF7c';
this.viewer = new Cesium.Viewer('cesiumContainer', {
animation: true,
timeline: false,
selectionIndicator: false,
infoBox: false,
terrainProvider: Cesium.createWorldTerrain()
});
this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
this.initFly();
},
methods: {
goHome() {
this.$router.push('/');
},
initFly() {
const {
viewer, marks } = this
const self = this;
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(marks[0].lng, marks[0].lat, marks[0].height),
duration: 1
});
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
},
flyExtent() {
const {
viewer, marks, pitchValue } = this
const self = this;
const pitch = Cesium.Math.toRadians(pitchValue);
this.setExtentTime(marks[this.marksIndex].flytime);
this.Exection = function TimeExecution() {
let preIndex = self.marksIndex - 1;
if (self.marksIndex == 0) {
preIndex = marks.length - 1;
}
let heading = self.bearing(marks[preIndex].lat, marks[preIndex].lng, marks[self.marksIndex].lat, marks[self.marksIndex].lng);
heading = Cesium.Math.toRadians(heading);
const delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
const originLat = self.marksIndex == 0 ? marks[marks.length - 1].lat : marks[self.marksIndex - 1].lat;
const originLng = self.marksIndex == 0 ? marks[marks.length - 1].lng : marks[self.marksIndex - 1].lng;
const endPosition = Cesium.Cartesian3.fromDegrees(
(originLng + (marks[self.marksIndex].lng - originLng) / marks[self.marksIndex].flytime * delTime),
(originLat + (marks[self.marksIndex].lat - originLat) / marks[self.marksIndex].flytime * delTime),
marks[self.marksIndex].height
);
viewer.scene.camera.setView({
destination: endPosition,
orientation: {
heading: heading,
pitch: pitch,
}
});
if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {
viewer.clock.onTick.removeEventListener(self.Exection);
self.changeCameraHeading();
}
};
viewer.clock.onTick.addEventListener(self.Exection);
},
changeCameraHeading() {
const {
viewer, marks, pitchValue, changeCameraTime } = this
const self = this;
let {
marksIndex } = this
let nextIndex = this.marksIndex + 1;
if (marksIndex == marks.length - 1) {
nextIndex = 0;
}
const heading = this.bearing(marks[marksIndex].lat, marks[marksIndex].lng, marks[nextIndex].lat, marks[nextIndex].lng);
const pitch = Cesium.Math.toRadians(pitchValue);
const angle = (heading - Cesium.Math.toDegrees(viewer.camera.heading)) / changeCameraTime;
this.setExtentTime(changeCameraTime);
const initialHeading = viewer.camera.heading;
this.Exection = function TimeExecution() {
const delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
const heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
viewer.scene.camera.setView({
orientation: {
heading: heading,
pitch: pitch,
}
});
if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {
viewer.clock.onTick.removeEventListener(self.Exection);
self.marksIndex = ++self.marksIndex >= marks.length ? 0 : self.marksIndex;
if (self.marksIndex != 0) {
self.flyExtent();
}
}
};
viewer.clock.onTick.addEventListener(self.Exection);
},
setExtentTime(time) {
const {
viewer } = this;
const startTime = Cesium.JulianDate.fromDate(new Date());
const stopTime = Cesium.JulianDate.addSeconds(startTime, time, new Cesium.JulianDate());
viewer.clock.startTime = startTime.clone();
viewer.clock.stopTime = stopTime.clone();
viewer.clock.currentTime = startTime.clone();
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
},
toRadians(degrees) {
return degrees * Math.PI / 180;
},
toDegrees(radians) {
return radians * 180 / Math.PI;
},
bearing(startLat, startLng, destLat, destLng) {
startLat = this.toRadians(startLat);
startLng = this.toRadians(startLng);
destLat = this.toRadians(destLat);
destLng = this.toRadians(destLng);
let y = Math.sin(destLng - startLng) * Math.cos(destLat);
let x = Math.cos(startLat) * Math.sin(destLat) - Math.sin(startLat) * Math.cos(destLat) * Math.cos(destLng - startLng);
let brng = Math.atan2(y, x);
let brngDgr = this.toDegrees(brng);
return (brngDgr + 360) % 360;
},
drawLineRoad() {
const {
handler, viewer, activeShapePoints } = this
const self = this;
handler.setInputAction(function (event) {
var earthPosition = viewer.scene.pickPosition(event.position);
if (Cesium.defined(earthPosition)) {
if (activeShapePoints.length === 0) {
self.floatingPoint = self.createPoint(earthPosition);
activeShapePoints.push(earthPosition);
var dynamicPositions = new Cesium.CallbackProperty(function () {
return activeShapePoints;
}, false);
self.activeShape = self.drawShape(dynamicPositions);
}
activeShapePoints.push(earthPosition);
self.createPoint(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (event) {
if (Cesium.defined(self.floatingPoint)) {
var newPosition = viewer.scene.pickPosition(event.endPosition);
if (Cesium.defined(newPosition)) {
self.floatingPoint.position.setValue(newPosition);
activeShapePoints.pop();
activeShapePoints.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function () {
self.terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},
terminateShape() {
const {
activeShapePoints, viewer, flytime } = this
activeShapePoints.pop();
if (activeShapePoints.length) {
this.marks = [];
for (const position of activeShapePoints) {
const latitude = this.toDegrees(Cesium.Cartographic.fromCartesian(position).latitude)
const longitude = this.toDegrees(Cesium.Cartographic.fromCartesian(position).longitude)
this.marks.push({
lat: latitude, lng: longitude, flytime, height: 1000 })
}
this.drawShape(activeShapePoints);
}
viewer.entities.remove(this.floatingPoint);
viewer.entities.remove(this.activeShape);
this.floatingPoint = undefined;
this.activeShape = undefined;
this.activeShapePoints = [];
},
createPoint(worldPosition) {
var point = this.viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.WHITE,
pixelSize: 1,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
});
return point;
},
drawShape(positionData) {
const {
drawingMode, viewer } = this
var shape;
if (drawingMode === 'line') {
shape = viewer.entities.add({
polyline: {
positions: positionData,
clampToGround: true,
width: 3
}
});
}
return shape;
},
startFly() {
const {
Exection } = this;
if (Object.keys(Exection).length > 0) {
this.exitFly();
}
this.flyExtent();
},
stopFly() {
this.viewer.clock.shouldAnimate = false;
},
continueFly() {
this.viewer.clock.shouldAnimate = true;
},
exitFly() {
const {
Exection, viewer, marks, pitchValue } = this
viewer.clock.onTick.removeEventListener(Exection);
const pitch = Cesium.Math.toRadians(pitchValue);
const marksIndex = 1;
let preIndex = marksIndex - 1;
let heading = this.bearing(marks[preIndex].lat, marks[preIndex].lng, marks[marksIndex].lat, marks[marksIndex].lng);
heading = Cesium.Math.toRadians(heading);
const endPosition = Cesium.Cartesian3.fromDegrees(
marks[0].lng,
marks[0].lat,
marks[0].height
);
viewer.scene.camera.setView({
destination: endPosition,
orientation: {
heading: heading,
pitch: pitch,
}
});
}
},
created() {
}
}
</script>
<style lang="scss" scoped >
.container {
position: absolute;
z-index: 9999;
}
</style>
