<template>
|
<Popup
|
ref="pop"
|
:title="form.title"
|
maxHeight="500px"
|
left="calc(100% - 450px)"
|
@close="close"
|
>
|
<div class="btnContainer">
|
<el-button
|
type="primary"
|
align="center"
|
v-if="!isstart"
|
@click="stop(false)"
|
>继续漫游</el-button
|
>
|
<el-button
|
type="primary"
|
align="center"
|
v-if="isstart"
|
@click="stop(true)"
|
>暂停漫游</el-button
|
>
|
<el-button type="primary" align="center" @click="quitRoam"
|
>退出漫游</el-button
|
>
|
</div>
|
<el-container class="container">
|
<el-form
|
class="form"
|
ref="form"
|
:model="form"
|
label-width="100px"
|
label-position="left"
|
>
|
<el-form-item label="路线名称">
|
<div>{{ tData.name }}</div>
|
</el-form-item>
|
<el-form-item label="视角模式">
|
<el-select v-model="viewModel" @change="viewmodeChange">
|
<el-option label="跟随模型" value="0"></el-option>
|
<el-option label="第一人称视角" value="1"></el-option>
|
<el-option label="上帝视角" value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="飞行高度" v-if="isFly">
|
<el-input-number
|
v-model="cameraHeight"
|
style="width: 140px"
|
@input="getCameraProperty('cameraHeight')"
|
controls-position="right"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="飞行距离" v-if="isFly && notGod">
|
<el-input-number
|
v-model="cameraDistance"
|
style="width: 140px"
|
@input="getCameraProperty('cameraDistance')"
|
controls-position="right"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="俯仰角" v-if="isFly && notGod">
|
<el-input-number
|
v-model="pitch"
|
style="width: 140px"
|
@input="getCameraProperty('pitch')"
|
controls-position="right"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="总长度">
|
<div>{{ getDistance(tData.distance) }}</div>
|
</el-form-item>
|
<el-form-item label="已漫游长度">
|
<div>{{ distanceTraveled }}</div>
|
</el-form-item>
|
<el-form-item label="总时长">
|
<div>{{ getTime(tData.Totaltime) }}</div>
|
</el-form-item>
|
<el-form-item label="已漫游时间">
|
<div>{{ timeTraveled }}</div>
|
</el-form-item>
|
<el-form-item label="是否显示模型">
|
<el-switch
|
v-model="tData.showModel"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
@change="showModel"
|
>
|
</el-switch>
|
</el-form-item>
|
<el-form-item label="是否显示路线">
|
<el-switch
|
v-model="tData.showLine"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
@change="showLine"
|
>
|
</el-switch>
|
</el-form-item>
|
<el-form-item label="速度">
|
<div>{{ speed }}</div>
|
</el-form-item>
|
<el-form-item label="播放倍速">
|
<el-slider
|
@input="setMultiplier"
|
:min="0.1"
|
:max="10"
|
:step="0.1"
|
v-model="multiplier"
|
></el-slider>
|
</el-form-item>
|
<el-form-item label="经度">
|
<div>{{ longitude }}</div>
|
</el-form-item>
|
<el-form-item label="纬度">
|
<div>{{ latitude }}</div>
|
</el-form-item>
|
<el-form-item label="漫游高程">
|
<div>{{ getDistance(height) }}</div>
|
</el-form-item>
|
<el-form-item label="地面高程">
|
<div>{{ getDistance(globeHeight) }}</div>
|
</el-form-item>
|
</el-form>
|
</el-container>
|
<el-progress
|
:text-inside="true"
|
:stroke-width="26"
|
:percentage="ratio"
|
></el-progress>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup.vue";
|
import Bus from "@tools/Bus";
|
let fly;
|
export default {
|
name: "PathAnimationSec",
|
components: { Popup, Bus },
|
data() {
|
return {
|
form: {
|
//窗体数据
|
title: "漫游路线",
|
},
|
isFly: false,
|
notGod: false,
|
isstart: true, //是否开始漫游
|
tData: {}, //当前数据
|
viewModel: "0", //视角模式
|
distanceTraveled: "0",
|
timeTraveled: "0",
|
longitude: "0",
|
latitude: "0",
|
speed: "0",
|
height: "0",
|
globeHeight: "0",
|
ratio: 1,
|
cameraHeight: "50",
|
cameraDistance: "10",
|
pitch: "-20",
|
multiplier: 1,
|
};
|
},
|
methods: {
|
//退出漫游
|
quitRoam() {
|
this.close();
|
this.$refs.pop.close();
|
},
|
// 关闭弹窗
|
close() {
|
fly && fly.exit && fly.exit();
|
Object.assign(this.$data, this.$options.data());
|
Bus.$emit("exit");
|
},
|
// 打开弹窗
|
open() {
|
this.$refs.pop.open();
|
this.loadData();
|
},
|
// 暂停漫游
|
stop(value) {
|
this.isstart = !this.isstart;
|
fly && fly.isPause(value);
|
},
|
// 控制视角模式变化
|
viewmodeChange(value) {
|
if (value === "0") {
|
fly && fly.changeFlyMode(0);
|
this.tData && (this.tData.mode = 0);
|
this.isFly = false;
|
this.notGod = false;
|
} else if (value === "1") {
|
fly && fly.changeFlyMode(1);
|
this.tData && (this.tData.mode = 1);
|
this.isFly = true;
|
this.notGod = true;
|
} else if (value === "2") {
|
fly && fly.changeFlyMode(2);
|
this.tData && (this.tData.mode = 2);
|
this.isFly = true;
|
this.notGod = false;
|
}
|
this.viewModel = value;
|
},
|
// 加载路径动画数据
|
loadData() {
|
let url = window.SmartEarthRootUrl + "Workers/Model/xiaoche.glb";
|
fly = sgworld.Creator.createDynamicObject(
|
this.tData,
|
this.tData.url || url,
|
this.shuj
|
);
|
this.tData.showModel && this.showModel(this.tData.showModel);
|
this.tData.showLine && this.showLine(this.tData.showLine);
|
this.tData.cameraHeight && (this.cameraHeight = this.tData.cameraHeight);
|
this.tData.cameraDistance &&
|
(this.cameraDistance = this.tData.cameraDistance);
|
this.tData.pitch && (this.pitch = this.tData.pitch);
|
this.tData.mode && this.viewmodeChange(this.tData.mode);
|
},
|
// 是否展示模型
|
showModel(isshow) {
|
fly && fly.showModel(isshow);
|
},
|
// 是否展示模型
|
setMultiplier(multiplier) {
|
fly && fly.setMultiplier(multiplier);
|
},
|
//是否展示线路
|
showLine(isshow) {
|
fly && fly.showLine(isshow);
|
},
|
// 获取时间
|
getTime(data) {
|
let time;
|
if (data < 60) {
|
time = data + "秒";
|
} else if (data >= 60 && data < 3600) {
|
time = Math.floor(data / 60) + "分" + (data % 60) + "秒";
|
} else {
|
let h = Math.floor(data / 3600);
|
data -= h * 3600;
|
let m = Math.floor(data / 60);
|
data -= m * 60;
|
time = h + "小时" + m + "分" + data + "秒";
|
}
|
return time;
|
},
|
// 获取距离
|
getDistance(data) {
|
let dis;
|
data = parseFloat(data).toFixed(2);
|
data = parseFloat(data);
|
if (data >= 1000) {
|
dis = (data / 1000).toFixed(3) + "千米";
|
} else {
|
dis = data + "米";
|
}
|
return dis;
|
},
|
// 获取视角属性
|
getCameraProperty(type) {
|
switch (type) {
|
case "cameraDistance":
|
fly && fly.setFlyDistance(parseFloat(this.cameraDistance));
|
break;
|
case "cameraHeight":
|
fly && fly.setFlyHeight(parseFloat(this.cameraHeight));
|
break;
|
case "pitch":
|
fly && fly.setFlyPitch(parseFloat(this.pitch));
|
break;
|
}
|
},
|
// 刷新路径动画移动中数据
|
shuj(data) {
|
if (data.distanceTraveled) {
|
//已漫游长度
|
this.distanceTraveled = this.getDistance(data.distanceTraveled);
|
}
|
if (data.time) {
|
//已漫游时间
|
this.timeTraveled = this.getTime(parseInt(data.time));
|
}
|
if (data.longitude) {
|
//经度
|
this.longitude = data.longitude.toFixed(7) + "°";
|
}
|
if (data.latitude) {
|
//纬度
|
this.latitude = data.latitude.toFixed(7) + "°";
|
}
|
if (data.speed) {
|
//速度
|
this.speed = data.speed;
|
}
|
if (data.height) {
|
//高程
|
this.height = this.getDistance(data.height);
|
}
|
if (data.globeHeight) {
|
//高程
|
this.globeHeight = this.getDistance(data.globeHeight);
|
}
|
if (data.ratio) {
|
//进度
|
this.ratio = parseInt(data.ratio * 100);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.container {
|
margin: 5px;
|
height: 400px;
|
width: 300px;
|
overflow: scroll;
|
overflow-x: hidden;
|
.form {
|
width: 100%;
|
.el-form-item {
|
margin-bottom: 5px;
|
|
/deep/ .el-form-item__label {
|
color: white;
|
font-size: 14px;
|
}
|
.el-select {
|
width: 140px;
|
}
|
// /deep/ .el-input__inner{
|
// width: 140px;
|
// display: inline-block;
|
// }
|
}
|
.el-slider {
|
width: 150px;
|
}
|
}
|
|
&::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 8px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: #797979;
|
scrollbar-arrow-color: red;
|
}
|
|
&::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
}
|
|
.btnContainer {
|
margin: 5px 15px;
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
