Fuyuu
/
dt-admin-pc-v2
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

地图创建区域需要与绘画组件融合

master
DIAMOND 9 months ago
parent
76930447fc
commit
7cfc07c70e
4 changed files with 1403 additions and 1324 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/components/earthMap/Toolbar.vue
  2. 274
      src/components/earthMap/toolbar/AddModelWin.vue
  3. 32
      src/components/earthMap/toolbar/DrawShape.vue
  4. 11
      src/components/earthMap/toolbar/DrawShapeMilitary.vue

14
src/components/earthMap/Toolbar.vue
View File

@ -95,7 +95,7 @@
<KeyControlAreaList v-if="keyControlAreaListShow"></KeyControlAreaList>
<NotificationModel v-if="notificationModelShow"></NotificationModel>
<WarnList v-if="WarnListShow"></WarnList>
<DrawShape v-if="drawShapeShow"></DrawShape>
<DrawShape v-if="drawShapeShow" :drawShapePackage="drawShapePackage"></DrawShape>
<DrawShapeMilitary v-if="drawShapeMilitaryShow"></DrawShapeMilitary>
</div>
</template>
@ -131,6 +131,7 @@
import { defHttp } from '/@/utils/http/axios';
import $ from 'jquery';
import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage';
import TestCom from './TestCom.vue';
@ -154,6 +155,7 @@
const { proxy }: any = getCurrentInstance();
// const { userInfo } = useUserStore();
const userStore = useUserStore();
const { createMessage } = useMessage();
let _viewer = ref();
let show = ref(true);
let modalVisible = ref(false);
@ -179,6 +181,7 @@
const notificationModelShow = ref(false);
const WarnListShow = ref(false);
const drawShapeShow = ref(false);
const drawShapePackage = ref(null);
const drawShapeMilitaryShow = ref(false);
//计算属性
@ -235,6 +238,11 @@
$mitt.on('warnInfoMan', function () {
warnInfoMan();
});
//调用绘画组件，res.show为展示状态,res为传递数据
$mitt.on('drawShapeShow', function (res:any) {
drawShapeShow.value = res.show;
drawShapePackage.value = res
});
}
//数据绑定
//disposers 用来收集资源销毁函数，并在析构时自动调用！
@ -946,6 +954,8 @@
//绘画图形
function drawShape() {
//清空数据
drawShapePackage.value = null
drawShapeShow.value = !drawShapeShow.value;
}
//绘画图形-军事态势
@ -1019,7 +1029,6 @@
// $mitt.emit('windowCancel')
// com = addModelWin
// console.log("proxy");
addModelWinShow.value = true;
break;
case 'roamPathList':
@ -1138,6 +1147,7 @@
notificationModelShow,
WarnListShow,
drawShapeShow,
drawShapePackage,
drawShapeMilitaryShow,
drawShapeMilitaryIMG,
test,

274
src/components/earthMap/toolbar/AddModelWin.vue
View File

