<template>
|
<div>
|
<Popup
|
ref="pop"
|
:title="form.title"
|
width="420px"
|
left="calc(100% - 450px)"
|
@close="close"
|
>
|
<el-container class="container" style="height: 100%">
|
<el-form class="form" ref="form" :model="form" label-width="100px">
|
<el-form-item label="路线名称">
|
<el-input v-model="tData.name"></el-input>
|
</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"
|
@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"
|
@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"
|
@input="getCameraProperty('pitch')"
|
controls-position="right"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="漫游模型">
|
<el-input v-model="url" class="input-with-btn">
|
<el-button
|
slot="append"
|
icon="el-icon-folder-opened"
|
@click="changeModel"
|
></el-button>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="是否显示模型">
|
<el-switch
|
v-model="tData.showModel"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
>
|
</el-switch>
|
</el-form-item>
|
<el-form-item label="是否显示路线">
|
<el-switch
|
v-model="tData.showLine"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
>
|
</el-switch>
|
</el-form-item>
|
<el-form-item label="速度(km/h)">
|
<el-input-number
|
v-model="tData.speed"
|
:placeholder="'50'"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="路线高程">
|
<el-input-number v-model="tData.lineHeight"></el-input-number>
|
</el-form-item>
|
<el-form-item label="是否循环漫游">
|
<el-switch
|
v-model="tData.isLoop"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
>
|
</el-switch>
|
</el-form-item>
|
|
<!-- <el-form-item label="节点数据"> -->
|
<el-table
|
ref="pathNode"
|
style="width: 100%"
|
border
|
max-height="250"
|
highlight-current-row
|
:data="patNodes"
|
>
|
<el-table-column label="经度">
|
<template slot-scope="scope">
|
<el-input size="mini" v-model="scope.row.x"> </el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="维度">
|
<template slot-scope="scope">
|
<el-input size="mini" v-model="scope.row.y"> </el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="高度">
|
<template slot-scope="scope">
|
<el-input
|
size="mini"
|
v-model="scope.row.z"
|
@change="changePath"
|
>
|
</el-input> </template
|
></el-table-column>
|
</el-table>
|
<!-- </el-form-item> -->
|
</el-form>
|
</el-container>
|
</Popup>
|
<ModelLibrary ref="ModelLibrary" />
|
</div>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup.vue";
|
import Bus from "@tools/Bus";
|
import ModelLibrary from "@tools/ModelLibrary";
|
export default {
|
name: "PathAnimationEdit",
|
components: { Popup, Bus, ModelLibrary },
|
data() {
|
return {
|
form: {
|
title: "路线编辑",
|
},
|
url: window.SmartEarthRootUrl + "Workers/Model/xiaoche.gltf",
|
isFly: false,
|
notGod: false,
|
tData: {},
|
viewModel: "0",
|
cameraHeight: "50",
|
cameraDistance: "10",
|
pitch: "-20",
|
lineitem: {},
|
patNodes: [],
|
};
|
},
|
methods: {
|
// 关闭弹窗,初始化所有数据
|
close() {
|
window.Viewer.entities.remove(this.lineitem);
|
Object.assign(this.$data, this.$options.data());
|
Bus.$emit("exit");
|
},
|
// 打开弹窗
|
open() {
|
this.$refs.pop.open();
|
this.loadData();
|
},
|
changePath() {
|
debugger
|
let geometry = [];
|
this.patNodes.forEach((element) => {
|
geometry.push([parseFloat( element.x), parseFloat( element.y), parseFloat( element.z)]);
|
});
|
if(window.pathTemLine)
|
window.pathTemLine.deleteObject();
|
window.pathTemLine = sgworld.Creator.createPolyline(
|
geometry,
|
// "#ffff00",
|
Cesium.Color.fromRandom(),
|
1,
|
0,
|
"线"
|
);
|
this.lineitem = pathTemLine.item;
|
this.lineitem.polyline.clampToGround.setValue(false)
|
sgworld.Navigate.flyToObj(this.lineitem);
|
this.tData.geojson.geometry.coordinates = geometry
|
},
|
// 初始化数据
|
loadData() {
|
let geometry = this.tData.geojson.geometry.coordinates;
|
if (this.patNodes.length == 0) {
|
geometry.forEach((element) => {
|
this.patNodes.push({
|
x: element[0],
|
y: element[1],
|
z: element[2] || 0,
|
});
|
});
|
}
|
|
this.changePath();
|
},
|
// 控制视角模式变化
|
viewmodeChange(value) {
|
if (value === "0") {
|
this.isFly = false;
|
this.notGod = false;
|
} else if (value === "1") {
|
this.isFly = true;
|
this.notGod = true;
|
} else if (value === "2") {
|
this.isFly = true;
|
this.notGod = false;
|
}
|
},
|
// 选择模型
|
changeModel() {
|
this.$refs.ModelLibrary.open(true);
|
},
|
// 获取当前视口属性
|
getCameraProperty(type) {
|
switch (type) {
|
case "cameraDistance":
|
this.tData &&
|
(this.tData.cameraDistance = parseFloat(this.cameraDistance));
|
break;
|
case "cameraHeight":
|
this.tData &&
|
(this.tData.cameraHeight = parseFloat(this.cameraHeight));
|
break;
|
case "pitch":
|
this.tData && (this.tData.pitch = parseFloat(this.pitch));
|
break;
|
}
|
},
|
},
|
mounted() {
|
Bus.$off("getModel");
|
Bus.$on("getModel", (url) => {
|
this.tData && (this.tData.url = url);
|
this.url = url;
|
});
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
@input_width: 280px;
|
.container {
|
margin: 5px;
|
height: 400px;
|
width: 400px;
|
overflow: scroll;
|
overflow-x: hidden;
|
|
.form {
|
width: 100%;
|
|
.el-form-item {
|
margin-bottom: 5px;
|
.el-input {
|
width: @input_width;
|
}
|
.el-input-number {
|
width: @input_width;
|
/deep/ .el-input-number__increase,
|
/deep/.el-input-number__decrease {
|
width: 56px;
|
}
|
}
|
/deep/ .el-form-item__label {
|
color: white;
|
font-size: 14px;
|
}
|
|
.el-select {
|
width: @input_width;
|
}
|
// /deep/ .el-input__inner{
|
// width: 140px;
|
// display: inline-block;
|
// }
|
}
|
}
|
&::-webkit-scrollbar {
|
display: none;
|
/*滚动条整体样式*/
|
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);
|
// }
|
}
|
</style>
|
