新增 清除覆盖物方法

src/views/transportationSafetyCenter.vue

@@ -65,9 +65,29 @@ export default {
       }
     );
 
+    // 清除覆盖物
+    function clear(overlays) {
+      if (overlays) {
+        for (let i in overlays) {
+          bmap.value.removeOverlay(i);
+        }
+      } else {
+        bmap.value.clearOverlays();
+      }
+    }
+
     let shipStr = ref("");
 
+    function drawCacheShips() {
+      for (let i of store.state.shipsCache) {
+        bmap.value.addOverlay(
+          cpxOverlay(i.lng, i.lat, i.shipName, i.mmsi, i.cargo, i.tons)
+        );
+      }
+    }
     function selectShip(item) {
+      clear(clearableData.value);
+      // drawCacheShips();
       if (store.state.currentTabText == "运输安全管理中心") {
         store.dispatch("GetManageShipDetail", item.key);
       }
@@ -282,10 +302,16 @@ export default {
         `;
         let shipBox = parseDom(content);
         div.addEventListener("click", function () {
-          selectShip({ key: shipId });
+          if (store.state.currentTabText == "运输安全管理中心") {
+            store.dispatch("GetManageShipDetail", shipId);
+          }
+          if (store.state.currentTabText == "智能交易中心") {
+            store.dispatch("GetTradeShipDetail", shipId);
+          }
         });
-        div.appendChild(shipBox);
-
+        if (lng != -1) {
+          div.appendChild(shipBox);
+        }
         bmap.value.getPanes().labelPane.appendChild(div);
         return div;
       };
@@ -308,58 +334,39 @@ export default {
         strokeStyle: "dashed", // 折线样式:虚线
       });
 
+      clearableData.value.push(polyline);
       bmap.value.addOverlay(polyline); //增加折线
       //   bmap.value.centerAndZoom(points[points.length - 1], 15); // params:(设置地图中心点,缩放级别)
-      let imgs = [
-        {
-          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
-        },
-        {
-          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
-        },
-        {
-          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
-        },
-        {
-          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
-        },
-        {
-          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
-        },
-        {
-          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
-        },
-        {
-          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
-        },
-        {
-          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
-        },
-      ];
-      store.commit("setImgs", imgs);
     }
-
+    let clearableData = ref([]);
     async function getAllShipLocation() {
       let res = await api.getAllShipLocation();
       let data = res.data.result;
-
+      store.commit("setShipsCache", data);
       for (let i of data) {
-        bmap.value.addOverlay(
-          cpxOverlay(i.lng, i.lat, i.shipName, i.mmsi, i.cargo, i.tons)
+        let overlay = cpxOverlay(
+          i.lng,
+          i.lat,
+          i.shipName,
+          i.mmsi,
+          i.cargo,
+          i.tons
         );
+        bmap.value.addOverlay(overlay);
       }
     }
 
     onMounted(() => {
       initMap();
-      bmap.value.addOverlay(cpxOverlay());
       store.dispatch("GetNumbers");
-      // getAllShipLocation();
+      bmap.value.addOverlay(cpxOverlay(-1));
+      getAllShipLocation();
     });
     return {
       initMap,
       shipStr,
       selectShip,
+      clearableData,
     };
   },
 };