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

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/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -370,8 +370,8 @@ let shareState = reactive({
 });
 let patternId = ref('');
 let shareId = ref('');
-const overlays = [];
-const overlaysData = [];
+let overlays = [];
+let overlaysData = [];
 watch(
   () => drawing,
   () => {
@@ -486,6 +486,14 @@ const addText = (textEditState) => {
   const map = drawTool.getMap();
   // 监听地图点击事件
   map.off('click', handleClickMap);
+  webSock.send(
+    JSON.stringify({
+      operation: 'add', // 必填
+      name: data.title, // 必填
+      content: JSON.stringify(data), // 必填
+      visible: false
+    })
+  );
   close();
 };
 // watch(
@@ -655,6 +663,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();
@@ -666,6 +691,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);
@@ -773,13 +806,34 @@ 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) => {
+      overlays.push(item);
+      overlaysData.push(data3[index]);
+    });
+    commit(deepClone(overlaysData));
+    currentState.value = data;
+  }
   console.log('接收数据', data);
 };
 const handleSendForm = () => {
   if (!form.value.pattern_name) {
     return proxy?.$modal.msgWarning('请填写预案名称');
   }
-  createWebSocket('eZokH5XO6VC6xIXEHirTF', getWebSocketData);
+  webSock = createWebSocket('eZokH5XO6VC6xIXEHirTF', getWebSocketData);
   patternId.value = 'eZokH5XO6VC6xIXEHirTF';
   // createCollaboration(form.value).then(() => {
   //   patternId.value = form.value.pattern_id;