<template>
|
<div class="">
|
<!-- 添加或修改塔理对话框 -->
|
<Modal :title="form.id ? '修改模型' : '添加模型'" v-model="open">
|
<template slot="form">
|
<el-form ref="form" :model="form" :rules="rules" label-width="auto">
|
<el-form-item label="模型名称" prop="modelName">
|
<el-input v-model="form.modelName" placeholder="请输入模型名称" />
|
</el-form-item>
|
<el-form-item label="模型类型" prop="modelType">
|
<el-select v-model="form.modelType" placeholder="模型类型">
|
<el-option v-for="dict in model_type" :key="dict.value" :label="dict.label"
|
:value="dict.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="文件上传" prop="modelRoute">
|
<el-upload class="upload-demo" action="" :auto-upload="false" accept=""
|
:on-change="getFile" :limit="1">
|
<div class="icon-bg-box icon-bg-box1">
|
<el-icon ><PictureFilled /> </el-icon>
|
<el-button>点击上传文件</el-button>
|
</div>
|
</el-upload>
|
<span v-if="form.modelRoute">
|
{{ form.modelRoute }}
|
<a class="el-icon-close" @click="delFile"></a>
|
</span>
|
</el-form-item>
|
</el-form>
|
</template>
|
<template slot="cesium">
|
<cesiumMapNoSelect showSearch ref="cesiumMapNoSelect" @on-selectAddress="handleSelectAddress">
|
</cesiumMapNoSelect>
|
</template>
|
<template slot="footer">
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="cancel">取消</el-button>
|
</template>
|
</Modal>
|
</div>
|
</template>
|
|
<script>
|
import cesiumMapNoSelect from "@/components/common/cesiumMapNoSelect.vue";
|
export default {
|
name: 'modelManage',
|
components: { cesiumMapNoSelect },
|
props: {
|
model_type: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
},
|
data() {
|
return {
|
// 部门数据
|
deptOptions: [],
|
// 是否显示弹出层
|
open: false,
|
// 表单参数
|
form: {},
|
// 表单校验
|
rules: {
|
modelName: [
|
{ required: true, message: '请输入模型名称', trigger: 'blur' }
|
],
|
deptId: [
|
{ required: true, message: '归属部门' } // trigger监听不到 使用@input单独校验vue-treeSelect表单项
|
]
|
},
|
// 部门数据
|
deptOptions: null,
|
}
|
},
|
methods: {
|
show(ids) {
|
this.form = {}
|
this.resetForm("form");
|
|
if (ids) {
|
// 编辑
|
this.$api.detail('/tower/model', ids).then(res => {
|
this.form = res.data
|
console.log(this.form)
|
this.open = true
|
this.$nextTick(() => {
|
this.$refs.cesiumMapNoSelect.clearMap()
|
this.addModel()
|
})
|
})
|
} else {
|
// 新增
|
this.open = true
|
this.$nextTick(() => {
|
this.$refs.cesiumMapNoSelect.clearMap()
|
this.addModel()
|
|
})
|
}
|
},
|
getFile (file){
|
let formData = new FormData();
|
formData.append("file", file.raw);
|
// formData.append("type", 'pic');
|
//上传图片的接口
|
uploadFile(formData).then(res => {
|
this.$set(this.form, 'modelRoute', res.data.url)
|
})
|
},
|
handleSelectAddress(data) {
|
this.$set(this.form, 'longitude', data.longitude)
|
this.$set(this.form, 'latitude', data.latitude)
|
this.$set(this.form, 'altitude', data.altitude)
|
this.$refs.form.validateField('longitude')
|
this.$refs.form.validateField('latitude')
|
this.$refs.form.validateField('altitude')
|
},
|
delFile(){
|
this.form.modelRoute = null
|
},
|
submitForm() {
|
this.$refs["form"].validate(valid => {
|
console.log(this.form)
|
// if (valid) {
|
// this.$api.save('work/tower/', 'id', Object.assign({}, this.form)).then(res => {
|
// this.form = {}
|
// this.$emit('on-submit')
|
// this.open = false
|
// })
|
// }
|
});
|
},
|
addModel(){
|
console.log(window)
|
console.log(window.viewer)
|
// viewer.entities.add({
|
// position: Cesium.Cartesian3.fromDegrees(0, 0, 0),
|
// model: {
|
// uri: "/Model/tower.glb",
|
// scale: 10000,
|
// minimumPixelSize: 50,
|
// },
|
// });
|
// const position = Cesium.Cartesian3.fromDegrees(139.745433, 35.658581, 0);
|
const position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
|
|
// 设置模型方向（可选）
|
const heading = Cesium.Math.toRadians(135); // 朝东南方向
|
const pitch = 0;
|
const roll = 0;
|
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
position,
|
new Cesium.HeadingPitchRoll(heading, pitch, roll)
|
);
|
|
// 加载 glTF 模型
|
const entity = viewer.entities.add({
|
name: "MyModel",
|
position: position,
|
orientation: orientation,
|
model: {
|
uri: "/Model/tower.glb", // 替换成你的模型路径
|
scale: 1000,
|
},
|
});
|
console.log(entity)
|
|
// 飞行到模型位置
|
viewer.flyTo(entity)
|
},
|
cancel() {
|
this.$refs.cesiumMapNoSelect.clearMap()
|
this.open = false
|
},
|
},
|
mounted() {
|
},
|
}
|
</script>
|
|
<style scoped></style>
|
