<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
:shadow="false"
|
:left="left"
|
width="390px"
|
:showBtn="false"
|
>
|
<el-form ref="form" :model="data" :rules="rules" label-width="100px">
|
<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"></el-input>
|
</el-form-item>
|
<el-form-item label="类型:">
|
<el-select v-model="data.type">
|
<el-option label="mp4" value="mp4"></el-option>
|
<el-option label="hls" value="hls"></el-option>
|
<el-option label="flv" value="flv"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="透明度:">
|
<el-slider v-model="data.alpha" :max="1" :step="0.01"></el-slider>
|
</el-form-item>
|
<el-form-item label="辅助线:">
|
<el-switch v-model="data.useLine"></el-switch>
|
</el-form-item>
|
<el-form-item label="添加视频:">
|
<el-button type="primary" size="mini" @click="drawVideo('camera')"
|
>当前视角</el-button
|
>
|
<el-button type="primary" size="mini" @click="drawVideo"
|
>图上选点</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
import Bus from "@tools/Bus";
|
|
let video, handler;
|
export default {
|
name: "AddVideo",
|
components: {
|
Popup,
|
},
|
data() {
|
return {
|
title: "添加视频投影",
|
left: "calc(100% - 400px)",
|
data: {
|
name: "",
|
video2D: false,
|
sourceType: "video3D",
|
type: "mp4",
|
url: "",
|
horizonAngle: 60, //相机水平视角
|
verticalAngle: 40, //相机垂直视角
|
offset: 0.1, //视频四周羽化比例
|
alpha: 0.9, //透明度
|
useLine: true, //是否试用辅助线
|
},
|
// 表单验证规则
|
rules: {
|
url: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
|
},
|
};
|
},
|
mounted() {},
|
methods: {
|
// 关闭弹窗
|
close() {
|
handler && handler.destroy();
|
handler = undefined;
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
},
|
// 打开弹窗
|
open(type) {
|
this.close(true);
|
this.data.video2D = type === "2d";
|
this.data.name = this.data.video2D ? "2D视频投影" : "3D视频投影";
|
this.data.url = SmartEarthRootUrl + "Workers/image/video.mp4";
|
this.$refs.pop.open();
|
},
|
drawVideo(type) {
|
this.$refs.form.validate((valid) => {
|
// 验证通过
|
if (valid) {
|
let data = {
|
id: sgworld.Core.getuid(),
|
...this.data,
|
};
|
if (type === "camera") {
|
let cameraDegrees = sgworld.Navigate.getDegrees();
|
let degrees = sgworld.Navigate.getMouseDegrees({
|
x: Viewer.container.offsetWidth / 2,
|
y: Viewer.container.offsetHeight / 2,
|
});
|
data.cameraPosition = Cesium.Cartesian3.fromDegrees(
|
cameraDegrees.lon,
|
cameraDegrees.lat,
|
cameraDegrees.height
|
);
|
if (degrees) {
|
data.position = Cesium.Cartesian3.fromDegrees(
|
degrees.lon,
|
degrees.lat,
|
degrees.height
|
);
|
if (!this.data.video2D) {
|
data.far =
|
Cesium.Cartesian3.distance(
|
data.cameraPosition,
|
data.position
|
) * 1.5;
|
}
|
this.Video(data);
|
}
|
} else {
|
let viewCone = sgworld.Creator.createViewCone(
|
{},
|
(item, positions) => {
|
viewCone.destroy();
|
data.cameraPosition = sgworld.Core.toDegrees(positions[0]);
|
data.position = sgworld.Core.toDegrees(positions[1]);
|
data.far = Cesium.Cartesian3.distance(
|
positions[0],
|
positions[1]
|
);
|
this.Video(data);
|
}
|
);
|
}
|
}
|
});
|
},
|
// 对象 - 视频投影
|
Video(data) {
|
sgworld.Creator.Video3D({
|
...data,
|
success(item) {
|
delete data.position;
|
data.heading = item.thisVideo.heading;
|
data.pitch = item.thisVideo.pitch;
|
data.item = item;
|
Bus.$emit("addOtherData", "视频投影", data);
|
},
|
});
|
},
|
pick(type) {
|
handler && handler.destroy();
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
this.$message("在场景内点击左键拾取坐标更新位置");
|
handler.setInputAction((event) => {
|
let degrees = sgworld.Navigate.getMouseDegrees(event);
|
type === "cameraPosition" && Object.assign(this.data[type], degrees);
|
video.updateVideo({
|
[type]: Cesium.Cartesian3.fromDegrees(
|
degrees.lon,
|
degrees.lat,
|
degrees.height
|
),
|
});
|
this.data.heading = video.thisVideo.heading;
|
this.data.pitch = video.thisVideo.pitch;
|
handler.destroy();
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
},
|
};
|
</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;
|
}
|
|
.heading-slider {
|
width: 157px;
|
display: inline-block;
|
vertical-align: middle;
|
}
|
|
.el-select {
|
width: 100%;
|
}
|
}
|
</style>
|
