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

src/hooks/AMap/useAMap.ts

@@ -322,6 +322,7 @@ export function useAMap(options) {
   };
 
   const drawData = (data) => {
+    let res = [];
     data.forEach((item) => {
       let graphic;
       if (['rectangle', 'polygon'].includes(item.type)) {
@@ -333,7 +334,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,
@@ -344,7 +349,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,
@@ -353,9 +362,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,
@@ -365,6 +379,9 @@ 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));
@@ -373,25 +390,34 @@ export function useAMap(options) {
           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') {
         // 创建标注点
         const marker = new AMap.Marker({
           position: new AMap.LngLat(item.longitude, item.latitude), // 标注点的位置
           icon: new AMap.Icon({
-            size: item.size,  //图标所处区域大小
+            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/views/mobileControl/OnlinePlotting/index.vue

@@ -83,8 +83,8 @@ const lineWidthOptions = reactive([
 ]);
 let showTextEdit = ref();
 let lnglat = ref([]);
-const overlays = [];
-const overlaysData = [];
+let overlays = [];
+let overlaysData = [];
 watch(
     () => drawing,
     () => {
@@ -462,6 +462,27 @@ const deleteGraphics = () => {
     }
   }
 };
+// 移除所有覆盖物
+const removeAllOverlay = () => {
+  const map = getMap();
+  overlays.forEach((item, index) => {
+    if (Array.isArray(item)) {
+      item.forEach((overlay) => {
+        // 移除地图上覆盖物
+        map.remove(overlay);
+      });
+    } else {
+      // 移除地图上覆盖物
+      map.remove(item);
+      emits('handleSendData', JSON.stringify({
+        operation: 'delete',
+        id: overlays[index].getExtData()?.id
+      }));
+    }
+  });
+  overlays = [];
+  overlaysData = [];
+};
 // 根据索引移除覆盖物
 const removeOverlayByIndex = (index: number) => {
   const map = getMap();
@@ -478,18 +499,26 @@ const removeOverlayByIndex = (index: number) => {
   overlaysData.splice(index, 1);
 };
 const getWebSocketData = (data) => {
-  if(data && data.length > 0) {
-    const data2 = []
+  if (data && data.length > 0) {
+    const data2 = [];
+    const data3 = deepClone(data);
     data.forEach((item) => {
       if (!!item.content) {
-        const parseContent =  JSON.parse(item.content);
+        const parseContent = JSON.parse(item.content);
         if (parseContent.type === 'marker' && !!parseContent.icon) {
           parseContent.icon = getImageUrl(parseContent.icon);
         }
         data2.push(parseContent);
       }
-    })
-    getMapUtils().drawData(data2);
+    });
+    const res = getMapUtils().drawData(data2);
+    removeAllOverlay();
+    res.forEach((item, index) => {
+      overlays.push(item);
+      overlaysData.push(data3[index]);
+    });
+    commit(deepClone(overlaysData));
+    currentState.value = data;
   }
 }
 defineExpose({ getWebSocketData })