// 垂直飞线
|
<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
:shadow="false"
|
:left="left"
|
width="310px"
|
:showBtn="false"
|
>
|
<el-form ref="form" :model="data" :rules="rules" label-width="70px">
|
<el-form-item label="速度:">
|
<el-input v-model="data.time"></el-input>
|
</el-form-item>
|
<el-form-item label="数量:">
|
<el-input v-model="data.num"></el-input>
|
</el-form-item>
|
<el-form-item label="最低:">
|
<el-input v-model="data.min"></el-input>
|
</el-form-item>
|
<el-form-item label="最高:">
|
<el-input v-model="data.max"></el-input>
|
</el-form-item>
|
<el-form-item label="颜色">
|
<el-color-picker v-model="data.color"></el-color-picker>
|
</el-form-item>
|
<el-form-item label="绘制:">
|
<el-button type="info" size="mini" @click="draw">图上绘制</el-button>
|
</el-form-item>
|
</el-form>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
import Bus from "@tools/Bus";
|
let rectangle;
|
export default {
|
name: "FlyingLine",
|
components: {
|
Popup,
|
},
|
data() {
|
return {
|
title: "添加垂直飞线",
|
left: "calc(100% - 320px)",
|
data: {
|
color: "#ffff00",
|
size: 0.01,
|
time: 2500,
|
min: 800,
|
max: 1000,
|
num: 100,
|
},
|
length: 1,
|
// 表单验证规则
|
rules: {},
|
//颜色
|
};
|
},
|
mounted() {},
|
methods: {
|
// 关闭弹窗
|
close() {
|
rectangle && rectangle.end && rectangle.end();
|
rectangle = undefined;
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
},
|
// 打开弹窗
|
open() {
|
this.close();
|
this.$refs.pop.open();
|
},
|
draw() {
|
this.$refs.form.validate((valid) => {
|
// 验证通过
|
if (valid) {
|
this.$message("在场景内绘制范围添加");
|
rectangle && rectangle.end && rectangle.end();
|
let color = Cesium.Color.fromCssColorString(
|
this.data.color
|
).withAlpha(0.6);
|
rectangle = sgworld.Creator.createSimpleGraphic(
|
"rectangle",
|
{ color: color.toCssColorString() },
|
(entity) => {
|
entity.deleteObject();
|
let coordinates = entity.rectangle.coordinates.getValue();
|
coordinates = sgworld.Core.toDegreesRectangle(coordinates);
|
this.createFlyingLine(coordinates);
|
}
|
);
|
}
|
});
|
},
|
createFlyingLine(rectangle) {
|
let positions = [];
|
for (let i = 0; i < this.data.num; i++) {
|
let x =
|
Math.random() * (rectangle.east - rectangle.west) + rectangle.west;
|
let y =
|
Math.random() * (rectangle.north - rectangle.south) + rectangle.south;
|
let z = Math.random() * (this.data.max - this.data.min) + this.data.min;
|
positions.push({ lon: x, lat: y, height: z });
|
}
|
let flyingLine = sgworld.Creator.createFlyingLine(positions, {
|
time: this.data.time,
|
color: this.data.color,
|
});
|
Bus.$emit("addOtherData", "特效", {
|
id: sgworld.Core.getuid(),
|
name: "新建垂直飞线",
|
sourceType: "flyingLine",
|
positions: positions,
|
...this.data,
|
item: flyingLine,
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.el-form {
|
margin-top: 20px;
|
margin-right: 10px;
|
width: 300px;
|
|
/deep/ .el-form-item__label {
|
color: #fff;
|
font-size: 18px;
|
}
|
}
|
</style>
|
