From 28de79b44655118b1deffb5c9a8b06ec2904905b Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期四, 13 六月 2024 17:38:24 +0800
Subject: [PATCH] 功能添加
---
src/views/Synthesis.vue | 296 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 288 insertions(+), 8 deletions(-)
diff --git a/src/views/Synthesis.vue b/src/views/Synthesis.vue
index 1f634e3..78002b6 100644
--- a/src/views/Synthesis.vue
+++ b/src/views/Synthesis.vue
@@ -7,37 +7,311 @@
-->
<template>
<div class="MapBox">
- <div class="banner"
- :class="{ leftMap: screenFlag }">
+ <div class="banner" :class="{ leftMap: screenFlag }">
<div id="cesiumContainer"></div>
</div>
- <div class="leftMap"
- v-if="screenFlag">
+ <div class="leftMap" v-if="screenFlag">
<div id="cesiumContainer2"></div>
</div>
<!-- 鍥惧眰绠＄悊 -->
- <layer-manager v-show="store.state.layerFlag == 'layerManage'"></layer-manager>
+ <layer-manager
+ ref="layerManaget"
+ v-show="store.state.layerFlag == 'layerManage'"
+ ></layer-manager>
<!-- 椤堕儴鑿滃崟 -->
<layer-menu></layer-menu>
<!-- 鍙冲嚮鑿滃崟浜嬩欢 -->
<rightMenuLayer v-show="store.state.rightMeuFlag"></rightMenuLayer>
<!-- 鍐涗簨鏍囩粯 -->
- <military-plotting-layer v-if="store.state.layerFlag == 'militaryPlot'"></military-plotting-layer>
+ <military-plotting-layer
+ v-if="store.state.layerFlag == 'militaryPlot'"
+ ></military-plotting-layer>
+ <!-- 椋炶瀹氫綅 -->
+ <flyPlan ref="flyPlanet" v-show="store.state.setFlyPlanFlag"></flyPlan>
</div>
+ <!-- 娣诲姞鍥惧眰 -->
+ <el-dialog
+ v-model="store.state.setAddEntityList.flag"
+ :title="store.state.setAddEntityList.title"
+ width="700"
+ :before-close="handleClose"
+ >
+ <div v-if="store.state.setAddEntityList.type === 1">
+ <el-form>
+ <el-form-item label="鍥惧眰鍚嶇О">
+ <el-input size="small" v-model="layerFrom.name" />
+ </el-form-item>
+ <el-form-item label="鍥惧眰绫诲瀷">
+ <el-select size="small" v-model="layerFrom.sourceType">
+ <el-option label="3DTiles" value="3DTiles" />
+ <el-option label="WMS" value="WMS" />
+ <el-option label="TMS" value="TMS" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍥惧眰鍦板潃">
+ <el-input size="small" v-model="layerFrom.url" />
+ </el-form-item>
+ </el-form>
+ </div>
+ <div v-else-if="store.state.setAddEntityList.type === 2">
+ <el-form>
+ <el-form-item label="鍚嶇О">
+ <el-input size="small" v-model="entityFrom.name" />
+ </el-form-item>
+ <el-form-item label="缁忓害" v-show="entityFlag">
+ <el-input size="small" v-model="entityFrom.lon" />
+ </el-form-item>
+ <el-form-item label="绾害" v-show="entityFlag">
+ <el-input size="small" v-model="entityFrom.lat" />
+ </el-form-item>
+ <el-form-item label="楂樺害" v-show="entityFlag">
+ <el-input size="small" v-model="entityFrom.alt" />
+ </el-form-item>
+ <el-form-item label="heading" v-show="entityFlag">
+ <el-input size="small" v-model="entityFrom.heading" />
+ </el-form-item>
+ <el-form-item label="pitch" v-show="entityFlag">
+ <el-input size="small" v-model="entityFrom.pitch" />
+ </el-form-item>
+ <el-form-item label="roll" v-show="entityFlag">
+ <el-input size="small" v-model="entityFrom.roll" />
+ </el-form-item>
+ <el-form-item label="鍋滅暀鏃堕暱(s)" v-show="entityFlag">
+ <el-input size="small" v-model="entityFrom.time" />
+ </el-form-item>
+ </el-form>
+ </div>
+ <div v-else-if="store.state.setAddEntityList.type === 3">
+ <el-form>
+ <el-form-item>
+ <el-radio-group v-model="importFrom.type" class="ml-4">
+ <el-radio value="1" size="large">鍦ㄧ嚎鍦板潃</el-radio>
+ <el-radio value="2" size="large">鏈湴鏂囦欢</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item v-show="importFrom.type == '1'">
+ <el-input v-model="importFrom.url"></el-input>
+ </el-form-item>
+ <el-form-item v-show="importFrom.type == '2'">
+ <div style="width: 100%">
+ <el-row :gutter="10">
+ <el-col :span="20">
+ <el-input disabled v-model="importFrom.file"></el-input>
+ <input
+ type="file"
+ style="display: none"
+ ref="inputFile"
+ id="inputFile"
+ accept=".json"
+ @change="getFileData"
+ />
+ </el-col>
+ <el-col :span="4">
+ <el-button type="primary" plain @click="uploadMaterial()">
+ <el-icon><Files /></el-icon>
+ </el-button>
+ </el-col>
+ </el-row>
+ </div>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="dialogButton">
+ <div>
+ <el-button type="primary" size="small" @click="handleSubmite"
+ >鎻愪氦</el-button
+ >
+ <el-button size="small" @click="handleClose">鍙栨秷</el-button>
+ </div>
+ </div>
+ </el-dialog>
</template>
<script lang="ts" setup>
+import flyPlan from "./../components/map/flyPlan.vue";
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
-import store from "@/store";
+import { useStore } from "vuex";
import mapView from "../assets/js/mapView.js";
import layerManager from "@/components/map/layerManager.vue";
import layerMenu from "@/components/map/layerMenu.vue";
import rightMenuLayer from "@/components/map/rightMenuLayer";
import militaryPlottingLayer from "@/components/map/militaryPlottingLayer";
-const data = ref([]);
+import configTool from "../assets/js/tool/configTool";
+import { Files } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+import axios from "axios";
+const dialogVisible = ref(true);
+const store = useStore();
+const layerFrom = ref({
+ name: "",
+ sourceType: "3DTiles",
+ url: ""
+});
+
+const entityFrom = ref({
+ name: "",
+ lon: "",
+ lat: "",
+ alt: "",
+ heading: "",
+ pitch: "",
+ roll: "",
+ time: 0
+});
+const importFrom = ref({
+ type: "1",
+ url: "",
+ file: "",
+ obj: null
+});
+const layerManaget = ref();
+const flyPlanet = ref();
+const entityFlag = ref(false);
+const inputFile = ref();
+const handleClose = () => {
+ store.state.setAddEntityList = {
+ flag: false,
+ title: "",
+ type: 0
+ };
+ importFrom.value = {
+ type: "1",
+ url: "",
+ file: "",
+ obj: null
+ };
+ layerFrom.value = {
+ name: "",
+ sourceType: "3DTiles",
+ url: ""
+ };
+ entityFrom.value = {
+ name: "",
+ lon: "",
+ lat: "",
+ alt: "",
+ heading: "",
+ pitch: "",
+ roll: "",
+ time: 0
+ };
+};
+const uploadMaterial = () => {
+ document.getElementById("inputFile").click();
+};
+const getFileData = (val) => {
+ const flie = val.target;
+
+ const file_type = flie.files[0].type;
+ if (file_type != "application/json") {
+ return ElMessage("鏁版嵁鏂囦欢閫夋嫨閿欒锛岃閫夋嫨*.josn鏍煎紡鏂囦欢");
+ }
+ importFrom.value.file = flie.files[0].name;
+
+ let reader = new FileReader(); //鍏坣ew 涓�涓鏂囦欢鐨勫璞� FileReader
+ if (typeof FileReader === "undefined") {
+ //鐢ㄦ潵鍒ゆ柇浣犵殑娴忚鍣ㄦ槸鍚︽敮鎸� FileReader
+ ElMessage("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔鏂囦欢璇诲彇銆�");
+ return;
+ }
+ // reader.readAsArrayBuffer(file.raw); //璇讳换鎰忔枃浠�
+ reader.readAsText(flie.files[0], "UTF-8");
+ reader.onload = (obj) => {
+ if (obj && obj.target && obj.target.result) {
+ const file_string = obj.target.result;
+ importFrom.value.obj = JSON.parse(file_string);
+ console.log(importFrom.value);
+
+ } else {
+ ElMessage("鏁版嵁璇诲彇澶辫触銆�");
+ }
+ };
+};
+const handleSubmite = () => {
+ const list = store.state.setAddEntityList;
+ if (list.type == 1) {
+ layerManaget.value.addGeometry(layerFrom.value);
+ } else if (list.type == 2) {
+ if (entityFlag.value) {
+ if(list.title=="鑺傜偣淇敼"){
+ const obj ={...entityFrom.value};
+ flyPlanet.value.addEntityData(obj)
+ }else{
+ flyPlanet.value.addEntityData({
+ name: entityFrom.value.name,
+ lon: entityFrom.value.lon,
+ lat: entityFrom.value.lat,
+ alt: entityFrom.value.alt,
+ heading: entityFrom.value.heading,
+ pitch: entityFrom.value.pitch,
+ roll: entityFrom.value.roll,
+ time: entityFrom.value.time,
+ flag: 2
+ });
+ }
+
+ } else {
+ flyPlanet.value.addEntityData({
+ name: entityFrom.value.name,
+ flag: 1
+ });
+ }
+ } else if (list.type == 3) {
+ const res = importFrom.value;
+ if (res.type == "1") {
+ axios.get(res.url).then((obj) => {
+ if (obj.status == 200) {
+ setInsertPost(obj.data, list.title);
+ }
+ });
+ } else {
+ setInsertPost(res.obj, list.title);
+ }
+ }
+ handleClose();
+};
+const setInsertPost = (res, label) => {
+ const obj = {
+ value: res,
+ flag: 3
+ };
+ if (label == "鏁版嵁瀵煎叆") {
+ flyPlanet.value.addEntityData(obj);
+ } else {
+ layerManaget.value.addGeometry(obj);
+ }
+};
onMounted(() => {
mapView.init();
});
+watch(
+ () => store.state.setAddEntityList,
+ (nVal, oVal) => {
+ if (nVal && nVal.flag) {
+ if (nVal.title === "鑺傜偣娣诲姞") {
+ const obj = configTool.getViewerCamera();
+ entityFrom.value = {
+ name: "",
+ lon: obj.lon,
+ lat: obj.lat,
+ alt: obj.alt,
+ heading: obj.heading,
+ pitch: obj.pitch,
+ roll: obj.roll,
+ time: 100
+ };
+ entityFlag.value = true;
+ }else if(nVal.title === "鑺傜偣淇敼"){
+ entityFrom.value= store.state.setAddEntityList.editData
+
+
+ entityFlag.value = true;
+ } else {
+ entityFlag.value = false;
+ }
+ }
+ }
+);
onBeforeUnmount(() => {});
</script>
<style scoped lang="less">
@@ -46,6 +320,7 @@
height: 100%;
display: flex;
justify-content: space-between;
+ position: absolute;
.banner {
width: 100%;
height: 100vh;
@@ -115,4 +390,9 @@
height: 0px;
}
}
+.dialogButton {
+ width: 100%;
+ display: flex;
+ justify-content: end;
+}
</style>
--
Gitblit v1.9.3