更新 覆盖物绘制/清除逻辑;新增 自定义覆盖物缩放逻辑

src/views/transportationSafetyCenter.vue

@@ -50,6 +50,10 @@ export default {
   },
   setup() {
     const bmap = ref({});
+    let zoomLevel = ref(11);
+    let shipStr = ref("");
+
+    // 初始化地图
     function initMap() {
       bmap.value = new BMapGL.Map("bmap");
       bmap.value.setMapStyleV2({
@@ -59,7 +63,8 @@ export default {
       bmap.value.enableScrollWheelZoom(true);
       bmap.value.addEventListener("zoomend", changeZoom);
     }
-    let zoomLevel = ref(11);
+
+    // 地图缩放级别变更监听
     function changeZoom() {
       zoomLevel.value = bmap.value.getZoom().toFixed(0);
     }
@@ -71,34 +76,25 @@ export default {
       }
     );
 
-    // 清除覆盖物
-    function clear(overlays) {
-      console.log(overlays);
-      if (overlays) {
-        for (let i in overlays) {
-          bmap.value.removeOverlay(i);
-        }
-      } else {
-        bmap.value.clearOverlays();
-      }
-    }
+    // 轨迹缓存
+    let polylineCache = ref({});
 
-    let shipStr = ref("");
+    // 轨迹方向箭头覆盖物缓存
+    let arrowCache = 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 clearPolyline() {
       bmap.value.removeOverlay(polylineCache.value);
+      for (let i of arrowCache.value) {
+        bmap.value.removeOverlay(i);
+      }
+      polylineCache.value = {};
+      arrowCache.value = [];
     }
 
+    // 查询选择船舶或地图点选船舶
     function selectShip(item) {
       clearPolyline();
-      // drawCacheShips();
       if (store.state.currentTabText == "运输安全管理中心") {
         store.dispatch("GetManageShipDetail", item.key);
       }
@@ -161,6 +157,7 @@ export default {
       }
       drawLine(points);
     }
+
     // 定义复杂覆盖物
     function cpxOverlay(
       lng = 120.688612,
@@ -171,7 +168,8 @@ export default {
       tons = "1565.69",
       shipId = "51710",
       offsetX = "0",
-      offsetY = "0"
+      offsetY = "0",
+      scale = 1
     ) {
       //   复杂的自定义覆盖物
       function ComplexCustomOverlay(point) {
@@ -206,6 +204,9 @@ export default {
                   display: flex;
                   align-items:center;
                   text-shadow: 0px 0px 5px rgba(100, 185, 255, 0.6);
+                  position:relative;
+                  transform:scale(${scale});
+                  left:${137 * (scale - 1)}px
                 "
               >
                 <img
@@ -340,8 +341,6 @@ export default {
       return new ComplexCustomOverlay(new BMapGL.Point(lng, lat));
     }
 
-    let polylineCache = ref({});
-
     // 轨迹绘制
     function drawLine(points) {
       // 定义覆盖物 线
@@ -354,10 +353,26 @@ export default {
       polylineCache.value = polyline;
       bmap.value.addOverlay(polyline); //增加折线
     }
+
+    // 船舶数据缓存
+    let shipsDataCache = ref([]);
+
+    // 船舶覆盖物缓存
+    let shipsOverlayCache = ref([]);
+
+    // 清除地图船舶覆盖物
+    function clearShipsOverlay() {
+      for (let i of shipsOverlayCache.value) {
+        bmap.value.removeOverlay(i);
+      }
+      shipsOverlayCache.value = [];
+    }
+
+    // 获取所有船舶
     async function getAllShipLocation() {
       let res = await api.getAllShipLocation();
       let data = res.data.result;
-      store.commit("setShipsCache", data);
+      shipsDataCache.value = data;
       for (let i of data) {
         let overlay = cpxOverlay(
           i.lng,
@@ -367,6 +382,7 @@ export default {
           i.cargo,
           i.tons
         );
+        shipsOverlayCache.value.push(overlay);
         bmap.value.addOverlay(overlay);
       }
     }