更新 获取首页船舶接口;复杂覆盖物方法新增偏移量参数

src/apis/fetch.js

@@ -2,6 +2,11 @@ import { $http } from "./config";
 import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 
 export default {
+  // 首页船舶地图点
+  getAllShipLocation(data) {
+    return $http("/ship/frontPage/shipLocation", data);
+  },
+
   // 运输安全管理中心-船舶详情
   getManageShipDetail(data) {
     return $http("/ship/manage/detail", data);

src/views/transportationSafetyCenter.vue

@@ -57,7 +57,6 @@ export default {
       });
       bmap.value.centerAndZoom(new BMapGL.Point(120.688612, 31.975529), 11);
       bmap.value.enableScrollWheelZoom(true);
-      cpxOverlay();
     }
     watch(
       () => store.state.currentTabText,
@@ -84,9 +83,10 @@ export default {
       mmsi = "413835188",
       cargo = "豆粕",
       tons = "1565.69",
-      shipId = "51710"
+      shipId = "51710",
+      offsetX = "20",
+      offsetY = "50"
     ) {
-      console.log("创建自定义覆盖物");
       //   复杂的自定义覆盖物
       function ComplexCustomOverlay(point) {
         this._point = point;
@@ -102,9 +102,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.lineHeight = "18px";
+        // div.style.height = "118px";
+        // div.style.width = "270px";
         div.style.whiteSpace = "nowrap";
         div.style.MozUserSelect = "none";
         div.style.fontSize = "12px";
@@ -134,6 +133,8 @@ export default {
                   src="https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/map-ship-icon.png"
                   alt=""
                 />
+                <div style="display: flex;
+                  align-items:center;position:relative;top:${offsetX}px;left:${offsetY}px">
                 <div
                   style="
                     height: 118px;
@@ -160,7 +161,7 @@ export default {
                       font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                       font-weight: bold;
                       color: #10ffb9;
-                      margin-bottom: 2px;
+                      margin-bottom: 1px;
                     "
                   >
                     ${shipName}
@@ -171,7 +172,7 @@ export default {
                       font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                       font-weight: 500;
                       color: #fafeff;
-                      margin-bottom: 14px;
+                      margin-bottom: 10px;
                     "
                   >
                     MMSI: ${mmsi}
@@ -223,15 +224,16 @@ export default {
                       </div>
                     </div>
                   </div>
+                  </div>
                 </div>
               </div>
         `;
-        let contain = parseDom(content);
+        let shipBox = parseDom(content);
         div.addEventListener("click", function () {
           console.log("shipId", shipId);
           selectShip({ key: shipId });
         });
-        div.appendChild(contain);
+        div.appendChild(shipBox);
 
         bmap.value.getPanes().labelPane.appendChild(div);
         return div;
@@ -243,16 +245,25 @@ export default {
         this._div.style.top = pixel.y - 65 + "px";
       };
 
-      let myCompOverlay = new ComplexCustomOverlay(new BMapGL.Point(lng, lat));
+      return new ComplexCustomOverlay(new BMapGL.Point(lng, lat));
+    }
+
+    async function getAllShipLocation() {
+      let res = await api.getAllShipLocation();
+      let data = res.data.result;
 
-      bmap.value.addOverlay(myCompOverlay);
+      for (let i of data) {
+        bmap.value.addOverlay(
+          cpxOverlay(i.lng, i.lat, i.shipName, i.mmsi, i.cargo, i.tons)
+        );
+      }
     }
 
     onMounted(() => {
       initMap();
-      // store.dispatch("GetManageShipDetail", 51710);
-      // store.dispatch("GetTradeShipDetail", 51710);
+      bmap.value.addOverlay(cpxOverlay());
       store.dispatch("GetNumbers");
+      // getAllShipLocation();
     });
     return {
       initMap,