@ -1,18 +1,7 @@
<template>
<div class="create-model-modal" v-if="winVisible">
<Window
:title="title"
@cancel="cancel"
@ok="ok"
:width="width"
:minWidth="600"
:height="height"
:left="left"
:top="top"
:floatright="false"
:footervisible="true"
v-show="!creating"
>
<Window :title="title" @cancel="cancel" @ok="ok" :width="width" :minWidth="600" :height="height" :left="left"
:top="top" :floatright="false" :footervisible="true" v-show="!creating">
<div style="display: flex" class="custom-item" v-if="!isUpdateModel">
<label class="custom-label">模型类型:</label>
<div class="custom-item-box">
@ -23,7 +12,8 @@
<div style="display: flex" class="custom-item">
<label class="custom-label">名称:</label>
<div class="custom-item-box">
<input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" />
<input v-model="name" class="name-input" style="height: 90%; width: 100%"
@change="nameChange(currentModel)" />
</div>
</div>
<div style="display: flex" class="custom-item">
@ -38,14 +28,8 @@
<!-- <XbsjSlider style="margin-top: 16px" :min="0" :max="256" :step="1" showTip="always"
v-model="minimumPixelSize">
</XbsjSlider> -->
<a-slider
v-model:value="minimumPixelSize"
:min="0"
:max="256"
:step="1"
:tooltipVisible="true"
v-if="currentModel && currentModel.xbsjType == 'Model'"
/>
<a-slider v-model:value="minimumPixelSize" :min="0" :max="256" :step="1" :tooltipVisible="true"
v-if="currentModel && currentModel.xbsjType == 'Model'" />
</div>
</div>
<div style="display: flex" class="custom-item">
@ -71,28 +55,19 @@
</div>
</div>
<div style="display: flex; align-items: center; justify-content: center" class="custom-item">
<button
@click="modelState('creating')"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
:disabled="creating"
style="width: 20%"
>
<button @click="modelState('creating')"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
style="width: 20%">
拾取
</button>
<button
@click="currentModel.positionEditing = true"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
:disabled="creating"
style="width: 20%"
>
<button @click="currentModel.positionEditing = true"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
style="width: 20%">
移动
</button>
<button
@click="modelState('rotationEditing')"
<button @click="modelState('rotationEditing')"
:class="['xbsj-button', 'edit-model-btn', !currentModel || rotationEditing ? 'edit-model-btn-disable' : '']"
:disabled="rotationEditing"
style="width: 20%"
>
:disabled="rotationEditing" style="width: 20%">
旋转
</button>
</div>
@ -101,7 +76,8 @@
<div style="display: flex" class="custom-item">
<label class="custom-label">名称:</label>
<div class="custom-item-box">
<input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" />
<input v-model="name" class="name-input" style="height: 90%; width: 100%"
@change="nameChange(currentModel)" />
</div>
</div>
<div style="display: flex" class="custom-item">
@ -126,7 +102,8 @@
<label class="custom-label">上传图标:</label>
<div class="custom-item-box">
<div class="upload-box">
<upload v-model:file="uploadFile" :pre-view-url="previewImgUrl" :isUpdateModel="isUpdateModel" ref="pinIconUpload" />
<upload v-model:file="uploadFile" :pre-view-url="previewImgUrl" :isUpdateModel="isUpdateModel"
ref="pinIconUpload" />
</div>
</div>
</div>
@ -164,20 +141,14 @@
</div>
</div>
<div style="display: flex; justify-content: center" class="custom-item">
<button
@click="modelState('creating')"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
:disabled="creating"
style="width: 20%; display: flex; align-items: center; justify-content: center"
>
<button @click="modelState('creating')"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
style="width: 20%; display: flex; align-items: center; justify-content: center">
拾取
</button>
<button
@click="currentModel.editing = true"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
:disabled="creating"
style="width: 20%; display: flex; align-items: center; justify-content: center"
>
<button @click="currentModel.editing = true"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
style="width: 20%; display: flex; align-items: center; justify-content: center">
移动
</button>
</div>
@ -186,7 +157,8 @@
<div style="display: flex" class="custom-item">
<label class="custom-label">名称:</label>
<div class="custom-item-box">
<input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" />
<input v-model="name" class="name-input" style="height: 90%; width: 100%"
@change="nameChange(currentModel)" />
</div>
</div>
<div style="display: flex" class="custom-item">
@ -211,7 +183,8 @@
<label class="custom-label">上传图标:</label>
<div class="custom-item-box">
<div class="upload-box">
<upload v-model:file="uploadFile" :pre-view-url="previewImgUrl" :isUpdateModel="isUpdateModel" ref="pinIconUpload" />
<upload v-model:file="uploadFile" :pre-view-url="previewImgUrl" :isUpdateModel="isUpdateModel"
ref="pinIconUpload" />
</div>
</div>
</div>
@ -225,20 +198,14 @@
</div>
</div>
<div style="display: flex; justify-content: center" class="custom-item">
<button
@click="modelState('creating')"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
:disabled="creating"
style="width: 20%; display: flex; align-items: center; justify-content: center"
>
<button @click="modelState('creating')"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
style="width: 20%; display: flex; align-items: center; justify-content: center">
拾取
</button>
<button
@click="currentModel.editing = true"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
:disabled="creating"
style="width: 20%; display: flex; align-items: center; justify-content: center"
>
<button @click="currentModel.editing = true"
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
style="width: 20%; display: flex; align-items: center; justify-content: center">
移动
</button>
</div>
@ -249,19 +216,20 @@
</template>
<script lang="ts">
import { onBeforeUnmount, watchEffect, onMounted, nextTick, defineComponent, ref, getCurrentInstance, computed, watch } from 'vue';
import xbsjScale from '/@/components/earthMap/components/xbsjScale.vue';
import XbsjSelect from '/@/components/earthMap/components/XbsjSelect.vue';
import XbsjColorButton from '/@/components/earthMap/components/XbsjColorButton.vue';
import upload from '/@/components/earthMap/components/upload.vue';
import Window from '@/components/earthMap/components/Window.vue';
import { useUserStore } from '/@/store/modules/user';
import { defHttp } from '/@/utils/http/axios';
// import mitt from '/@/utils/mitt';
import $mitt from '@/utils/earthMap/mitt';
import $ from 'jquery';
import { addModel, addPin, addViewShed, addViewShedRadar } from '@/utils/earthMap/earthObj';
export default defineComponent({
import { onBeforeUnmount, watchEffect, onMounted, nextTick, defineComponent, ref, getCurrentInstance, computed, watch } from 'vue';
import xbsjScale from '/@/components/earthMap/components/xbsjScale.vue';
import XbsjSelect from '/@/components/earthMap/components/XbsjSelect.vue';
import XbsjColorButton from '/@/components/earthMap/components/XbsjColorButton.vue';
import upload from '/@/components/earthMap/components/upload.vue';
import Window from '@/components/earthMap/components/Window.vue';
import { useUserStore } from '/@/store/modules/user';
import { defHttp } from '/@/utils/http/axios';
// import mitt from '/@/utils/mitt';
import $mitt from '@/utils/earthMap/mitt';
import { useMessage } from '/@/hooks/web/useMessage';
import $ from 'jquery';
import { addModel, addPin, addViewShed, addViewShedRadar } from '@/utils/earthMap/earthObj';
export default defineComponent({
name: 'AddModelWin',
components: { xbsjScale, XbsjSelect, upload, XbsjColorButton, Window },
props: {
@ -312,6 +280,7 @@
},
setup(props, ctx) {
const { proxy }: any = getCurrentInstance();
const { createMessage } = useMessage();
// const $mitt = mitt();
const userStore = useUserStore();
@ -457,6 +426,10 @@
watch(selectModel, (newVal, oldVal) => {
// console.log("selectModel",newVal);
// debugger
/**
* 防止重复打开drawShape组件，所以每次变更选项时，都进行关闭操作
*/
$mitt.emit('drawShapeShow', { show: false })
// 更新状态，什么也不做
if (isUpdateModel.value) {
return;
@ -491,7 +464,9 @@
currentModel.value = addModel();
// console.log(" currentModel.value", currentModel.value);
} else if (selectModel.value.value === 'qy') {
currentModel.value = addPolyline();
currentModel.value = addArea();
// currentModel.value = addPolyline();
// console.log(" currentModel.value", currentModel.value);
} else {
currentModel.value = addPin();
@ -550,7 +525,10 @@
onBeforeUnmount(() => {
//组件销毁前 关闭mitt
$mitt.emit('drawShapeShow', { show: false })
$mitt.off('windowCancel');
$mitt.off('addAreaFinished');
});
// 取消方法
function cancel() {
@ -718,11 +696,67 @@
}
// 创建区域
function addPolyline() {
/**
* @abstract 需要调用 drawShape组件 进行绘图，提取当中的坐标点position
* 处理完数据再使用 addPolyline方法 window.XE.Obj.Polyline 创建线段
*
* @abstract
* $mitt.emit('drawShapeShow') 打开drawShape组件显示
* @abstract
* $mitt.emit('addAreaFinished') 接受传回来的临时图形
*/
function addArea() {
$mitt.emit('drawShapeShow', { show: true, title: '创建区域工具', from: 'addArea' })
$mitt.on("addAreaFinished", (t: any) => {
console.log("addAreaFinished", t);
//t 为drawShape传过来的临时图形
t.creating = true;
// 监控t数据，完成创建后调用后续方法
window.XE.MVVM.watch(t, 'creating', (n: any) => {
console.log("creating", n);
if (n == false) {
//面
let positions: any = []
if (t._polygon) {
positions = t._polygon._polyline.positions
}
//线
else if (t._polyline) {
positions = t._polyline.positions
}
else {
positions = t.positions
// console.error("图形错误");
}
//销毁临时图形
t.destroy()
/**
* 控制时序，处理完数据再调用方法 addPolyline
* 否则会出现在数据滞后在图形创建时，导致数据错误
*
*/
nextTick(() => { addPolyline(positions); })
}
})
})
}
/**
* @params 需要调用 addArea 方法进行绘图，获取坐标点position
*/
function addPolyline(positions: any = null) {
// 关闭此窗体
cancel();
// 创建区域
const currentModel = new window.XE.Obj.Polyline(window.$earth);
// 设置配置参数
const objConfig = {
positions: positions,
}
// 插入数据
currentModel.xbsjFromJSON(objConfig);
console.log("currentModel", currentModel);
// 获取地图ui对象
const earthUI = window.$uia;
// 打开一个区域编辑ui窗体
@ -1473,6 +1507,7 @@
bindPinProps,
addPin,
addPolyline,
addArea,
modelState,
submitModel,
nameChange,
@ -1487,25 +1522,25 @@
uploadFileCount,
};
},
});
});
</script>
<style scoped>
:deep(.custom-item-box > div > input) {
:deep(.custom-item-box > div > input) {
width: 45% !important;
margin-right: 0% !important;
}
}
:deep(.custom-item-box) {
:deep(.custom-item-box) {
padding-left: 5% !important;
width: 80% !important;
}
}
:deep(.xbsjselect) {
:deep(.xbsjselect) {
height: 100% !important;
}
}
:deep(.xbsjselect-selectdiv) {
:deep(.xbsjselect-selectdiv) {
left: 0px !important;
top: 0px !important;
height: 90% !important;
@ -1514,67 +1549,68 @@
line-height: 0% !important;
justify-content: space-between !important;
padding-left: 5px !important;
}
}
:deep(.xbsjselect-selectButton) {
:deep(.xbsjselect-selectButton) {
margin-top: 0%;
}
}
:deep(.custom-label) {
:deep(.custom-label) {
width: 15% !important;
display: flex;
align-items: center;
justify-content: flex-end;
color: #ffffff;
}
}
:deep(.custom-item) {
:deep(.custom-item) {
height: 8%;
margin-top: 2%;
}
}
:deep(.xbsjselect-selectOption) {
:deep(.xbsjselect-selectOption) {
width: 100% !important;
min-height: auto !important;
}
}
.edit-model-btn {
.edit-model-btn {
cursor: pointer;
line-height: 5%;
}
}
.edit-model-btn-disable {
.edit-model-btn-disable {
cursor: not-allowed;
}
}
.object-box {
.object-box {
width: 100%;
height: 86%;
label {
color: #ffffff;
}
}
}
.container-box {
.container-box {
width: 100%;
height: 100%;
}
}
:deep(.object-box .custom-item) {
:deep(.object-box .custom-item) {
height: 10%;
margin-top: 2%;
}
}
.Mask {
.Mask {
width: 100%;
height: 80%;
position: absolute;
top: 10%;
left: 0%;
display: block;
}
}
.name-input {
.name-input {
height: 90%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
@ -1583,9 +1619,9 @@
color: #ddd;
padding: 5px;
outline: none;
}
}
.xyz-input {
.xyz-input {
height: 90%;
width: 30%;
background: rgba(0, 0, 0, 0.5);
@ -1594,15 +1630,15 @@
color: #ddd;
padding: 5px;
outline: none;
}
}
.y-margin {
.y-margin {
margin-left: 5%;
margin-right: 5%;
}
}
.upload-box {
.upload-box {
height: 100%;
width: 20%;
}
}
</style>

32
src/components/earthMap/toolbar/DrawShape.vue
View File

@ -15,6 +15,9 @@
</template>
<a-collapse-panel key="1" header="线" :style="customStyle">
<div class="toolBoxImg">
<p class="tb-img-p" title="实线" @click="draw('Polyline')">
<img :src="solidLine" alt="实线" />
</p>
<p class="tb-img-p" title="圆弧" @click="draw('GeoArc')">
<img :src="arc" alt="圆弧" />
</p>
@ -30,9 +33,7 @@
<!-- <p class="tb-img-p" title="曲线箭头" @click="drawCurveArrow">
<img :src="curveArrow" alt="曲线箭头" />
</p> -->
<p class="tb-img-p" title="实线" @click="draw('Polyline')">
<img :src="solidLine" alt="实线" />
</p>
</div>
</a-collapse-panel>
<a-collapse-panel key="2" header="面" :style="customStyle">
@ -227,6 +228,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
drawShapePackage: {
type: Object,
default: null,
},
});
const { proxy }: any = getCurrentInstance();
@ -237,6 +242,19 @@ const activeKey = ref(['1', '2']);
const customStyle = 'background: rgb(255 255 255 / 0%);border-radius: 4px;border: 0;overflow: hidden';
const earthUI = window.$uia // 获取地图ui对象
let title = ref(props.title)
onMounted(() => {
//处理选取区域操作
if (props.drawShapePackage != null) {
console.log("绘画组件正在调用", props.drawShapePackage);
if (props.drawShapePackage.title != null)
//赋值标题title
title.value = props.drawShapePackage.title
}
})
function draw(type: String = '') {
let t = null
switch (type) {
@ -304,6 +322,14 @@ function draw(type: String = '') {
console.log("错误");
break;
}
//判断是否被创建区域组件调用，有则返回实体 t，交给调用组件处理
if (props.drawShapePackage &&
props.drawShapePackage.from &&
props.drawShapePackage.from == 'addArea') {
$mitt.emit('addAreaFinished', t)
return
}
else
return editUI(t)
}

11
src/components/earthMap/toolbar/DrawShapeMilitary.vue
View File

@ -40,9 +40,14 @@
<p class="tb-img-p" title="曲线箭头" @click="draw('GeoCurveArrow')">
<img :src="curveArrow" alt="曲线箭头" />
</p>
<p class="tb-img-p" title="单次箭头" @click="draw('GeoSimpleArrow')">
<!-- //排除单次箭头
/**
* 报错Reaction doesn't converge to a stable state after 100 iterations.
* Probably there is a cycle in the reactive function: Reaction
/ -->
<!-- <p class="tb-img-p" title="单次箭头" @click="draw('GeoSimpleArrow')">
<img :src="simpleArrow" alt="单次箭头" />
</p>
</p> -->
<p class="tb-img-p" title="平尾箭头" @click="draw('GeoArrow')">
<img :src="flatArrow" alt="平尾箭头" />
</p>
@ -394,8 +399,10 @@ function saveInStore(obj: any) {
function editUI(obj: any, objConfig: any = null) {
console.log("obj", obj);
obj.creating = true;
// if (obj.showType == "forkedTail") return
earthUI.showPropertyWindow(obj)
nextTick(() => {
// 主要ui窗口
const mainUI = earthUI._vm.$refs.mainUI
// 所有打开的ui窗口Ref值

Write Preview
Loading…
Cancel
Save