新增 根据缩放级别(组)更新覆盖物尺寸及偏移量

src/views/transportationSafetyCenter.vue

@@ -50,23 +50,130 @@ export default {
   },
   setup() {
     const bmap = ref({});
-    let zoomLevel = ref(11);
     let shipStr = ref("");
 
     // 初始化地图
     function initMap() {
-      bmap.value = new BMapGL.Map("bmap");
+      bmap.value = new BMapGL.Map("bmap", {
+        minZoom: 5,
+        maxZoom: 14,
+      });
       bmap.value.setMapStyleV2({
         styleId: "fa3f2f79d64ac87e2683cfa762891cb5",
       });
       bmap.value.centerAndZoom(new BMapGL.Point(120.688612, 31.975529), 11);
       bmap.value.enableScrollWheelZoom(true);
-      bmap.value.addEventListener("zoomend", changeZoom);
+      bmap.value.addEventListener("zoomend", changeZoomByLevel);
+    }
+    let cacheLevel = ref(0);
+    let prevLevel = ref(0);
+
+    // 根据缩放级别调整覆盖物大小及偏移 级别组
+    function changeZoomByGroup() {
+      let zoomLevel = bmap.value.getZoom().toFixed(0);
+      if (cacheLevel.value == zoomLevel) return;
+      cacheLevel.value = zoomLevel;
+      switch (parseInt(zoomLevel)) {
+        case 5: {
+          prevLevel.value = 5;
+          clearShipsOverlay();
+          reDrewShips(0.2, 4);
+
+          break;
+        }
+        case 6 || 7: {
+          let arr = [6, 7];
+          if (arr.includes(prevLevel.value)) return;
+          prevLevel.value = 6;
+          clearShipsOverlay();
+          reDrewShips(0.4, 3);
+          break;
+        }
+        case 8 || 9 || 10: {
+          let arr = [8, 9, 10];
+          if (arr.includes(prevLevel.value)) return;
+          prevLevel.value = 8;
+          clearShipsOverlay();
+          reDrewShips(0.6, 2);
+          break;
+        }
+        case 11 || 12 || 13 || 14: {
+          let arr = [11, 12, 13, 14];
+          if (arr.includes(prevLevel.value)) return;
+          prevLevel.value = 11;
+          clearShipsOverlay();
+          reDrewShips(1);
+          break;
+        }
+      }
+    }
+
+    // 根据缩放级别调整覆盖物大小及偏移 单级别
+    function changeZoomByLevel() {
+      let zoomLevel = bmap.value.getZoom().toFixed(0);
+
+      if (cacheLevel.value == zoomLevel) return;
+      cacheLevel.value = zoomLevel;
+
+      switch (parseInt(zoomLevel)) {
+        case 5: {
+          clearShipsOverlay();
+          reDrewShips(0.2, 134);
+          break;
+        }
+        case 6: {
+          clearShipsOverlay();
+          reDrewShips(0.3, 116);
+          break;
+        }
+        case 7: {
+          clearShipsOverlay();
+          reDrewShips(0.4, 99);
+          break;
+        }
+
+        case 6: {
+          clearShipsOverlay();
+          reDrewShips(0.6, 66);
+          break;
+        }
+
+        case 8: {
+          clearShipsOverlay();
+          reDrewShips(0.7, 50);
+          break;
+        }
+
+        case 9: {
+          clearShipsOverlay();
+          reDrewShips(0.8, 34);
+          break;
+        }
+
+        case 10: {
+          clearShipsOverlay();
+          reDrewShips(0.9, 18);
+          break;
+        }
+
+        case 11 || 12 || 13 || 14: {
+          let arr = [11, 12, 13, 14];
+          if (arr.includes(prevLevel.value)) return;
+          prevLevel.value = 11;
+          clearShipsOverlay();
+          reDrewShips(1);
+          break;
+        }
+      }
     }
 
-    // 地图缩放级别变更监听
-    function changeZoom() {
-      zoomLevel.value = bmap.value.getZoom().toFixed(0);
+    // 重绘自定义船舶覆盖物
+    function reDrewShips(scale, offset) {
+      for (let i of shipsDataCache.value) {
+        let overlay = cpxOverlay(i, scale, offset);
+        shipsOverlayCache.value.push(overlay);
+        bmap.value.addOverlay(overlay);
+      }
     }
 
     watch(
@@ -160,16 +267,9 @@ export default {
 
     // 定义复杂覆盖物
     function cpxOverlay(
-      item = {
-        lng: 120.688612,
-        lat: 31.995529,
-        shipName: "颖航5156",
-        mmsi: "413835188",
-        cargo: "豆粕",
-        tons: "1565.69",
-        shipId: "51710",
-      },
+      item = {},
       scale = 1,
+      offset = 0,
       offsetX = "0",
       offsetY = "0"
     ) {
@@ -190,8 +290,8 @@ export default {
         div.style.margin = 0;
         div.style.padding = 0;
         div.style.zIndex = BMapGL.Overlay.getZIndex(this._point.lat);
-        // div.style.height = "118px";
-        // div.style.width = "270px";
+        div.style.height = "0px";
+        div.style.width = "0px";
         div.style.whiteSpace = "nowrap";
         div.style.MozUserSelect = "none";
         div.style.fontSize = "12px";
@@ -210,7 +310,7 @@ export default {
                   text-shadow: 0px 0px 5px rgba(100, 185, 255, 0.6);
                   position:relative;
                   transform:scale(${scale});
-                  left:${137 * (scale - 1)}px
+                  left:${137 * (scale - 1) + offset}px
                 "
               >
                 <img
@@ -366,6 +466,8 @@ export default {
 
     // 清除地图船舶覆盖物
     function clearShipsOverlay() {
+      bmap.value.clearOverlays();
+      return;
       for (let i of shipsOverlayCache.value) {
         bmap.value.removeOverlay(i);
       }
@@ -381,6 +483,9 @@ export default {
         let overlay = cpxOverlay(i);
         shipsOverlayCache.value.push(overlay);
         bmap.value.addOverlay(overlay);
+        // let marker = new BMapGL.Marker( new BMapGL.Point(i.lng, i.lat));
+        // marker.disableMassClear();
+        // bmap.value.addOverlay(marker);
       }
     }