实时标绘 显示隐藏标注名称

src/hooks/AMap/useAMap.ts

@@ -696,10 +696,12 @@ export function useAMap(options) {
         marker._opts.extData = {
           id: item.id
         };
-        marker.setLabel({
-          content: '<div>' + item.title + '</div>',
-          direction: 'top'
-        });
+        if (item.showLabel) {
+          marker.setLabel({
+            content: '<div>' + item.title + '</div>',
+            direction: 'top'
+          });
+        }
         map.add(marker);
         res.push(marker);
       }

src/utils/olMap/olMap.ts

@@ -1283,7 +1283,8 @@ export class olMap {
         }),
         fill: new Fill({
           color: rgbToRgba(data.fillColor, data.fillOpacity)
-        })
+        }),
+        text: this.getLabelStyle(data)
       })
     );
     this.drawVector.getSource().addFeature(feature);
@@ -1300,7 +1301,8 @@ export class olMap {
         }),
         fill: new Fill({
           color: rgbToRgba(data.fillColor, data.fillOpacity)
-        })
+        }),
+        text: this.getLabelStyle(data)
       })
     );
     this.drawVector.getSource().addFeature(feature);
@@ -1317,7 +1319,8 @@ export class olMap {
         }),
         fill: new Fill({
           color: rgbToRgba(data.fillColor, data.fillOpacity)
-        })
+        }),
+        text: this.getLabelStyle(data)
       })
     );
     this.drawVector.getSource().addFeature(feature);
@@ -1463,7 +1466,6 @@ export class olMap {
         const marker = new Feature({
           // 必须是数字类型，字符串不识别
           geometry: new Point([item.longitude, item.latitude]),
-          // name: item.name,
           // icon: item.icon,
           // imageHover: item.imageHover,
           // size: item.size,
@@ -1482,16 +1484,7 @@ export class olMap {
               size: [width, height],
               scale: !!item.size[0] ? item.size[0] / width : 1
             }),
-            text: new Text({
-              text: item.name,
-              fill: new Fill({
-                color: '#000'
-              }),
-              stroke: new Stroke({
-                color: '#fff',
-                width: 3
-              })
-            })
+            text: this.getLabelStyle(item)
           });
           marker.setStyle(style);
         };
@@ -1502,6 +1495,19 @@ export class olMap {
     });
     return res;
   }
+  // 获取标签样式
+  getLabelStyle(item) {
+    return new Text({
+      text: item.showLabel && item.title ? item.title : '',
+      fill: new Fill({
+        color: '#000'
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 3
+      })
+    })
+  }
   getVectorLayer() {
     return this.vectorLayer;
   }

src/views/globalMap/RightMenu/OnlinePlotting/LayerDetail.vue

@@ -18,9 +18,9 @@
         </el-select>
       </div>
       <div class="box-right">
-        <div class="btn1">
+        <div class="btn1" @click="handleShowAnnotationName">
           <i class="icon3" />
-          显示标注
+          {{ !showAnnotationName ? '显示标注' : '隐藏标注' }}
         </div>
         <div class="btn1" style="margin-left: 10px" @click="handleShowImportLayer">
           <i class="icon4" />
@@ -48,7 +48,9 @@
           <div class="td" :title="item.dept_name">{{ item.dept_name }}</div>
           <div class="td" :title="item.create_time">{{ item.create_time }}</div>
           <div class="td" style="display: flex; align-items: center; justify-content: center">
-            <div v-if="item.group_name !== '默认分组'" class="btn-text" style="margin-right: 20px" @click="handleDeleteGroup(item.group_id)">删除</div>
+            <div v-if="item.group_name !== '默认分组'" class="btn-text" style="margin-right: 20px" @click="handleDeleteGroup(item.group_id)">
+              删除
+            </div>
             <div v-if="item.group_name !== '默认分组'" class="btn-text" style="margin-right: 20px" @click="handleShowGroup(item.group_id)">编辑</div>
             <div class="btn-text" @click="handleVisible(item)">{{ item.visible !== '0' ? '隐藏' : '显示' }}</div>
           </div>
