实时标绘 优化回显、实现删除

src/hooks/AMap/useAMap.ts

@@ -325,9 +325,9 @@ export function useAMap(options) {
   };
 
   const drawData = (data) => {
+    let res = [];
     data.forEach((item) => {
       let graphic;
-      // debugger
       if (['rectangle', 'polygon'].includes(item.type)) {
         graphic = new AMap.Polygon({
           path: item.path,
@@ -337,7 +337,11 @@ export function useAMap(options) {
           fillColor: item.fillColor,
           fillOpacity: item.fillOpacity
         });
+        graphic._opts.extData = {
+          id: item.id
+        };
         map.add(graphic);
+        res.push(graphic);
       } else if (item.type === 'circle') {
         graphic = new AMap.Circle({
           center: item.center,
@@ -348,7 +352,11 @@ export function useAMap(options) {
           fillColor: item.fillColor,
           fillOpacity: item.fillOpacity
         });
+        graphic._opts.extData = {
+          id: item.id
+        };
         map.add(graphic);
+        res.push(graphic);
       } else if (item.type === 'straightLine') {
         graphic = new AMap.Polyline({
           path: item.path,
@@ -357,9 +365,14 @@ export function useAMap(options) {
           strokeWeight: item.strokeWeight,
           strokeStyle: item.strokeStyle
         });
+        graphic._opts.extData = {
+          id: item.id
+        };
         map.add(graphic);
+        res.push(graphic);
       } else if (item.type === 'text') {
-        addText(item);
+        const { text } = addText(item);
+        res.push(text);
       } else if (item.type === 'measureArea') {
         graphic = new AMap.Polygon({
           path: item.path,
@@ -369,21 +382,45 @@ export function useAMap(options) {
           fillColor: item.fillColor,
           fillOpacity: item.fillOpacity
         });
+        graphic._opts.extData = {
+          id: item.id
+        };
         map.add(graphic);
         // 计算区域面积
         const area = Math.round(AMap.GeometryUtil.ringArea(item.path));
-
         const text = new AMap.Text({
           position: item.path[item.path.length - 1],
           text: '区域面积' + area + '平方米',
           offset: new AMap.Pixel(-20, -20)
         });
+        text._opts.extData = {
+          id: item.id
+        };
         data.area = area;
-        map.add(text);
+        map.add([graphic, text]);
+        // res.push(text);
       } else if (item.type === 'marker') {
-        addMarker([item], true);
+        // 创建标注点
+        const marker = new AMap.Marker({
+          position: new AMap.LngLat(item.longitude, item.latitude), // 标注点的位置
+          icon: new AMap.Icon({
+            size: item.size, //图标所处区域大小
+            image: item.icon
+          }),
+          size: item.size
+        });
+        marker._opts.extData = {
+          id: item.id
+        };
+        marker.setLabel({
+          content: '<div>' + item.title + '</div>',
+          direction: 'top'
+        });
+        map.add(marker);
+        res.push(marker);
       }
     });
+    return res;
   };
   const addText = (options) => {
     // 文本覆盖物的样式

src/types/components.d.ts

@@ -21,7 +21,6 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
@@ -38,34 +37,20 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -76,7 +61,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
@@ -110,9 +94,7 @@ declare module 'vue' {
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

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

@@ -173,6 +173,7 @@ import LayerDetail from './LayerDetail.vue';
 import { createWebSocket } from '@/utils/websocket';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const getMapUtils = inject('getMapUtils');
 const getDrawTool = inject('getDrawTool');
 const getMap = inject('getMap');
 const containerScale = inject('containerScale');
@@ -392,8 +393,8 @@ let shareState = reactive({
 });
 let patternId = ref('');
 let shareId = ref('');
-const overlays = [];
-const overlaysData = [];
+let overlays = [];
+let overlaysData = [];
 watch(
   () => drawing,
   () => {
@@ -685,6 +686,23 @@ const handleUndo = () => {
     console.log(history.value, future.value, currentState.value);
   }
 };
+// 移除所有覆盖物
+const removeAllOverlay = () => {
+  const map = getMap();
+  overlays.forEach((item, index) => {
+    if (Array.isArray(item)) {
+      item.forEach((overlay) => {
+        // 移除地图上覆盖物
+        map.remove(overlay);
+      });
+    } else {
+      // 移除地图上覆盖物
+      map.remove(item);
+    }
+  });
+  overlays = [];
+  overlaysData = [];
+};
 // 根据索引移除覆盖物
 const removeOverlayByIndex = (index: number) => {
   const map = getMap();
@@ -696,6 +714,14 @@ const removeOverlayByIndex = (index: number) => {
   } else {
     // 移除地图上覆盖物
     map.remove(overlays[index]);
+    if (collaboration.value) {
+      webSock.send(
+        JSON.stringify({
+          operation: 'delete',
+          id: overlays[index].getExtData()?.id
+        })
+      );
+    }
   }
   overlays.splice(index, 1);
   overlaysData.splice(index, 1);
@@ -804,6 +830,29 @@ const handleShareConfirm = (data) => {
   shareState.id = '';
 };
 const getWebSocketData = (data) => {
+  if (data && data.length > 0) {
+    const data2 = [];
+    const data3 = deepClone(data);
+    data.forEach((item) => {
+      if (!!item.content) {
+        const parseContent = JSON.parse(item.content);
+        if (parseContent.type === 'marker' && !!parseContent.icon) {
+          parseContent.icon = getImageUrl(parseContent.icon);
+        }
+        data2.push(parseContent);
+      }
+    });
+    const res = getMapUtils().drawData(data2);
+    removeAllOverlay();
+    res.forEach((item, index) => {
+      item.on('rightclick', handleRightClick);
+      overlays.push(item);
+      overlaysData.push(data3[index]);
+    });
+    commit(deepClone(overlaysData));
+    currentState.value = data;
+  }
+
   console.log('接收数据', data);
 };