飞行标注-全功能完成版

src/views/demo/workmanagement/flightannotation/index.vue

@@ -18,6 +18,7 @@
         @setNowShowAnnotationData="setNowShowAnnotationData"
         @setAllAnnotationData="setAllAnnotationData"
         @deleteAnnotation="deleteAnnotation"
+        @treeDataShowOrHide="treeDataShowOrHide"
       />
     </div>
     <!-- 地图 -->
@@ -29,6 +30,7 @@
         :nowShowAnnotationData="nowShowAnnotationData"
         @setNowShowAnnotationData="setNowShowAnnotationData"
         @setAllAnnotationData="setAllAnnotationData"
+        :treeDataShowOrHideList="treeDataShowOrHideList"
       />
     </div>
     <!-- 地图标注 -->
@@ -154,6 +156,12 @@
     });
   }
 
+  // 项目级别的显示或者隐藏
+  const treeDataShowOrHideList = ref([]);
+  function treeDataShowOrHide(value) {
+    treeDataShowOrHideList.value = value;
+  }
+
   // 移动位置
   function handlerLocation(position) {
     pathMapRef.value.handlerLocation([position.lng, position.lat]);

src/views/demo/workmanagement/flightannotation/pathAnnotationInfo.vue

@@ -433,8 +433,8 @@
   // 移动到中心位置
   function handlerLocation() {
     emits('handlerLocation', {
-      lng: parseFloat(props.nowShowAnnotationData.coordinates[0]),
+      lng: parseFloat(props.nowShowAnnotationData.properties.centerPoint[0]),
-      lat: parseFloat(props.nowShowAnnotationData.coordinates[1]),
+      lat: parseFloat(props.nowShowAnnotationData.properties.centerPoint[1]),
     });
   }
   // 删除此标注
@@ -507,9 +507,6 @@
         heightlist.push(item[2]);
       });
       heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2);
-      console.log(horizontalArea.value);
-      console.log(horizontalPerimeter.value);
-      console.log(heightDiff.value);
     }
   }
   defineExpose({

src/views/demo/workmanagement/flightannotation/pathLeftMenu.vue

@@ -45,11 +45,19 @@
                     style="color: #ffffff; font-size: 16px"
                   />
                 </div>
-                <div
+                <span
                   :class="dataRef.mouse ? 'title_mouse' : 'title_nomouse'"
                   @click="setNowShowAnnotationData(dataRef)"
                 >
                   {{ dataRef.title }}
+                </span>
+                <div class="buttonSwitch" v-if="dataRef.children">
+                  <a-switch
+                    v-model:checked="dataRef.showOrHide"
+                    checked-children="显示"
+                    un-checked-children="隐藏"
+                    @change="changeWorkSpaceShowOrHide"
+                  />
                 </div>
                 <div class="buttonRight2" v-if="!dataRef.children && dataRef.mouse">
                   <a-tooltip placement="top">
@@ -122,7 +130,9 @@
     'setNowShowAnnotationData',
     'setAllAnnotationData',
     'deleteAnnotation',
+    'treeDataShowOrHide',
   ]);
+
   const showMenuInfoName = ref('地图标注');
 
   function updateShowMenuInfoList(type) {
@@ -135,10 +145,40 @@
   function changeLeftMenuShow() {
     emits('changeLeftMenuShow');
   }
+  // 项目级别的显示或者隐藏
+  function changeWorkSpaceShowOrHide() {
+    treeDataShowOrHideList = [];
+    treeData.value.forEach((tree) => {
+      treeDataShowOrHideList.push({
+        id: tree.key,
+        showOrHide: tree.showOrHide,
+      });
+    });
+    let showIdList: any = [];
+    treeDataShowOrHideList.map((item) => {
+      if (item.showOrHide) {
+        showIdList.push(item.id);
+      }
+    });
+    emits('treeDataShowOrHide', showIdList);
+  }
+  // 查找项目级别的显示或者隐藏
+  function getShowOrHide(id) {
+    if (treeDataShowOrHideList.length > 0) {
+      const item = treeDataShowOrHideList.find((item) => item.id === id);
+      return item ? item.showOrHide : true;
+    } else {
+      return true;
+    }
+  }
 
   // 地图标注-搜索
   const treeData: any = ref([]);
+  // 记录项目级别的显示或者隐藏
+  let treeDataShowOrHideList: any = [];
+  // 展开
   const expandedKeys: any = ref([]);
+  // 搜索
   const searchValue = ref('');
   function handleChangeAnnotationSearch() {
     treeData.value = [];
@@ -150,6 +190,7 @@
       treeData.value.push({
         key: item.Id,
         title: item.WorkspaceName,
+        showOrHide: getShowOrHide(item.Id),
         children: [],
       });
     });
@@ -159,7 +200,6 @@
     let allAnnotationDataList = props.allAnnotationDataList.sort((a, b) => {
       return dayjs(a.createTime) - dayjs(b.createTime);
     });
