From 6b1e0cddbf395e6bc3d256125043fc9b90b1a8b8 Mon Sep 17 00:00:00 2001 From: kun <1422840143@qq.com> Date: Sat, 4 Nov 2023 14:50:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8Bgltf=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/testMap/index.vue | 110 +++++++++- .../components/operateDialog.vue | 193 +++++++----------- src/views/jxjview/modelManagement/index.vue | 21 +- 3 files changed, 193 insertions(+), 131 deletions(-) diff --git a/src/components/testMap/index.vue b/src/components/testMap/index.vue index 0fd88c7..28ac0b8 100644 --- a/src/components/testMap/index.vue +++ b/src/components/testMap/index.vue @@ -109,6 +109,41 @@ 保存当前配置 +
+
+ 比例：{{ formData.scale ? formData.scale : 0 }} + +
+
+ 方向角：{{ formData.heading ? formData.heading : 0 }} + +
+
+ 俯仰角：{{ formData.pitch ? formData.pitch : 0 }} + +
+
+ 翻滚角：{{ formData.roll ? formData.roll : 0 }} + +
+
+ 轮廓颜色：{{ formData.silhouetteColor ? formData.silhouetteColor : "" }} + +
+
+ 轮廓宽度：{{ formData.silhouetteSize ? formData.silhouetteSize : 0 }} + +
+
+ 保存当前配置 +
+
@@ -131,9 +166,12 @@ import { diffuseWallDetails, diffuseWallEdit, polylineCombineDetails, - polylineCombineEdit + polylineCombineEdit, + gltfModelDetails, + gltfModelEdit } from "@/api/modules/mapCommon"; import { ElMessage } from "element-plus"; +import { form } from "@/views/project/supervision/ProjectSupervision/overview"; const props = defineProps({ testMapVisible: Boolean, relativeId: String, @@ -167,6 +205,17 @@ let map: any; let graphicLayer: any; let thisLayer: 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 () => { let requestData = { @@ -211,6 +260,26 @@ const editBaseMapsConfig = async () => { 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) => { console.log(e); @@ -318,6 +387,20 @@ const layerOperate = (e: any, label: any) => { 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 () => { let requestData = { @@ -541,6 +624,29 @@ const initMars3d = (option: any) => { graphic.flyTo(); }, 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 () => { if (props.type == "底图") { @@ -551,6 +657,8 @@ onMounted(async () => { await getPointPositionInfo(); } else if (props.type == "线效果") { await getLineEffectInfo(); + } else if (props.type == "模型") { + await getModelInfo(); } }); onUnmounted(() => { diff --git a/src/views/jxjview/modelManagement/components/operateDialog.vue b/src/views/jxjview/modelManagement/components/operateDialog.vue index 13fa18e..6752103 100644 --- a/src/views/jxjview/modelManagement/components/operateDialog.vue +++ b/src/views/jxjview/modelManagement/components/operateDialog.vue @@ -1,10 +1,10 @@ @@ -89,98 +102,34 @@ import type { FormInstance } from "element-plus"; import { ElMessage, UploadProps } from "element-plus"; import { gltfModelAdd, gltfModelDetails, gltfModelEdit } from "@/api/modules/mapCommon"; import testMap from "@/components/testMap/index.vue"; -import { GlobalStore } from "@/stores"; const props = defineProps({ operateVisible: Boolean, relativeId: String, title: String }); 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 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 rules = ref({ - type: [ - { - required: true, - message: "请选择", - trigger: "change" - } - ], - radius: [ + name: [ { required: true, message: "请输入", - trigger: "blur" + trigger: "input" } ], - speed: [ + url: [ { required: true, message: "请输入", - trigger: "blur" - } - ], - diffHeight: [ - { - required: true, - message: "请输入", - trigger: "blur" - } - ], - image: [ - { - required: true, - message: "请上传", - trigger: "change" + trigger: "input" } ] }); const formRef = ref(); const formData = ref({}); 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 = () => { positions.value.push({ lng: "", lat: "", alt: "" }); @@ -233,12 +182,12 @@ const confirmSubmit = () => { return; } requestData = { ...requestData, ...positions.value[0] }; - if (props.title == "新增点坐标效果") { + if (props.title == "新增模型") { const res: any = await gltfModelAdd(requestData); if (res.code == 200) { ElMessage.success("操作成功"); } - } else if (props.title == "编辑点坐标效果") { + } else if (props.title == "编辑模型") { const res: any = await gltfModelEdit(requestData); if (res.code == 200) { ElMessage.success("操作成功"); @@ -260,10 +209,10 @@ watch( () => props.operateVisible, n => { if (n) { - if (props.title == "新增点坐标效果") { + if (props.title == "新增模型") { formData.value = {}; positions.value = [{ lng: "", lat: "", alt: "" }]; - } else if (props.title == "编辑点坐标效果") { + } else if (props.title == "编辑模型") { getInfo(); } visible1.value = n; diff --git a/src/views/jxjview/modelManagement/index.vue b/src/views/jxjview/modelManagement/index.vue index 4573378..a6bf325 100644 --- a/src/views/jxjview/modelManagement/index.vue +++ b/src/views/jxjview/modelManagement/index.vue @@ -33,7 +33,12 @@ - + @@ -67,13 +72,13 @@ const columns: ColumnProps[] = [ label: "ID" }, // 多级 prop - { prop: "createTime", label: "名称", search: { el: "input" } }, - { prop: "createTime", label: "是否显示" }, - { prop: "createTime", label: "lon经度" }, - { prop: "createTime", label: "lat纬度" }, - { prop: "governmentTel", label: "高度" }, - { prop: "state", label: "创建时间" }, - { prop: "diffDay", label: "更新时间" }, + { prop: "name", label: "名称", search: { el: "input" } }, + { prop: "show", label: "是否显示" }, + { prop: "lng", label: "lon经度" }, + { prop: "lat", label: "lat纬度" }, + { prop: "alt", label: "高度" }, + { prop: "createTime", label: "创建时间" }, + { prop: "updateTime", label: "更新时间" }, { prop: "operation", label: "操作", fixed: "right", width: 160 } ]; // const AuthIdData = ref([]);