长光卫星地图,航线管理迁移,样式修改
parent
fdb579d42b
commit
5b79174956
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width:100%;height: calc( 100vh - 80px);" >
|
||||
<Map :workPlanFormShow="workPlanFormShow" :airRoute="airRoute" @exitDraw="exitDraw" @flyToThere="flyToThere" :wayline="wayline" :waylineInfo="waylineInfo"></Map>
|
||||
</div>
|
||||
|
||||
<!-- 航线库 -->
|
||||
<div v-if="ariLineShow" style="width:566px;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
||||
<airLineList :title="'航线管理'" @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine"></airLineList>
|
||||
</div>
|
||||
|
||||
<!-- 新建航线 -->
|
||||
<div v-if="createAirLineShow" style="width:566px;background:#0d0e15c1 ;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
||||
<createAirLine @createAirLine="handlerCreateAirRoute" @cancle="cancleCreateAirLine"></createAirLine>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {ref,watch} from 'vue';
|
||||
import airLineList from '../workplan/components/airLineList.vue';
|
||||
import createAirLine from '../workplan/components/createAirLine.vue'
|
||||
import Map from '../workplan/components/map.vue'
|
||||
import AirPolygon from './components/airPolygon.vue';
|
||||
import {getAirLine} from '@/api/sys/workplan';
|
||||
|
||||
import JSZip from 'jszip';
|
||||
import axios from 'axios';
|
||||
|
||||
import { XMLParser, XMLBuilder } from 'fast-xml-parser';
|
||||
|
||||
const airRoute = ref({})
|
||||
|
||||
const flyToTherePosition = ref({
|
||||
lng:null,
|
||||
lat:null,
|
||||
alt:null,
|
||||
})
|
||||
|
||||
|
||||
const flyToThere = (e)=>{
|
||||
console.log(e);
|
||||
}
|
||||
const planListShow = ref(true);
|
||||
const workPlanFormShow = ref(false);
|
||||
const ariLineShow = ref(true);
|
||||
const aircraftShow = ref(false);
|
||||
const createAirLineShow = ref(false);
|
||||
|
||||
const selectAriLine = ()=> {
|
||||
ariLineShow.value = true;
|
||||
aircraftShow.value = false;
|
||||
}
|
||||
|
||||
const selectAircraft = ()=>{
|
||||
aircraftShow.value = true;
|
||||
ariLineShow.value = false;
|
||||
}
|
||||
|
||||
const cancleCraete = ()=>{
|
||||
workPlanFormShow.value = false;
|
||||
ariLineShow.value = false;
|
||||
aircraftShow.value = false;
|
||||
planListShow.value = true;
|
||||
}
|
||||
|
||||
const checkedAriLine = ref({});
|
||||
|
||||
const checkAriLine = (item)=>{
|
||||
if(item){
|
||||
ariLineShow.value = false;
|
||||
checkedAriLine.value = item;
|
||||
}
|
||||
}
|
||||
|
||||
const checkedDronePort = ref({});
|
||||
|
||||
const checkDronePort = (item)=>{
|
||||
if(item){
|
||||
aircraftShow.value = false;
|
||||
checkedDronePort.value = item;
|
||||
}
|
||||
}
|
||||
|
||||
const formData = ref(null);
|
||||
|
||||
const toCreateWorkPlan = (data)=> {
|
||||
formData.value = data;
|
||||
planListShow.value = false;
|
||||
workPlanFormShow.value = true;
|
||||
}
|
||||
|
||||
// 创建航线
|
||||
const handlerCreateAirLine = ()=>{
|
||||
createAirLineShow.value = true;
|
||||
}
|
||||
|
||||
const cancleCreateAirLine = ()=>{
|
||||
createAirLineShow.value = false;
|
||||
}
|
||||
|
||||
const handlerCreateAirRoute = (info)=>{
|
||||
console.log("info",info);
|
||||
workPlanFormShow.value = false;
|
||||
ariLineShow.value = false;
|
||||
aircraftShow.value = false;
|
||||
planListShow.value = false;
|
||||
createAirLineShow.value = false;
|
||||
airRoute.value = info
|
||||
}
|
||||
|
||||
|
||||
const successCreatePlan = ()=>{
|
||||
workPlanFormShow.value = false;
|
||||
ariLineShow.value = false;
|
||||
aircraftShow.value = false;
|
||||
planListShow.value = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 保存航线后退出
|
||||
const exitDraw = ()=>{
|
||||
planListShow.value = false;
|
||||
workPlanFormShow.value = true;
|
||||
ariLineShow.value = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 预览航线
|
||||
const wayline = ref({});
|
||||
const waylineInfo = ref(null)
|
||||
const previewAirLine =async (line,type) => {
|
||||
let info =await getAirLine({airLineId:type.value?.id});
|
||||
if(info){
|
||||
wayline.value = line;
|
||||
waylineInfo.value = info;
|
||||
}
|
||||
}
|
||||
|
||||
// 查看航线详情
|
||||
const planDetail =async (item) => {
|
||||
formData.value = item;
|
||||
console.log("formData",formData.value?.airLineId);
|
||||
|
||||
let info =await getAirLine({airLineId : formData.value?.airLineId});
|
||||
if(info){
|
||||
// wayline.value = line;
|
||||
waylineInfo.value = info;
|
||||
wayline.value = await airLineDetail(info);
|
||||
}
|
||||
|
||||
workPlanFormShow.value = true;
|
||||
}
|
||||
|
||||
|
||||
// 获取wpml文件
|
||||
|
||||
const currentPreviewWayLine = ref(null);
|
||||
|
||||
const airLineDetail =async (item) => {
|
||||
|
||||
currentPreviewWayLine.value = item;
|
||||
|
||||
try{
|
||||
let response = await axios.get(item.wpml,{responseType: 'arraybuffer'});
|
||||
// 解压kmz文件
|
||||
let xmlStr =await extractKmz(response.data);
|
||||
let xmlData = xmlStr.replace(/wpml:/g,"");
|
||||
const parser = new XMLParser();
|
||||
const jsonObj = parser.parse(xmlData);
|
||||
return jsonObj.kml.Document;
|
||||
|
||||
}catch(e){
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 解压航线文件
|
||||
const extractKmz = async (kmzBlob)=>{
|
||||
|
||||
const zip = new JSZip();
|
||||
|
||||
const contents = await zip.loadAsync(kmzBlob);
|
||||
|
||||
// 查找.wmpl文件
|
||||
for (const [filename, file] of Object.entries(contents.files)) {
|
||||
if (filename.toLowerCase().endsWith('.wpml')) {
|
||||
return await file.async('text');
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error('KMZ文件中未找到WMPL文件');
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue