1.整理颜色选择器

2.防区管理新增操作后，可使用EarthComp地球组件实现绘画

src/components/earthMap/Toolbar.vue

@@ -4,7 +4,7 @@
       :title="title"
       :width="65"
       :minWidth="65"
-      :height="520"
+      :height="all? 600 : 380"
       :left="0"
       :top="0"
       @cancel="cancel"
@@ -30,6 +30,7 @@
           <img id="measureImg" :src="celiang" />
         </p>
         <p title="二三维转换" class="tb-img-p" @click="twoTothreeD"><img :src="twothreeDchange" /></p>
+        <div v-if="all">
           <p title="添加模型" class="tb-img-p" @click="openPopModal('addPopModal', $event)">
           <img :src="specialEffects" />
         </p>
@@ -45,6 +46,8 @@
           <img :src="drawShapeMilitaryIMG" />
         </p>
         </div>
+        
+      </div>
     </Window>
     <div id="measurePopModal" class="popModal">
       <ul>
@@ -148,6 +151,7 @@
     props: {
       flyTo: Function,
       setLabelStatus: Function,
+      all: Boolean,
     },
     components: {
       Window,
@@ -231,7 +235,7 @@
       });
 
       onMounted(() => {
-        // console.log("asdsdfsdfsdfsdfsdf");
+        // console.log("toolbar初始化");
         getEventData();
         window.getEventData = getEventData;
         {
@@ -259,6 +263,12 @@
             drawShapeShow.value = res.show;
             drawShapePackage.value = res;
           });
+           //调用创建/编辑区域 addArea方法
+          $mitt.on('addAreaHandler', function (res: any) {
+            // console.log("addAreaHandlerres",res);
+            addArea(res)
+          });
+
         }
         //数据绑定
         //disposers 用来收集资源销毁函数，并在析构时自动调用！
@@ -1086,8 +1096,10 @@
       function addRadar() {
         addRadarComShow.value = true;
       }
