更新 地图覆盖物偏移量

src/components/TitleLine.vue

@@ -50,7 +50,7 @@ export default {
     },
     endText: {
       type: String,
-      default: "货主王",
+      default: "",
     },
   },
   setup() {

src/views/transportationSafetyCenter.vue

@@ -110,70 +110,76 @@ export default {
         }
       }
     }
-
+    let baseScale = ref(1);
+    let baseOffset = ref(0);
     // 根据缩放级别调整覆盖物大小及偏移 单级别
     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;
+      if (isSafety.value) {
+        let zoomLevel = bmap.value.getZoom().toFixed(0);
+
+        if (cacheLevel.value == zoomLevel) return;
+        cacheLevel.value = zoomLevel;
+        console.log(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 reDrewShips(scale, offset) {
+      baseScale.value = scale;
+      baseOffset.value = offset;
       for (let i of shipsDataCache.value) {
-        let overlay = cpxOverlay(i, scale, offset);
+        let overlay = cpxOverlay(i);
         shipsOverlayCache.value.push(overlay);
         bmap.value.addOverlay(overlay);
       }
@@ -229,8 +235,8 @@ export default {
     // 定义复杂覆盖物
     function cpxOverlay(
       item = {},
-      scale = 1,
-      offset = 0,
+      scale = baseScale.value,
+      offset = baseOffset.value,
       offsetX = "0",
       offsetY = "0"
     ) {
@@ -264,7 +270,7 @@ export default {
           return objE;
         }
         let c2 = `  <div style="display: flex;
-                  align-items:center;position:relative;top:${offsetX}px;left:${offsetY}px">
+                  align-items:center;position:relative;">
                 <div
                   style="
                     height:  ${cargo ? "118px" : "60px"};
@@ -364,7 +370,8 @@ export default {
                   text-shadow: 0px 0px 5px rgba(100, 185, 255, 0.6);
                   position:relative;
                   transform:scale(${scale});
-                  left:${137 * (scale - 1) + offset}px
+                  left:${137 * (scale - 1) + offset}px;
+                  top:${offsetY}px;
                 "
               >
                 <img
@@ -437,12 +444,14 @@ ${isSafety.value ? c2 : ""}
       // data.length = 30;
       shipsDataCache.value = data;
       for (let i of data) {
-        let overlay = cpxOverlay(i);
+        let overlay = isSafety.value
+          ? cpxOverlay(i)
+          : cpxOverlay(i, 0.4, 99, 0, 36);
         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);
+        let marker = new BMapGL.Marker(new BMapGL.Point(i.lng, i.lat));
+        marker.disableMassClear();
+        bmap.value.addOverlay(marker);
       }
     }