<!--
|
* @Description:
|
* @Author: TT
|
* @Date: 2023-02-27 11:30:56
|
* @LastEditTime: 2023-03-06 15:19:16
|
* @LastEditors: TT
|
-->
|
<template>
|
<div class="MapBox">
|
<div class="banner" :class="{ leftMap: screenFlag }">
|
<div id="cesiumContainer"></div>
|
</div>
|
<div class="leftMap" v-if="screenFlag">
|
<div id="cesiumContainer2"></div>
|
</div>
|
<!-- 图层管理 -->
|
<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>
|
<!-- 飞行定位 -->
|
<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 { 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";
|
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">
|
.MapBox {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
position: absolute;
|
.banner {
|
width: 100%;
|
height: 100vh;
|
background-size: cover;
|
}
|
.leftMap {
|
width: 50%;
|
height: 100vh;
|
background-size: cover;
|
#cesiumContainer {
|
width: 50%;
|
position: absolute;
|
}
|
#cesiumContainer2 {
|
width: 50%;
|
position: absolute;
|
}
|
}
|
.boxContent {
|
padding: 10px;
|
top: 2%;
|
left: 1%;
|
background: url("../assets/img/menu/listbg.png") no-repeat;
|
background-size: 100% 100%;
|
transform: translate(-50%, -50%);
|
position: absolute;
|
z-index: 40;
|
}
|
.closeLeftMenu {
|
color: #fff;
|
height: 20px;
|
width: 20px;
|
|
cursor: pointer;
|
transition: 1s;
|
float: right;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.closeLeftMenu:hover {
|
cursor: pointer;
|
transform: rotateZ(90deg);
|
}
|
.popContent {
|
width: 100%;
|
color: white;
|
font-family: Source Han Sans CN;
|
font-size: 14px;
|
margin-bottom: 10px;
|
}
|
.popContent1 {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
color: white;
|
font-family: Source Han Sans CN;
|
font-size: 16px;
|
align-items: center;
|
}
|
#cesiumContainer2 {
|
height: 100vh;
|
}
|
hr {
|
height: 0px;
|
}
|
}
|
.dialogButton {
|
width: 100%;
|
display: flex;
|
justify-content: end;
|
}
|
</style>
|
