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

src/components/earthMap/Toolbar.vue

@@ -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,

src/components/earthMap/toolbar/DrawShape.vue

@@ -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,7 +322,15 @@ function draw(type: String = '') {
             console.log("错误");
             break;
     }
-    return editUI(t)
+    //判断是否被创建区域组件调用，有则返回实体 t，交给调用组件处理
+    if (props.drawShapePackage &&
+        props.drawShapePackage.from &&
+        props.drawShapePackage.from == 'addArea') {
+            $mitt.emit('addAreaFinished', t)
+        return
+    }
+    else
+        return editUI(t)
 }
 
 function cancel() {

src/components/earthMap/toolbar/DrawShapeMilitary.vue

@@ -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>
@@ -59,7 +64,7 @@
                     <p class="tb-img-p" title="三角旗帜" @click="draw('GeoTriFlag')">
                         <img :src="triFlag" alt="三角旗帜" />
                     </p>
-                   
+
                     <!-- <p class="tb-img-p" title="圆" @click="drawCircle">
                         <img :src="circle" 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值