-      // 添加区域
+      // 添加区域, addAreaHandler标识 后台区域管理调用
-      function addArea() {
+      function addArea(addAreaHandler = null) {
+        // console.log("添加区域",addAreaHandler);
+        
         $mitt.emit('drawShapeShow', { show: true, title: '区域创建工具', from: 'addArea' });
         $mitt.on('addAreaFinished', (t: any) => {
           // console.log('addAreaFinished', t);
@@ -1119,7 +1131,7 @@
                *
                */
               nextTick(() => {
-                addPolyline(positions);
+                addPolyline(positions,addAreaHandler);
               });
             } else {
             }
@@ -1132,8 +1144,9 @@
       }
       /**
        * @params 需要调用 addArea 方法进行绘图，获取坐标点position
+       * @params addAreaHandler标识 后台区域管理调用
        */
-      function addPolyline(positions: any = null) {
+      function addPolyline(positions: any = null, addAreaHandler =null) {
         // console.log('positions', positions);
 
         // 关闭此窗体
@@ -1149,6 +1162,12 @@
         // console.log('currentModel', currentModel);
         // 获取地图ui对象
         const earthUI = window.$uia;
+        // console.log("addAreaHandler",addAreaHandler);
+        //后台区域管理调用，直接return终止
+        if(addAreaHandler){
+          $mitt.emit('toMsMapLineForm',currentModel)
+          return
+        }
         // 打开一个区域编辑ui窗体
         earthUI.showPropertyWindow(currentModel);
         nextTick(() => {
@@ -1337,6 +1356,9 @@
         window._uavRealTimePath = undefined;
         window._uavPrimitive = undefined;
         $mitt.off('warnInfoMan');
+        $mitt.off('addAreaFinished');
+        $mitt.off('drawShapeShow');
+        $mitt.off('addAreaHandler');
       });
 
       return {
@@ -1423,7 +1445,7 @@
   .barbox {
     left: 0 !important;
     top: 0 !important;
-    height: 600px !important;
+    /* height: 600px !important; */
     width: 65px !important;
   }
 

src/utils/earthMap/listenMouseHandlerSence.ts

@@ -30,7 +30,7 @@ export default function listenMouseHandlerSence(enablePointer = false, that) {
   viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
     window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
   );
-  console.log("enablePointer", enablePointer);
+  // console.log("enablePointer", enablePointer);
 
   if (enablePointer) {
     viewer.cesiumWidget.screenSpaceEventHandler.setInputAction((event) => {

src/views/earthMap/edit/EarthComp.vue

@@ -68,7 +68,7 @@
     />
 
     <!-- 左侧操作栏 -->
-    <Toolbar v-if="toolbarShow" :setLabelStatus="setLabelStatus"></Toolbar>
+    <Toolbar v-if="toolbarShow" :setLabelStatus="setLabelStatus" :all="this.all"></Toolbar>
     <!-- 左下角显隐控件 -->
     <ShowHideControl v-if="toolbarShow"></ShowHideControl>
     <AddModelWin
@@ -151,6 +151,7 @@
   import circleDot2 from '@/assets/earthMap/circleDot2.png';
   import circleDot1 from '@/assets/earthMap/circleDot1.png';
   import circleDot3 from '@/assets/earthMap/circleDot3.png';
+import { nextTick } from 'vue';
 
   const { createMessage } = useMessage();
   function setClassEl(setClassEl1, setClassEl2, checked) {
@@ -297,16 +298,21 @@
         type: Boolean,
         default: false,
       },
-      //场景管理点击
+      //后台场景管理点击
       enablePointer: {
         type: Boolean,
         default: false,
       },
-      //场景管理点击事件监听
+      //后台场景管理点击事件监听
       listenMouseHandlerSenceOpen: {
         type: Boolean,
         default: false,
       },
+       //后台区域管理事件
+       addAreaHandler: {
+        type: Boolean,
+        default: false,
+      },
     },
   })
   export default class EarthComp extends Vue {
@@ -536,6 +542,17 @@
       this.cameraModalShow = false;
     }
 
+    //区域编辑
+    areaHandler(){
+      // 取消双击旋转事件
+      window.$viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
+        window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
+      );
+      this.$nextTick(() => {
+        $mitt.emit('addAreaHandler', this.addAreaHandler);
+      })
+    }
+
     // 控制子元素的显示或者隐藏
     showOrHideChild(clickNode, earthUI, parentChecked) {
       const childs = clickNode.children;
@@ -719,6 +736,11 @@
           this.cameraPositionChange(this);
         });
 
+        // 飞入方法
+        await this.fly();
+        //创建工具栏
+        this.toolbarShow = true;
+
         //加载地图实时资源（无人机、车辆、人员、巡逻路线等）
         // createRealTimeObj(earthUI)
 
@@ -729,15 +751,12 @@
 
         //监听mitt
         if (this.PropsListenMittHandlerOpen) this.listenMittHandler();
-
-        // 飞入方法
-        await this.fly();
-
         //加载地图线路资源
         if (this.PropsCreateBBHLineOpen) await this.createBBHLine();
 
-        //创建工具栏
+        //使用后台区域管理事件 绘制区域等操作
-        this.toolbarShow = true;
+        if (this.addAreaHandler) this.areaHandler()
+      
       });
     }
 

src/views/military/modules/earthMap/camera/components/MsCameraSiteForm.vue

@@ -35,6 +35,21 @@
             </a-form-item>
           </a-col>
 
+          <!-- <a-modal title="点位设置" :visible="mapVisible" @ok="earthMapOk" @cancel="destroyed" width="60vw" destroyOnClose
+            wrapClassName="EarthMap">
+            <a-row style="height: 60vh;">
+              <a-col :span="24">
+                <EarthComp 
+                  ref="earth" 
+                  @customFly="moveChinaPosition"
+                  :hasMoveMethod="subObject && subObject.id ? true : false"
+                  :enablePointer="true"
+                  :listenMouseHandlerSenceOpen="true"
+                  @checkPosition="checkPositionCache"
+                  />
+              </a-col>
+            </a-row>
+          </a-modal> -->
           <EarthMapModal
             ref="earthMapModal"
             :enableTile="false"
