<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
:shadow="!isEdit"
|
:left="left"
|
width="390px"
|
showBtn="true"
|
@yes="addData"
|
@cancel="close(false)"
|
>
|
<el-form ref="form" :model="data" :rules="rules" label-width="90px">
|
<el-form-item label="名称:">
|
<el-input v-model="data.name"></el-input>
|
</el-form-item>
|
<el-form-item label="地址:" prop="url">
|
<el-input
|
v-model="data.url"
|
:title="data.url"
|
@change="edit('url')"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="角度:">
|
<el-input-number
|
v-model="data.heading"
|
:step="0.1"
|
@change="edit('heading')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="长度:">
|
<el-input-number
|
v-model="data.width"
|
:step="0.1"
|
@change="edit('width')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="宽度:">
|
<el-input-number
|
v-model="data.height"
|
:step="0.1"
|
@change="edit('height')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="坐标:">
|
<el-button type="primary" @click="pick">拾取坐标</el-button>
|
</el-form-item>
|
<el-form-item label="经度:">
|
<el-input-number
|
v-model="data.position.lon"
|
:min="-180"
|
:max="180"
|
:step="0.00001"
|
@change="edit('position')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="纬度:">
|
<el-input-number
|
v-model="data.position.lat"
|
:min="-90"
|
:max="90"
|
:step="0.00001"
|
@change="edit('position')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="高度:">
|
<el-input-number
|
v-model="data.position.height"
|
:step="0.1"
|
@change="edit('position')"
|
></el-input-number>
|
</el-form-item>
|
</el-form>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
let video, handler;
|
export default {
|
name: "Video",
|
components: {
|
Popup,
|
},
|
data() {
|
return {
|
title: "视频投影编辑",
|
left: "calc(100% - 400px)",
|
type: "",
|
isEdit: false,
|
defaultEditData: undefined,
|
data: {
|
name: "",
|
url: "",
|
position: {
|
lon: 110,
|
lat: 32,
|
height: 0,
|
},
|
heading: 0,
|
width: 10,
|
height: 5,
|
},
|
// 表单验证规则
|
rules: {
|
url: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
|
},
|
};
|
},
|
mounted() {},
|
methods: {
|
// 关闭弹窗
|
close(isCloseBtn, isSave) {
|
if (!isSave && this.defaultEditData && video) {
|
this.restore();
|
this.defaultEditData = undefined;
|
}
|
video = undefined;
|
|
handler && handler.destroy();
|
handler = undefined;
|
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
},
|
// 打开弹窗
|
open(type, editData) {
|
this.close(true);
|
|
this.type = type;
|
this.isEdit = !!editData;
|
if (this.isEdit) {
|
// 获取图层
|
video = sgworld._treeTool.getData(editData.id);
|
|
// 合并参数
|
sgworld.Core.extend(this.data, editData, true, true);
|
this.data.id = editData.id;
|
this.defaultEditData = editData;
|
}
|
|
this.$refs.pop.open();
|
},
|
// 添加数据
|
addData() {
|
this.$refs.form.validate((valid) => {
|
// 验证通过
|
if (valid) {
|
let data = {
|
sourceType: this.type,
|
...this.data,
|
};
|
this.$emit("success", data, this.isEdit);
|
this.close(false, true);
|
}
|
});
|
},
|
// 编辑
|
edit(editType) {
|
if (this.isEdit) {
|
handler && handler.destroy();
|
handler = undefined;
|
switch (editType) {
|
case "width":
|
case "height":
|
video.item.plane.dimensions = new Cesium.Cartesian2(
|
this.data.width,
|
this.data.height
|
);
|
break;
|
case "position":
|
video.item.position = Cesium.Cartesian3.fromDegrees(
|
this.data.position.lon,
|
this.data.position.lat,
|
this.data.position.height
|
);
|
break;
|
case "url":
|
let videoDOM = video.item.plane.material.image.getValue();
|
videoDOM.firstChild.src = this.data.url;
|
videoDOM.load();
|
videoDOM.play();
|
video.item.plane.material = new Cesium.ImageMaterialProperty({
|
image: videoDOM,
|
});
|
break;
|
case "heading":
|
video.item.orientation =
|
Cesium.Transforms.headingPitchRollQuaternion(
|
video.item.position.getValue(),
|
new Cesium.HeadingPitchRoll(
|
Cesium.Math.toRadians(this.data.heading || 0),
|
0,
|
0
|
)
|
);
|
break;
|
}
|
}
|
},
|
pick() {
|
handler && handler.destroy();
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
this.$message("在场景内点击左键拾取坐标更新位置");
|
handler.setInputAction((event) => {
|
let degrees = sgworld.Navigate.getMouseDegrees(event);
|
degrees.height += this.data.height / 2;
|
Object.assign(this.data.position, degrees);
|
this.edit("position");
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
restore() {
|
video.item.position = Cesium.Cartesian3.fromDegrees(
|
this.defaultEditData.position.lon,
|
this.defaultEditData.position.lat,
|
this.defaultEditData.position.height
|
);
|
video.item.plane.dimensions = new Cesium.Cartesian2(
|
this.defaultEditData.width,
|
this.defaultEditData.height
|
);
|
let videoDOM = video.item.plane.material.image.getValue();
|
videoDOM.firstChild.src = this.defaultEditData.url;
|
videoDOM.load();
|
videoDOM.play();
|
video.item.plane.material = new Cesium.ImageMaterialProperty({
|
image: videoDOM,
|
});
|
video.item.orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
video.item.position.getValue(),
|
new Cesium.HeadingPitchRoll(
|
Cesium.Math.toRadians(this.defaultEditData.heading || 0),
|
0,
|
0
|
)
|
);
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.el-form {
|
margin-top: 20px;
|
margin-right: 10px;
|
width: 380px;
|
|
/deep/ .el-form-item__label {
|
color: #fff;
|
font-size: 18px;
|
}
|
}
|
</style>
|
