功能添加

suerprisePlus

2024-06-13 28de79b44655118b1deffb5c9a8b06ec2904905b

 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(); //先new 一个读文件的对象 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>