@@ -46,7 +61,7 @@
             "
             @checkPosition="checkPosition"
             :hasMoveMethod="true"
-            @moveChinaPosition="moveChinaPosition"
+          
             :editTileModel="mapModel"
             initModeType="3D"
             :enable-pointer="false"
@@ -99,6 +114,8 @@
   import EarthMapModal from '@/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue';
   import locationPng from '@/assets/images/getLocation.png';
   import { useUserStore } from '/@/store/modules/user';
+  import EarthComp from '@/views/earthMap/edit/EarthComp.vue';
+
   const userStore = useUserStore();
   const lineSelect: any = ref([]);
   const props = defineProps({
@@ -292,10 +309,24 @@
     // window.earth.camera.position = [CMath.toRadians(formData.longitude) - 0.000001, CMath.toRadians(formData.latitude) - 0.000001, CMath.toRadians(formData.height) - 0.000001];
     // window.earth.camera.rotation = [CMath.toRadians(formData.yaw), CMath.toRadians(formData.pitch), CMath.toRadians(formData.roll)]
   };
+
+
+const earth = ref()
+function destroyed() {
+  // console.log("earth", earth.value);
+  earth.value.destroy();
+  nextTick(() => {
+    mapVisible.value = false
+  })
+
+}
+
   defineExpose({
     add,
     edit,
     submitForm,
+    earth,
+    destroyed
   });
 </script>
 

src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue

@@ -5,7 +5,8 @@
         <a-col :span="12">
           <a-form-item label="所属区域" v-bind="validateInfos.sceneId">
             <!-- <a-input v-model:value="formData.sceneId" placeholder="请选择所属区域" :disabled="disabled"></a-input> -->
-            <ApiTreeSelect :api="sceneIdTree" v-model:value="formData.sceneId" placeholder="请选择所属区域" :disabled="disabled"></ApiTreeSelect>
+            <ApiTreeSelect :api="sceneIdTree" v-model:value="formData.sceneId" placeholder="请选择所属区域" :disabled="disabled">
+            </ApiTreeSelect>
           </a-form-item>
         </a-col>
         <a-col :span="12">
@@ -81,6 +82,11 @@
               :disabled="disabled" />
           </a-form-item>
         </a-col>
+        <a-col :span="12">
+          <a-form-item label="绘制区域">
+            <div class="centerText"><img :src="locationPng" class="dwImg" @click="mapShow" /></div>
+          </a-form-item>
+        </a-col>
         <a-col :span="12">
           <a-form-item label="位置" v-bind="validateInfos.positions">
             <a-textarea v-model:value="formData.positions" :rows="4" placeholder="请输入位置" :disabled="disabled" />
@@ -88,6 +94,16 @@
         </a-col>
       </a-row>
     </a-form>
+
+
+    <a-modal title="绘制区域" :visible="mapVisible" @cancel="destroyed" width="60vw" destroyOnClose wrapClassName="EarthMap">
+      <a-row style="height: 60vh;">
+        <a-col :span="24">
+          <EarthComp ref="earth" :addAreaHandler=true />
+        </a-col>
+      </a-row>
+    </a-modal>
+
   </a-spin>
 </template>
 
@@ -104,15 +120,22 @@ import { Form } from 'ant-design-vue';
 import { ColorPicker } from "vue3-colorpicker";
 import "vue3-colorpicker/style.css";
 import { useUserStore } from '/@/store/modules/user';
+import EarthComp from '@/views/earthMap/edit/EarthComp.vue';
+import locationPng from '@/assets/images/getLocation.png';
+import $mitt from '@/utils/earthMap/mitt';
+import { onBeforeUnmount } from 'vue';
+import { toRaw } from 'vue';
 const userStore = useUserStore();
 
 //远程树
 const sceneIdTree = () => defHttp.get<Recordable[]>
-({ url: "/military/msMapScene/queryTreeByCode", 
+  ({
-  params:{
+    url: "/military/msMapScene/queryTreeByCode",
+    params: {
       sceneId: userStore.userInfo?.sceneId + "*"
-  } }).then(res=>{ return [res];})
+    }
-;
+  }).then(res => { return [res]; })
+  ;
 
 const props = defineProps({
   formDisabled: { type: Boolean, default: false },
@@ -149,7 +172,7 @@ const validatorRules = {
   materialType: [{ required: true, message: '请选择模型材质类型!' },],
   interpolation: [{ required: true, message: '请选择插值方式!' },],
   color: [{ required: true, message: '请输入颜色!' },],
-  intervalColor: [{ required: true, message: '请输入间隔颜色!' },],
+  // intervalColor: [{ required: true, message: '请输入间隔颜色!' },],
   cycleFrame: [{ required: true, message: '请输入循环周期!' },],
   isLoop: [{ required: true, message: '请选择是否首尾相连!' },],
   isDepthCheck: [{ required: true, message: '请选择是否深度检测!' },],
@@ -239,20 +262,31 @@ function edit(record) {
     //赋值
     Object.assign(formData, record);
     if (formData.color) {
-      let color = formData.color
+      colorPickerChange(formData.color,pureColor)
-      color = color.replace("[", '')
+      // let color = formData.color
-      color = color.replace("]", '')
+      // color = color.replace("[", '')
-      color = color.split(",")
+      // color = color.replace("]", '')
-      pureColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] }
+      // color = color.split(",")
+      // pureColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] }
     }
     if (formData.intervalColor) {
-      let color = formData.intervalColor
+      colorPickerChange(formData.intervalColor,intervalColor)
+      // let color = formData.intervalColor
+      // color = color.replace("[", '')
+      // color = color.replace("]", '')
+      // color = color.split(",")
+      // intervalColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] }
+    }
+  });
+}
+
+//整理颜色选择器
+function colorPickerChange(color, colorStr) {
+  // console.log('colorStr',colorStr);
   color = color.replace("[", '')
   color = color.replace("]", '')
   color = color.split(",")
-      intervalColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] }
+  colorStr.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] }
-    }
-  });
 }
 
 /**
@@ -293,11 +327,113 @@ async function submitForm() {
     });
 }
 
+// 弹窗地图框属性
+const mapVisible = ref(false);
+const mapShow = function () {
+  mapVisible.value = true;
+};
+const earth = ref()
+function destroyed() {
+  // console.log("earth", earth.value);
+  earth.value.destroy();
+  nextTick(() => {
+    mapVisible.value = false
+  })
+}
+
+//赋值
+function areaAssign(currentModel) {
+  // 模型名称
+  // formData.name = currentModel.name
+  // 线段编码
+  formData.lineCode = currentModel.guid
+  // 首尾相连属性
+  formData.isLoop = Number(currentModel.loop)
+  // 深度检查
+  formData.isDepthCheck = Number(currentModel.depthTest)
+  // 宽度
+  formData.width = currentModel.width
+  // 插值方式
+  formData.interpolation = currentModel.arcType
+  // 路径数组
+  formData.positions = JSON.stringify(currentModel.positions)
+  // 材质类型
+  switch (currentModel.material.type) {
+    // 实线
+    case 'XbsjColorMaterial':
+      // 实线材质0
+      formData.materialType = 0;
+      // 线段颜色
+      formData.color = JSON.stringify(currentModel.material.XbsjColorMaterial.color);
+      // 以下为没有属性，所以赋予默认值
+      formData.intervalColor = null;
+      formData.dashLength = 0;
+      formData.dashStyle = 0;
+      break;
+    // 虚线
+    case 'XbsjPolylineDashMaterial':
+      // 虚线材质1
+      formData.materialType = 1;
+      // 线段颜色
+      formData.color = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.color);
+      // 间隔颜色
+      formData.intervalColor = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.gapColor);
+      // 虚线长度
+      formData.dashLength = currentModel.material.XbsjPolylineDashMaterial.dashLength;
+      // 虚线样式
+      formData.dashStyle = currentModel.material.XbsjPolylineDashMaterial.dashPattern;
+      break;
+    // 箭头线
+    case 'XbsjPolylineArrowMaterial':
+      // 箭头线2
+      formData.materialType = 2;
+      // 线段颜色
+      formData.color = JSON.stringify(currentModel.material.XbsjPolylineArrowMaterial.color);
+      // 以下为没有的属性
+      formData.intervalColor = null;
+      formData.dashLength = 0;
+      formData.dashStyle = 0;
+      break;
+    // 轨迹线
+    case 'XbsjODLineMaterial':
+      // 轨迹线
+      formData.materialType = 3;
+      // 线段颜色
+      formData.color = JSON.stringify(currentModel.material.XbsjODLineMaterial.color);
+      // 没有的属性
+      formData.intervalColor = null;
+      formData.dashLength = 0;
+      formData.dashStyle = 0;
+      // 循环周期
+      formData.cycleFrame = currentModel.material.XbsjODLineMaterial.totoalFrameCount;
+      break;
+  }
+  //赋值颜色选择器
+  colorPickerChange(formData.color,pureColor)
+  if(formData.intervalColor)
+    colorPickerChange(formData.intervalColor,intervalColor)
+}
+onMounted(() => {
+  $mitt.on('toMsMapLineForm', (currentModel: any) => {
+    // console.log("currentModel", currentModel);
+    //赋值
+    areaAssign(currentModel)
+  })
+})
+
+onBeforeUnmount(() => {
+  $mitt.off('toMsMapLineForm');
+})
+
 
 defineExpose({
   add,
   edit,
   submitForm,
+  mapShow,
+  earth,
+  destroyed,
+
 });
 </script>
 
@@ -307,4 +443,11 @@ defineExpose({
   overflow-y: auto;
   padding: 24px 24px 24px 24px;
 }
+
+.dwImg {
+  width: 10%;
+  height: 10%;
+  margin-left: 3%;
+  cursor: pointer !important;
+}
 </style>

src/views/military/modules/earthMap/msMapLine/components/MsMapLineModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+  <a-modal destroyOnClose :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
     <MsMapLineForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></MsMapLineForm>
   </a-modal>
 </template>
@@ -58,6 +58,7 @@
    */
   function handleCancel() {
     visible.value = false;
+    
   }
 
   defineExpose({

src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue

@@ -358,6 +358,7 @@ const cssGrab = function (e) {
 const addContainerClickListen = function () {
   const dom = document.getElementById("earthContainer");
   dom.addEventListener("mousedown", cssGrab, true)
+  // dom.addEventListener("mouseup", cssGrab)
 }
 // 模型跟随鼠标
 const modelFollowMouse = (event) => {
@@ -398,6 +399,7 @@ const listenMouseHandler = function () {
   viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
     window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
   );
+  // handler.setInputAction(modelFollowMouse, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
   if (enablePointer.value) {
     viewer.cesiumWidget.screenSpaceEventHandler.setInputAction((event) => {
@@ -470,7 +472,9 @@ const listenMouseHandler = function () {
       cursorCss.value = `grab`
     }, 2000);
   }, window.Cesium.ScreenSpaceEventType.WHEEL);
-
+  // window.earth.onclick = function () {
+  //   console.log(1);
+  // }
 }
 //添加地图上的监听事件-选取区域
 const listenMouseHandlerSelect = function () {
@@ -692,6 +696,12 @@ const destroyCache = function () {
   modelDw.value = false;
   enableTile.value = false;
 
+  // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+  // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOWN)
+  // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_UP)
+  // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
+  // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.MIDDLE_UP)
+  // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.WHEEL)
 
   CModel.value && CModel.value.destroy();
   earth && earth.destroy();