<template>
|
<div class="statusBar" v-if="show">
|
<el-row>
|
<el-col :span="4">@SmartEarthVersion : {{ SmartEarthVersion }}</el-col>
|
<el-col :span="5"
|
>鼠标位置: {{ mouse.lon }}° {{ mouse.lat }}° {{ mouse.height }}m</el-col
|
>
|
<el-col :span="6">
|
航向角:<input
|
class="angleInput"
|
type="text"
|
v-model="heading"
|
@change="cameraChange"
|
/>
|
° 俯仰角:<input
|
class="angleInput"
|
type="text"
|
v-model="pitch"
|
@change="cameraChange"
|
/>° 翻滚角:<input
|
class="angleInput"
|
type="text"
|
v-model="roll"
|
@change="cameraChange"
|
/>°
|
</el-col>
|
<el-col :span="7">
|
经度:<input type="text" v-model="longitude" @change="cameraChange" />
|
纬度:<input type="text" v-model="latitude" @change="cameraChange" />
|
视角高度:<input
|
type="text"
|
v-model="viewHeight"
|
@change="cameraChange"
|
/>米
|
</el-col>
|
<el-col :span="2">帧率: {{ fps }}</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "statusBar",
|
data() {
|
return {
|
SmartEarthVersion: "",
|
viewHeight: "0",
|
longitude: "0",
|
latitude: "0",
|
heading: 0,
|
pitch: 0,
|
roll: 0,
|
fps: "",
|
mouse: {
|
lon: 0,
|
lat: 0,
|
height: 0,
|
},
|
};
|
},
|
props: {
|
show: {
|
type: Boolean,
|
default: true,
|
},
|
},
|
mounted() {},
|
methods: {
|
init() {
|
let Viewer = window.Viewer;
|
this.SmartEarthVersion = window.SmartEarth.VERSION;
|
|
let handler3D = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
handler3D.setInputAction((movement) => {
|
let position = Viewer.scene.pickPosition(movement.endPosition);
|
if (!position) return;
|
let degrees = sgworld.Core.toDegrees(position);
|
|
let cameraPosition = sgworld.Navigate.getDegrees();
|
if (cameraPosition) {
|
this.viewHeight = cameraPosition.height.toFixed(2);
|
this.longitude = cameraPosition.lon.toFixed(6);
|
this.latitude = cameraPosition.lat.toFixed(6);
|
this.heading = Cesium.Math.toDegrees(Viewer.camera.heading).toFixed(
|
1
|
);
|
this.pitch = Cesium.Math.toDegrees(Viewer.camera.pitch).toFixed(1);
|
this.roll = Cesium.Math.toDegrees(Viewer.camera.roll).toFixed(1);
|
}
|
|
this.mouse.height = degrees.height.toFixed(2);
|
this.mouse.lon = degrees.lon.toFixed(6);
|
this.mouse.lat = degrees.lat.toFixed(6);
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
Viewer.clock.onTick.addEventListener(() => {
|
this.fps =
|
Viewer.scene._performanceDisplay &&
|
Viewer.scene._performanceDisplay._fpsText.data;
|
});
|
},
|
cameraChange() {
|
window.Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
this.longitude,
|
this.latitude,
|
this.viewHeight
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(this.heading),
|
pitch: Cesium.Math.toRadians(this.pitch),
|
roll: Cesium.Math.toRadians(this.roll),
|
},
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less">
|
.statusBar {
|
color: #fff;
|
height: 20px;
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
z-index: 9999;
|
background-color: #49474770;
|
user-select: text;
|
|
.el-row {
|
position: relative;
|
font-size: 14px;
|
line-height: 20px;
|
}
|
input {
|
width: 80px;
|
border: none;
|
text-align: center;
|
background-color: rgba(128, 128, 128, 0.4);
|
color: white;
|
margin-right: 5px;
|
}
|
|
.angleInput{
|
width: 60px;
|
}
|
}
|
</style>
|