-
     allAnnotationDataList.forEach((annotation) => {
       treeData.value.forEach((tree) => {
         if (tree.key == annotation.workSpaceId) {
@@ -178,6 +218,7 @@
       });
     }
   }
+
   // 地图标注-删除标注
   function deleteAnnotation(show) {
     show.deleteClickNum = 0;
@@ -219,21 +260,28 @@
 
   // 移动到中心位置
   function handlerLocation(position) {
-    if (showMenuInfoName.value == '地图标注') {
+    emits('handlerLocation', {
-      if (position.geomtype == 'Circle') {
+      lng: parseFloat(position.properties.centerPoint[0]),
-        emits('handlerLocation', {
+      lat: parseFloat(position.properties.centerPoint[1]),
-          lng: parseFloat(position.coordinates[0]),
+    });
-          lat: parseFloat(position.coordinates[1]),
-        });
-      } else {
-        emits('handlerLocation', {
-          lng: parseFloat(position.coordinates[0]),
-          lat: parseFloat(position.coordinates[1]),
-        });
-      }
-    }
   }
 
+  watch(
+    () => props.nowShowAnnotationData,
+    () => {
+      treeData.value.forEach((tree) => {
+        tree.children?.forEach((t) => {
+          if (t.id == props.nowShowAnnotationData.id) {
+            t.title = props.nowShowAnnotationData.name;
+          }
+        });
+      });
+    },
+    {
+      deep: true,
+    },
+  );
+
   defineExpose({
     updateShowMenuInfoList,
   });
@@ -288,6 +336,7 @@
         .leftMenuContent_tree {
           overflow-y: auto;
           max-height: 750px;
+          width: 100%;
         }
       }
     }
@@ -305,6 +354,7 @@
     gap: 5px;
 
     .eye {
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -312,20 +362,31 @@
       height: 20px;
     }
     .title_mouse {
+      position: relative;
       width: 135px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
     .title_nomouse {
+      position: relative;
       width: 170px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
+    .buttonSwitch {
+      position: absolute;
+      right: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 20px;
+    }
     .buttonRight2 {
       position: absolute;
-      right: -15px;
+      right: 30px;
       width: 20px;
       height: 20px;
       display: flex;
@@ -334,7 +395,7 @@
     }
     .buttonRight1 {
       position: absolute;
-      right: -35px;
+      right: 5px;
       width: 20px;
       height: 20px;
       display: flex;
@@ -363,13 +424,16 @@
   ::v-deep .ant-tree {
     color: #ffffff !important;
   }
-
+  ::v-deep .ant-tree-treenode {
+    width: 100% !important;
+  }
+  ::v-deep .ant-tree-node-content-wrapper {
+    width: 100% !important;
+  }
   ::v-deep .ant-tree-switcher {
     color: #ffffff !important;
   }
   ::v-deep .ant-tree-node-selected {
     background: #25384c !important;
   }
-
-  //
 </style>

src/views/demo/workmanagement/flightannotation/pathMap.vue

@@ -174,6 +174,7 @@
     'allAnnotationDataList',
     'allWorkspaceDataList',
     'nowShowAnnotationData',
+    'treeDataShowOrHideList',
   ]);
   const emits = defineEmits(['setNowShowAnnotationData', 'setAllAnnotationData']);
 
@@ -591,6 +592,41 @@
       deep: true,
     },
   );
+  watch(
+    () => props.treeDataShowOrHideList,
+    () => {
+      let tempGraphicLayerList = [
+        // 点
+        ...annotation_PointGraphicData,
+        // 线
+        ...annotation_LineStringGraphicData,
+        // 多边形
+        ...annotation_PolygonGraphicData,
+        // 圆
+        ...annotation_CircleGraphicData,
+      ];
+      tempGraphicLayerList?.forEach((graphicLayer) => {
+        if (props.treeDataShowOrHideList.includes(graphicLayer.options.workSpaceId)) {
+          graphicLayer.setStyle({
+            show: graphicLayer.options.state == 0 ? true : false,
+            outline: graphicLayer.options.state == 0 ? true : false,
+            label: {
+              show: graphicLayer.options.state == 0 ? true : false,
+            },
+          });
+        } else {
+          graphicLayer.setStyle({
+            show: false,
+            outline: false,
+            label: {
+              show: false,
+            },
+          });
+        }
+      });
+    },
+  );
+
   // 地图标注-初始化-遍历展示
   const showAllAnnotationDataList = async () => {
     // 删除旧数据
@@ -693,6 +729,8 @@
               },
               show: item.state == 0 ? true : false,
               hasEdit: true,
+              state: item.state,
+              workSpaceId: item.workSpaceId,
             });
             // 监听mouseover事件
             pointGraphic.on(mars3d.EventType.mouseOver, function () {
@@ -773,6 +811,8 @@
           show: item.state == 0 ? true : false,
           hasEdit: true,
           drawShowMeasure: true,
+          state: item.state,
+          workSpaceId: item.workSpaceId,
         });
         // 监听mouseover事件
         lineGraphic.on(mars3d.EventType.mouseOver, function () {
@@ -897,6 +937,8 @@
           show: item.state == 0 ? true : false,
           hasEdit: true,
           drawShowMeasure: true,
+          state: item.state,
+          workSpaceId: item.workSpaceId,
         });
         // 监听mouseover事件
         polygonGraphic.on(mars3d.EventType.mouseOver, function () {
@@ -1025,6 +1067,8 @@
           show: item.state == 0 ? true : false,
           hasEdit: true,
           drawShowMeasure: true,
+          state: item.state,
+          workSpaceId: item.workSpaceId,
         });
         // 监听mouseover事件
         circleGraphic.on(mars3d.EventType.mouseOver, function () {