admin/Mars3D-screen_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 模型gltf管理功能新增

Browse Source
This commit is contained in:
kun 2023-11-04 14:50:06 +08:00
parent 7391660f5f
commit 6b1e0cddbf
3 changed files with 193 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/testMap/index.vue
View File

@ -109,6 +109,41 @@
<el-button @click="editLineEffectConfig">保存当前配置</el-button> <el-button @click="editLineEffectConfig">保存当前配置</el-button>
</div> </div>
</div> </div>
<div class="layer-config" v-if="props.type == '模型'">
<div class="property-column-item">
<span>比例：{{ formData.scale ? formData.scale : 0 }}</span>
<el-slider v-model.number="formData.scale" :step="1" :max="100" :min="1" @change="e => modelOperate(e, 'scale')" />
</div>
<div class="property-column-item">
<span>方向角：{{ formData.heading ? formData.heading : 0 }}</span>
<el-slider v-model.number="formData.heading" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'heading')" />
</div>
<div class="property-column-item">
<span>俯仰角：{{ formData.pitch ? formData.pitch : 0 }}</span>
<el-slider v-model.number="formData.pitch" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'pitch')" />
</div>
<div class="property-column-item">
<span>翻滚角：{{ formData.roll ? formData.roll : 0 }}</span>
<el-slider v-model.number="formData.roll" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'roll')" />
</div>
<div class="property-row-item" v-if="formData.silhouette">
<span>轮廓颜色：{{ formData.silhouetteColor ? formData.silhouetteColor : "" }}</span>
<el-color-picker v-model="formData.silhouetteColor" @change="e => modelOperate(e, 'silhouetteColor')" />
</div>
<div class="property-column-item" v-if="formData.silhouette">
<span>轮廓宽度：{{ formData.silhouetteSize ? formData.silhouetteSize : 0 }}</span>
<el-slider
v-model.number="formData.silhouetteSize"
:step="1"
:max="100"
:min="1"
@change="e => modelOperate(e, 'silhouetteSize')"
/>
</div>
<div class="operate-btn">
<el-button @click="editModelConfig">保存当前配置</el-button>
</div>
</div>
<div class="close-btn" @click="$emit('confirm')"> <div class="close-btn" @click="$emit('confirm')">
<el-icon color="#fff" size="18"><CircleClose /></el-icon> <el-icon color="#fff" size="18"><CircleClose /></el-icon>
</div> </div>
@ -131,9 +166,12 @@ import {
diffuseWallDetails, diffuseWallDetails,
diffuseWallEdit, diffuseWallEdit,
polylineCombineDetails, polylineCombineDetails,
polylineCombineEdit polylineCombineEdit,
gltfModelDetails,
gltfModelEdit
} from "@/api/modules/mapCommon"; } from "@/api/modules/mapCommon";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { form } from "@/views/project/supervision/ProjectSupervision/overview";
const props = defineProps({ const props = defineProps({
testMapVisible: Boolean, testMapVisible: Boolean,
relativeId: String, relativeId: String,
@ -167,6 +205,17 @@ let map: any;
let graphicLayer: any; let graphicLayer: any;
let thisLayer: any; // 选中的图层 let thisLayer: any; // 选中的图层
let thisAlbuginea: any; // 选中的白膜 let thisAlbuginea: any; // 选中的白膜
// 修改模型当前配置
const editModelConfig = async () => {
let requestData = {
id: props.relativeId,
...formData.value
};
const res: any = await gltfModelEdit(requestData);
if (res.code == 200) {
ElMessage.success("操作成功");
}
};
// 修改线效果当前配置 // 修改线效果当前配置
const editLineEffectConfig = async () => { const editLineEffectConfig = async () => {
let requestData = { let requestData = {
@ -211,6 +260,26 @@ const editBaseMapsConfig = async () => {
ElMessage.success("操作成功"); ElMessage.success("操作成功");
} }
}; };
// 模型操作
const modelOperate = (e: any, label: any) => {
console.log(e);
console.log(formData.value);
let graphic = graphicLayer.getGraphicById(formData.value.id);
// console.log(graphic);
let loadJson = {
scale: formData.value.scale,
heading: formData.value.heading,
pitch: formData.value.pitch,
roll: formData.value.roll,
silhouette: formData.value.silhouette,
silhouetteColor: formData.value.silhouetteColor,
silhouetteSize: formData.value.silhouetteSize,
hasShadows: formData.value.hasShadows,
clampToGround: formData.value.clampToGround
};
graphic.setStyle(loadJson);
// layer.style = loadJson;
};
// 线效果操作 // 线效果操作
const lineEffectOperate = (e: any, label: any) => { const lineEffectOperate = (e: any, label: any) => {
console.log(e); console.log(e);
@ -318,6 +387,20 @@ const layerOperate = (e: any, label: any) => {
thisLayer[label] = e; thisLayer[label] = e;
} }
}; };
// 获取模型数据详情
const getModelInfo = async () => {
let requestData = {
id: props.relativeId
};
const { result }: { result: any } = await gltfModelDetails(requestData);
console.log(result, "--------gltf模型");
if (result) {
formData.value = {
...result
};
await initMars3d(configJson.value);
}
};
// 获取线效果数据详情 // 获取线效果数据详情
const getLineEffectInfo = async () => { const getLineEffectInfo = async () => {
let requestData = { let requestData = {
@ -541,6 +624,29 @@ const initMars3d = (option: any) => {
graphic.flyTo(); graphic.flyTo();
}, 200); }, 200);
} }
if (props.type == "模型") {
// 创建gltf模型，
const model = new mars3d.graphic.ModelPrimitive({
id: formData.value.id,
name: formData.value.name,
position: [formData.value.lng, formData.value.lat, formData.value.alt],
style: {
url: formData.value.url,
scale: formData.value.scale,
heading: formData.value.heading,
pitch: formData.value.pitch,
roll: formData.value.roll,
silhouette: formData.value.silhouette,
silhouetteColor: formData.value.silhouetteColor,
silhouetteSize: formData.value.silhouetteSize,
hasShadows: formData.value.hasShadows,
clampToGround: formData.value.clampToGround
}
});
console.log(model);
graphicLayer.addGraphic(model);
model.flyTo({ maxHeight: 200 });
}
}; };
onMounted(async () => { onMounted(async () => {
if (props.type == "底图") { if (props.type == "底图") {
@ -551,6 +657,8 @@ onMounted(async () => {
await getPointPositionInfo(); await getPointPositionInfo();
} else if (props.type == "线效果") { } else if (props.type == "线效果") {
await getLineEffectInfo(); await getLineEffectInfo();
} else if (props.type == "模型") {
await getModelInfo();
} }
}); });
onUnmounted(() => { onUnmounted(() => {

193
src/views/jxjview/modelManagement/components/operateDialog.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="overview"> <div class="overview">
<el-dialog :show-close="false" v-model="visible1" width="60%" @close="closeMain"> <el-dialog :show-close="false" v-model="visible1" width="60%" @close="closeMain" v-if="!testMapVisible">
<template #title> <template #title>
<div class="title-detail"> <div class="title-detail">
<img src="@/assets/images/tableIcon/look.png" alt="" /> <img src="@/assets/images/tableIcon/look.png" alt="" />
<span>新增模型</span> <span>{{ props.title }}</span>
<el-icon> <el-icon>
<close @click="closeMain" /> <close @click="closeMain" />
</el-icon> </el-icon>
@ -14,62 +14,73 @@
<div class="basic-info"> <div class="basic-info">
<div class="form-content"> <div class="form-content">
<div class="row"> <div class="row">
<el-form-item label="名称:" prop="engineeringName"> <el-form-item label="名称:" prop="name">
<el-input v-model="formData.engineeringName" placeholder="请输入" disabled /> <el-input v-model="formData.name" placeholder="请输入" />
</el-form-item> </el-form-item>
</div> </div>
<div class="row"> <div class="row">
<el-form-item label="是否显示:" prop="engineeringName"> <el-form-item label="模型地址:" prop="url">
<el-switch v-model="formData.engineeringName" style="--el-switch-on-color: #13ce66" /> <el-input v-model="formData.url" placeholder="请输入" />
</el-form-item>
</div>
<div class="row">
<el-form-item label="坐标点位:" :required="true">
<div class="table-content" v-for="(item, index) in positions" :key="index">
<div class="table-head">
<div class="head-value">经度</div>
<div class="head-value">纬度</div>
<div class="head-value">高度</div>
</div>
<div class="table-body">
<div class="body-value">
<el-input v-model="item.lng" style="width: 100%" placeholder="请输入" />
</div>
<div class="body-value">
<el-input v-model="item.lat" placeholder="请输入" />
</div>
<div class="body-value">
<el-input v-model="item.alt" placeholder="请输入" />
</div>
</div>
</div>
</el-form-item> </el-form-item>
</div> </div>
<div class="row"> <div class="row">
<el-form-item label="模型地址:" prop="engineeringName"> <el-form-item label="比例:" prop="scale">
<el-input v-model="formData.engineeringName" placeholder="请输入" disabled /> <el-input-number v-model="formData.scale" controls-position="right" placeholder="请输入" />
</el-form-item>
<el-form-item label="方向角:" prop="heading">
<el-input-number v-model="formData.heading" controls-position="right" placeholder="请输入" />
</el-form-item>
<el-form-item label="俯仰角:" prop="pitch">
<el-input-number v-model="formData.pitch" controls-position="right" placeholder="请输入" />
</el-form-item>
<el-form-item label="翻滚角:" prop="roll">
<el-input-number v-model="formData.roll" controls-position="right" placeholder="请输入" />
</el-form-item>
<el-form-item label="是否轮廓:" prop="silhouette">
<el-switch v-model="formData.silhouette" style="--el-switch-on-color: #13ce66" />
</el-form-item>
<el-form-item label="轮廓颜色:" prop="silhouetteColor" v-if="formData.silhouette">
<el-color-picker v-model="formData.silhouetteColor" />
</el-form-item>
<el-form-item label="轮廓宽度:" prop="silhouetteSize" v-if="formData.silhouette">
<el-input-number v-model="formData.silhouetteSize" controls-position="right" placeholder="请输入" />
</el-form-item>
<el-form-item label="是否阴影:" prop="hasShadows">
<el-switch v-model="formData.hasShadows" style="--el-switch-on-color: #13ce66" />
</el-form-item>
<el-form-item label="是否贴地:" prop="clampToGround">
<el-switch v-model="formData.clampToGround" style="--el-switch-on-color: #13ce66" />
</el-form-item>
<el-form-item label="是否显示:" prop="show">
<el-switch v-model="formData.show" style="--el-switch-on-color: #13ce66" />
</el-form-item> </el-form-item>
</div> </div>
<div class="row"> <div class="row" v-if="props.title == '编辑模型'">
<el-form-item label="颜色模式:" prop="engineeringName"> <el-form-item label="可视化设置预览:">
<el-select v-model="formData.engineeringName" placeholder="请选择" style="width: 100%"> <el-button type="primary" @click="openTestMap">编辑</el-button>
<el-option v-for="item in colorModalList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
<div class="row">
<el-form-item label="比例:" prop="engineeringName">
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
</el-form-item>
<el-form-item label="方向角:" prop="engineeringName">
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
</el-form-item>
<el-form-item label="俯仰角:" prop="engineeringName">
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
</el-form-item>
<el-form-item label="翻滚角:" prop="engineeringName">
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
</el-form-item>
<el-form-item label="是否轮廓:" prop="engineeringName">
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
</el-form-item>
<el-form-item label="轮廓颜色:" prop="engineeringName">
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
</el-form-item>
<el-form-item label="轮廓宽度:" prop="engineeringName">
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
</el-form-item>
<el-form-item label="是否宽度:" prop="engineeringName">
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
</el-form-item>
<el-form-item label="是否阴影:" prop="engineeringName">
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
</el-form-item>
<el-form-item label="是否贴地:" prop="engineeringName">
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
</el-form-item>
</div>
<div class="row">
<el-form-item label="可视化设置预览:" prop="engineeringName">
<el-button type="primary" @click="visible1 = false">编辑</el-button>
</el-form-item> </el-form-item>
</div> </div>
</div> </div>
@ -80,6 +91,8 @@
<el-button type="info" @click="visible1 = false">取消</el-button> <el-button type="info" @click="visible1 = false">取消</el-button>
</template> </template>
</el-dialog> </el-dialog>
<!-- 图层效果编辑 -->
<testMap v-if="testMapVisible" :relativeId="props.relativeId" @confirm="requestDetails" type="模型"></testMap>
</div> </div>
</template> </template>
@ -89,98 +102,34 @@ import type { FormInstance } from "element-plus";
import { ElMessage, UploadProps } from "element-plus"; import { ElMessage, UploadProps } from "element-plus";
import { gltfModelAdd, gltfModelDetails, gltfModelEdit } from "@/api/modules/mapCommon"; import { gltfModelAdd, gltfModelDetails, gltfModelEdit } from "@/api/modules/mapCommon";
import testMap from "@/components/testMap/index.vue"; import testMap from "@/components/testMap/index.vue";
import { GlobalStore } from "@/stores";
const props = defineProps({ const props = defineProps({
operateVisible: Boolean, operateVisible: Boolean,
relativeId: String, relativeId: String,
title: String title: String
}); });
const emits = defineEmits(["update:operateVisible", "confirm"]); const emits = defineEmits(["update:operateVisible", "confirm"]);
const baseUrl = import.meta.env.VITE_API_URL;
const fileList = ref([]);
const store = GlobalStore();
const headers = ref({ Authorization: "Bearer " + store.token });
const positions = ref([{ lng: "", lat: "", alt: "" }]); const positions = ref([{ lng: "", lat: "", alt: "" }]);
const minLength = ref(1); // 最小点位长度 const minLength = ref(1); // 最小点位长度
const effectTypeList = ref([
{ label: "圆扩散", value: "ScanLine" },
{ label: "波纹扩散", value: "CircleWave" },
{ label: "雷达线", value: "RadarLine" },
{ label: "波纹雷达扫描", value: "RadarWave" },
{ label: "自定义图形扩散", value: "CircleScan" }
]);
const testMapVisible = ref(false); const testMapVisible = ref(false);
const rules = ref({ const rules = ref({
type: [ name: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
radius: [
{ {
required: true, required: true,
message: "请输入", message: "请输入",
trigger: "blur" trigger: "input"
} }
], ],
speed: [ url: [
{ {
required: true, required: true,
message: "请输入", message: "请输入",
trigger: "blur" trigger: "input"
}
],
diffHeight: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
image: [
{
required: true,
message: "请上传",
trigger: "change"
} }
] ]
}); });
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const formData = ref<any>({}); const formData = ref<any>({});
const visible1 = ref(false); const visible1 = ref(false);
// 图片上传成功后的钩子
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile, index) => {
console.log(response.result.url);
console.log(response, uploadFile, index);
formData.value.image = response.result.url;
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
if (rawFile.type !== "image/png" && rawFile.type !== "image/jpg" && rawFile.type !== "image/jpeg") {
console.log(rawFile.type);
ElMessage.error("请上传jpg或者png格式的图片");
return false;
}
// 限制文件大小
// else if (rawFile.size / 1024 / 1024 > 2) {
// ElMessage.error('Avatar picture size can not exceed 2MB!')
// return false
// }
return true;
};
// 类型切换
const typeChange = (e: any) => {
console.log(e);
if (!e) return;
if (e == "多边形扩散") {
minLength.value = 3;
} else {
minLength.value = 1;
}
};
// 追加行数据 // 追加行数据
const appendRow = () => { const appendRow = () => {
positions.value.push({ lng: "", lat: "", alt: "" }); positions.value.push({ lng: "", lat: "", alt: "" });
@ -233,12 +182,12 @@ const confirmSubmit = () => {
return; return;
} }
requestData = { ...requestData, ...positions.value[0] }; requestData = { ...requestData, ...positions.value[0] };
if (props.title == "新增点坐标效果") { if (props.title == "新增模型") {
const res: any = await gltfModelAdd(requestData); const res: any = await gltfModelAdd(requestData);
if (res.code == 200) { if (res.code == 200) {
ElMessage.success("操作成功"); ElMessage.success("操作成功");
} }
} else if (props.title == "编辑点坐标效果") { } else if (props.title == "编辑模型") {
const res: any = await gltfModelEdit(requestData); const res: any = await gltfModelEdit(requestData);
if (res.code == 200) { if (res.code == 200) {
ElMessage.success("操作成功"); ElMessage.success("操作成功");
@ -260,10 +209,10 @@ watch(
() => props.operateVisible, () => props.operateVisible,
n => { n => {
if (n) { if (n) {
if (props.title == "新增点坐标效果") { if (props.title == "新增模型") {
formData.value = {}; formData.value = {};
positions.value = [{ lng: "", lat: "", alt: "" }]; positions.value = [{ lng: "", lat: "", alt: "" }];
} else if (props.title == "编辑点坐标效果") { } else if (props.title == "编辑模型") {
getInfo(); getInfo();
} }
visible1.value = n; visible1.value = n;

21
src/views/jxjview/modelManagement/index.vue
View File

@ -33,7 +33,12 @@
</template> </template>
</ProTable> </ProTable>
<!-- 模型新增/编辑 --> <!-- 模型新增/编辑 -->
<operateDialog v-model:operateVisible="operateVisible" :relativeId="relativeId"></operateDialog> <operateDialog
v-model:operateVisible="operateVisible"
:relativeId="relativeId"
:title="title"
@confirm="requestTable"
></operateDialog>
</div> </div>
</template> </template>
@ -67,13 +72,13 @@ const columns: ColumnProps[] = [
label: "ID" label: "ID"
}, },
// 多级 prop // 多级 prop
{ prop: "createTime", label: "名称", search: { el: "input" } }, { prop: "name", label: "名称", search: { el: "input" } },
{ prop: "createTime", label: "是否显示" }, { prop: "show", label: "是否显示" },
{ prop: "createTime", label: "lon经度" }, { prop: "lng", label: "lon经度" },
{ prop: "createTime", label: "lat纬度" }, { prop: "lat", label: "lat纬度" },
{ prop: "governmentTel", label: "高度" }, { prop: "alt", label: "高度" },
{ prop: "state", label: "创建时间" }, { prop: "createTime", label: "创建时间" },
{ prop: "diffDay", label: "更新时间" }, { prop: "updateTime", label: "更新时间" },
{ prop: "operation", label: "操作", fixed: "right", width: 160 } { prop: "operation", label: "操作", fixed: "right", width: 160 }
]; ];
// const AuthIdData = ref([]); // const AuthIdData = ref([]);