<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
:shadow="!isEdit"
|
:left="left"
|
width="390px"
|
showBtn="true"
|
@yes="addData(true)"
|
@cancel="close(false)"
|
>
|
<el-form
|
ref="form"
|
:model="data"
|
:rules="rules"
|
label-width="105px"
|
v-loading="loading"
|
>
|
<el-form-item label="名称:">
|
<el-input v-model="data.name"></el-input>
|
</el-form-item>
|
<el-form-item label="地址:" prop="urls">
|
<el-input
|
placeholder="模型地址"
|
v-model="data.urls"
|
@change="edit('urls')"
|
>
|
<template slot="append" v-if="isGltf">
|
<el-button @click="openFile">上传</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
<div v-if="is3DTiles">
|
<el-form-item class="nolabel-form-item">
|
<el-form-item class="inline-form-item" label="特效">
|
<el-switch v-model="data.effects" @change="edit('effects')">
|
</el-switch>
|
</el-form-item>
|
<el-form-item class="inline-form-item" label="颜色">
|
<el-color-picker
|
v-model="data.color"
|
@change="edit('color')"
|
show-alpha
|
></el-color-picker>
|
</el-form-item>
|
</el-form-item>
|
<el-form-item label="特效高度:" v-if="data.effects">
|
<el-input-number
|
v-model="data.effectsMaxHeight"
|
@change="edit('effectsMaxHeight')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item class="nolabel-form-item">
|
<el-form-item class="inline-form-item" label="纠正:">
|
<el-switch
|
v-model="setPosition"
|
@change="edit('setPosition')"
|
></el-switch>
|
</el-form-item>
|
<el-form-item
|
v-if="setPosition"
|
class="inline-form-item"
|
label="类型:"
|
>
|
<el-select
|
v-model="setPositionType"
|
style="width: 108px"
|
@change="edit('setPositionType')"
|
>
|
<el-option label="高度" value="height"></el-option>
|
<el-option label="坐标" value="position"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form-item>
|
</div>
|
<el-form-item v-if="showPosition" label="经度:" prop="lon">
|
<el-input-number
|
v-model="data.lon"
|
:min="-180"
|
:max="180"
|
:step="0.00001"
|
@change="edit('lon')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="showPosition" label="纬度:" prop="lat">
|
<el-input-number
|
v-model="data.lat"
|
:min="-90"
|
:max="90"
|
:step="0.00001"
|
@change="edit('lat')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="showHeight" label="高度:" prop="height">
|
<el-input-number
|
v-model="data.height"
|
:step="0.1"
|
@change="edit('height')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="showAngle" label="水平:">
|
<el-input-number
|
v-model="data.heading"
|
:step="0.1"
|
@change="edit('heading')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="showAngle" label="垂直:">
|
<el-input-number
|
v-model="data.pitch"
|
:step="0.1"
|
@change="edit('pitch')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="showAngle" label="翻滚:">
|
<el-input-number
|
v-model="data.roll"
|
:step="0.1"
|
@change="edit('roll')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="isGltf" label="比例:">
|
<el-input-number
|
v-model="data.scale"
|
:step="0.1"
|
@change="edit('scale')"
|
></el-input-number>
|
</el-form-item>
|
<div v-else-if="is3DTiles">
|
<el-form-item label="最大内存:">
|
<el-input-number
|
placeholder="可选(默认512M)"
|
v-model="data.maximumMemoryUsage"
|
@change="edit('maximumMemoryUsage')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="几何误差:" v-if="isEdit">
|
<el-input-number
|
v-model="data.geometricError"
|
@change="edit('geometricError')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item class="inline-form-item" label="双面显示:">
|
<el-switch
|
v-model="data.backFaceCulling"
|
@change="edit('backFaceCulling')"
|
></el-switch>
|
</el-form-item>
|
<el-form-item label="容差:">
|
<el-input-number
|
placeholder="可选(默认16)"
|
v-model="data.maximumScreenSpaceError"
|
@change="edit('maximumScreenSpaceError')"
|
></el-input-number>
|
</el-form-item>
|
</div>
|
<div v-else>
|
<el-form-item label="最小可视:">
|
<el-input-number
|
:min="0"
|
v-model="data.near"
|
@change="edit('near')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="最大可视:">
|
<el-input-number
|
:min="data.near"
|
v-model="data.far"
|
@change="edit('far')"
|
></el-input-number>
|
</el-form-item>
|
</div>
|
</el-form>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
import modelEdit from "./mixin/modelEdit";
|
let model;
|
export default {
|
name: "AddModel",
|
components: {
|
Popup,
|
},
|
mixins: [modelEdit],
|
data() {
|
return {
|
title: "添加数据",
|
left: undefined,
|
type: "",
|
isEdit: false,
|
defaultEditData: undefined,
|
setPosition: false,
|
setPositionType: "height",
|
enableAngle: false,
|
loading: false,
|
changeModel: false,
|
data: {
|
name: "新增数据",
|
urls: "",
|
color: undefined,
|
effects: false,
|
effectsMaxHeight: 150,
|
backFaceCulling: false,
|
maximumScreenSpaceError: 16,
|
geometricError: undefined,
|
maximumMemoryUsage: 512,
|
lon: 110,
|
lat: 32,
|
height: 0,
|
heading: 0,
|
roll: 0,
|
pitch: 0,
|
scale: 1,
|
near: 0,
|
far: 999999999,
|
},
|
// 表单验证规则
|
rules: {
|
lon: [{ required: true, message: "请输入经度", trigger: "blur" }],
|
lat: [{ required: true, message: "请输入纬度", trigger: "blur" }],
|
height: [{ required: true, message: "请输入高度", trigger: "blur" }],
|
urls: [{ required: true, message: "请输入服务地址", trigger: "blur" }],
|
},
|
};
|
},
|
computed: {
|
// 是否是gltf模型
|
isGltf: function () {
|
return this.type === "gltf";
|
},
|
// 是否是gltf模型
|
is3DTiles: function () {
|
return this.type === "b3dm";
|
},
|
// 是否显示高度
|
showHeight: function () {
|
return this.type === "gltf" || this.setPosition;
|
},
|
// 是否显示高度
|
showPosition: function () {
|
return (
|
this.type === "gltf" ||
|
(this.setPosition && this.setPositionType === "position")
|
);
|
},
|
// 是否显示角度
|
showAngle: function () {
|
return (
|
this.type === "gltf" ||
|
(this.setPosition &&
|
this.setPositionType === "position" &&
|
this.enableAngle)
|
);
|
},
|
},
|
mounted() {},
|
methods: {
|
// 关闭弹窗
|
close(isCloseBtn, isSave) {
|
if (!isSave && this.defaultEditData && model) {
|
this.restore(model);
|
this.defaultEditData = undefined;
|
}
|
model = undefined;
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
},
|
// 打开弹窗
|
open(type, editData, defaultData) {
|
this.close(true);
|
|
this.type = type;
|
this.isEdit = !!editData;
|
if (this.isEdit) {
|
this.title = "编辑数据";
|
this.left = "calc(100% - 420px)";
|
// 获取图层
|
model =
|
sgworld.ProjectTree.getObject(editData.id) ||
|
sgworld._treeTool.getData(editData.id);
|
|
// 合并参数
|
sgworld.Core.extend(this.data, editData, true, true);
|
if (editData.backFaceCulling !== undefined) {
|
this.data.backFaceCulling = !this.data.backFaceCulling;
|
}
|
|
model.item &&
|
model.item._geometricError &&
|
(this.data.geometricError = model.item._geometricError);
|
|
this.data.id = editData.id;
|
// 定位
|
editData.flyTo && (this.flyTo = editData.flyTo.join(","));
|
if (this.type === "b3dm") {
|
this.enableAngle = true;
|
}
|
|
if (editData.modelHeight != undefined || editData.Center != undefined) {
|
this.setPosition = true;
|
this.setPositionType =
|
editData.modelHeight != undefined ? "height" : "position";
|
if (this.setPositionType === "position") {
|
this.data.lon = model.modelEditData.lon;
|
this.data.lat = model.modelEditData.lat;
|
this.data.height = model.modelEditData.height;
|
} else {
|
this.data.height = editData.modelHeight;
|
model.modelEditData.height = editData.modelHeight;
|
}
|
|
this.editModel("setPosition", model);
|
}
|
this.defaultEditData = editData;
|
} else {
|
this.title = "添加数据";
|
this.data.name = (type === "b3dm" ? "3dtiles" : type) + "模型";
|
if (defaultData) {
|
// 合并参数
|
sgworld.Core.extend(this.data, defaultData, true, true);
|
}
|
}
|
|
this.$refs.pop.open();
|
},
|
openFile() {
|
sgworld.Core.openLocalFile({
|
accept: ".gltf,.glb",
|
callback: (fileURL) => {
|
this.data.urls = fileURL;
|
},
|
});
|
},
|
// 添加数据
|
addData(close) {
|
this.$refs.form.validate((valid) => {
|
// 验证通过
|
if (valid) {
|
let data = {
|
id: window.sgworld.Core.getuid(),
|
sourceType: this.type,
|
...this.data,
|
};
|
// 删除多余值
|
if (!this.isGltf) {
|
if (this.setPosition) {
|
if (this.setPositionType === "height") {
|
data.modelHeight = data.height;
|
data.Center = undefined;
|
} else {
|
data.Center = [data.lon, data.lat, data.height];
|
data.modelHeight = undefined;
|
}
|
} else {
|
data.modelHeight = undefined;
|
data.Center = undefined;
|
}
|
data.backFaceCulling = !data.backFaceCulling;
|
delete data.lon;
|
delete data.lat;
|
delete data.height;
|
delete data.scale;
|
}
|
|
if (this.changeModel && !close) {
|
this.loading = true;
|
this.removeModel(model);
|
model = undefined;
|
sgworld._treeTool.addData(data).then((data) => {
|
model = data;
|
this.loading = false;
|
});
|
} else {
|
this.$emit("success", data, this.isEdit);
|
this.close(false, true);
|
}
|
}
|
});
|
},
|
// 编辑
|
edit(editType) {
|
if (editType === "urls" && this.isEdit) {
|
this.changeModel = true;
|
this.addData();
|
} else if (this.isEdit) {
|
this.editModel(editType, model);
|
}
|
},
|
},
|
};
|
</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>
|
