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

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/AddModelWin.vue

@@ -1,18 +1,7 @@
 <template>
   <div class="create-model-modal" v-if="winVisible">
-    <Window
+    <Window :title="title" @cancel="cancel" @ok="ok" :width="width" :minWidth="600" :height="height" :left="left"
-      :title="title"
+      :top="top" :floatright="false" :footervisible="true" v-show="!creating">
-      @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
+            <a-slider v-model:value="minimumPixelSize" :min="0" :max="256" :step="1" :tooltipVisible="true"
-              v-model:value="minimumPixelSize"
+              v-if="currentModel && currentModel.xbsjType == 'Model'" />
-              :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
+          <button @click="modelState('creating')"
-            @click="modelState('creating')"
+            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
-            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
+            style="width: 20%">
-            :disabled="creating"
-            style="width: 20%"
-          >
             拾取
           </button>
-          <button
+          <button @click="currentModel.positionEditing = true"
-            @click="currentModel.positionEditing = true"
+            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
-            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
+            style="width: 20%">
-            :disabled="creating"
-            style="width: 20%"
-          >
             移动
           </button>
-          <button
+          <button @click="modelState('rotationEditing')"
-            @click="modelState('rotationEditing')"
             :class="['xbsj-button', 'edit-model-btn', !currentModel || rotationEditing ? 'edit-model-btn-disable' : '']"
-            :disabled="rotationEditing"
+            :disabled="rotationEditing" style="width: 20%">
-            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
+          <button @click="modelState('creating')"
-            @click="modelState('creating')"
+            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
-            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
+            style="width: 20%; display: flex; align-items: center; justify-content: center">
-            :disabled="creating"
-            style="width: 20%; display: flex; align-items: center; justify-content: center"
-          >
             拾取
           </button>
-          <button
+          <button @click="currentModel.editing = true"
-            @click="currentModel.editing = true"
+            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
-            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
+            style="width: 20%; display: flex; align-items: center; justify-content: center">
-            :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
+          <button @click="modelState('creating')"
-            @click="modelState('creating')"
+            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
-            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
+            style="width: 20%; display: flex; align-items: center; justify-content: center">
-            :disabled="creating"
-            style="width: 20%; display: flex; align-items: center; justify-content: center"
-          >
             拾取
           </button>
-          <button
+          <button @click="currentModel.editing = true"
-            @click="currentModel.editing = true"
+            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" :disabled="creating"
-            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
+            style="width: 20%; display: flex; align-items: center; justify-content: center">
-            :disabled="creating"
-            style="width: 20%; display: flex; align-items: center; justify-content: center"
-          >
             移动
           </button>
         </div>
@@ -259,6 +226,7 @@
 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({
@@ -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,
@@ -1550,6 +1585,7 @@
 .object-box {
   width: 100%;
   height: 86%;
+
   label {
     color: #ffffff;
   }

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,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)
 }
 

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