@@ -78,10 +80,11 @@ import EditGroup from './EditGroup.vue';
 import CollaborativeUser from './CollaborativeUser.vue';
 const props = defineProps({
   modelValue: Boolean,
-  patternId: String
+  patternId: String,
+  showAnnotationName: Boolean
 });
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emits = defineEmits(['update:modelValue', 'handleSendData']);
+const emits = defineEmits(['update:modelValue', 'handleSendData', 'showAnnotationNameChange']);
 let type = ref('');
 let typeOptions = ref([
   { label: '全部', value: '' },
@@ -94,7 +97,6 @@ let queryParams = reactive({
   pattern_id: props.patternId
 });
 let dataList = ref([]);
-
 let showGroup = ref(false);
 let groupId = ref('');
 const handleShowGroup = (id) => {
@@ -135,6 +137,11 @@ const handleShowUser = () => {
   showUser.value = true;
 };
 
+// 显示隐藏标注名称
+const handleShowAnnotationName = () => {
+  emits('showAnnotationNameChange');
+};
+
 let showImportLayer = ref(false);
 const handleShowImportLayer = () => {
   showImportLayer.value = true;

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -208,7 +208,7 @@
   >
     <div>是否确定加载该预案到地图上？</div>
   </Dialog>
-  <LayerDetail v-if="showLayer" v-model="showLayer" :pattern-id="patternId" />
+  <LayerDetail v-if="showLayer" v-model="showLayer" :pattern-id="patternId" :showAnnotationName="showAnnotationName" @showAnnotationNameChange="showAnnotationNameChange" />
   <!--协同标绘选择弹窗-->
   <SelectPoltting v-if="showOnlinePlotting" v-model="showOnlinePlotting" @confirm="handleOpenPlotting" />
 </template>
@@ -224,8 +224,7 @@ import { deepClone } from '@/utils';
 import { useHistory } from '@/hooks/useHistory';
 import {
   changeVisibleClassification,
-  closeCollaboration,
-  createCollaboration, createPattern,
+  createCollaboration,
   deleteClassificationCreate,
   deletePatternById,
   getPatternInfo,
@@ -281,6 +280,8 @@ let showTextEdit = ref(false);
 let lnglat = ref([]);
 // 协同
 let collaboration = ref(false);
+// 协同 是否显示标注名称
+let showAnnotationName = ref(false);
 let webSock;
 // 分享
 let shareState = reactive({
@@ -528,10 +529,12 @@ const initDrawMethod = (options) => {
         data.image = data.iconName;
         data.imageHover = data.iconName;
         data.visible = true;
-        obj.setLabel({
-          content: '<div>' + data.title + '</div>',
-          direction: 'top'
-        });
+        if (showAnnotationName.value) {
+          obj.setLabel({
+            content: '<div>' + data.title + '</div>',
+            direction: 'top'
+          });
+        }
       } else {
         if (options.type == 'circle') {
           data.center = [obj.getCenter().lng, obj.getCenter().lat];
@@ -591,6 +594,9 @@ const initDrawMethod = (options) => {
           // 图片加载完成后，可以访问其 width 和 height 属性
           const width = img.width;
           const height = img.height;
+          if (showAnnotationName.value) {
+            options.showLabel = true;
+          }
           const style = new Style({
             image: new Icon({
               src: options.icon,
@@ -599,14 +605,8 @@ const initDrawMethod = (options) => {
               anchorYUnits: 'fraction',
               size: [width, height],
               scale: !!options.size[0] ? options.size[0] / width : 1
-            })
-            // text: new Text({
-            //   text: data.title, // 使用属性中的值作为文本
-            //   font: '14px sans-serif',
-            //   fill: new Fill({
-            //     color: '#ffff'
-            //   })
-            // })
+            }),
+            text: mapUtils.getTextStyle(options)
           });
           feature.setStyle(style);
         };
@@ -775,20 +775,30 @@ const handleUndo = () => {
   }
 };
 // 移除所有覆盖物
-const removeAllOverlay = () => {
-  overlays.forEach((item, index) => {
+const removeAllOverlay = (noClean) => {
+  overlays.forEach((item) => {
     if (Array.isArray(item)) {
       item.forEach((overlay) => {
         // 移除地图上覆盖物
-        map.remove(overlay);
+        if (mapStore.isAMap) {
+          map.remove(overlay);
+        } else {
+          mapUtils.getDrawVector()?.getSource()?.removeFeature(overlay);
+        }
       });
     } else {
       // 移除地图上覆盖物
-      map.remove(item);
+      if (mapStore.isAMap) {
+        map.remove(item);
+      } else {
+        mapUtils.getDrawVector()?.getSource()?.removeFeature(item);
+      }
     }
   });
-  overlays = [];
-  overlaysData = [];
+  if (!noClean) {
+    overlays = [];
+    overlaysData = [];
+  }
 };
 // 根据索引移除覆盖物
 const removeOverlayByIndex = (index: number) => {
@@ -967,18 +977,21 @@ const handleShareConfirm = (data) => {
 };
 const getWebSocketData = (data) => {
   if (data && data.length > 0) {
+    // 已把图片转换为正确路径, 只有可见
     const data2 = [];
+    // 图片未转换
     const data3 = [];
     data.forEach((item) => {
       if (!!item.content) {
         const parseContent = JSON.parse(item.content);
+        parseContent.showLabel = showAnnotationName.value;
+        data3.push(deepClone(parseContent));
         if (parseContent.type === 'marker' && !!parseContent.icon) {
           parseContent.icon = getImageUrl(parseContent.icon);
         }
         if (item.visible === '1') {
           data2.push(parseContent);
         }
-        data3.push(parseContent);
       }
     });
     const res = mapUtils.drawData(data2);
@@ -1105,6 +1118,21 @@ const clearData = () => {
   overlays = [];
   overlaysData = [];
 };
+
+const showAnnotationNameChange = () => {
+  showAnnotationName.value = !showAnnotationName.value;
+  const data = deepClone(overlaysData);
+  data.forEach((item) => {
+    item.showLabel = showAnnotationName.value;
+    console.log(item.icon);
+    if (item.type === 'marker' && !!item.icon) {
+      item.icon = getImageUrl(item.icon);
+    }
+  });
+  const res = mapUtils.drawData(data);
+  removeAllOverlay(true);
+  overlays = res;
+};
 onMounted(() => {
   getTemplateTreeData();
   getList();