新增 移除/重绘覆盖物方法

src/views/transportationSafetyCenter.vue

@@ -57,7 +57,13 @@ export default {
       });
       bmap.value.centerAndZoom(new BMapGL.Point(120.688612, 31.975529), 11);
       bmap.value.enableScrollWheelZoom(true);
+      bmap.value.addEventListener("zoomend", changeZoom);
     }
+    let zoomLevel = ref(11);
+    function changeZoom() {
+      zoomLevel.value = bmap.value.getZoom().toFixed(0);
+    }
+
     watch(
       () => store.state.currentTabText,
       (a, b) => {
@@ -67,6 +73,7 @@ export default {
 
     // 清除覆盖物
     function clear(overlays) {
+      console.log(overlays);
       if (overlays) {
         for (let i in overlays) {
           bmap.value.removeOverlay(i);
@@ -85,8 +92,12 @@ export default {
         );
       }
     }
+    function clearPolyline() {
+      bmap.value.removeOverlay(polylineCache.value);
+    }
+
     function selectShip(item) {
-      clear(clearableData.value);
+      clearPolyline();
       // drawCacheShips();
       if (store.state.currentTabText == "运输安全管理中心") {
         store.dispatch("GetManageShipDetail", item.key);
@@ -95,7 +106,7 @@ export default {
         store.dispatch("GetTradeShipDetail", item.key);
       }
 
-      let arr = [
+      let arr1 = [
         {
           lng: 120.60686,
           lat: 32.00782,
@@ -120,6 +131,9 @@ export default {
           lng: 120.071183,
           lat: 31.962125,
         },
+      ];
+
+      let arr2 = [
         {
           lng: 119.966548,
           lat: 32.03268,
@@ -142,7 +156,7 @@ export default {
         },
       ];
       let points = [];
-      for (let i of arr) {
+      for (let i of Math.random() > 0.5 ? arr1 : arr2) {
         points.push(new BMapGL.Point(i.lng, i.lat));
       }
       drawLine(points);
@@ -308,6 +322,7 @@ export default {
           if (store.state.currentTabText == "智能交易中心") {
             store.dispatch("GetTradeShipDetail", shipId);
           }
+          selectShip({ key: shipId });
         });
         if (lng != -1) {
           div.appendChild(shipBox);
@@ -325,6 +340,8 @@ export default {
       return new ComplexCustomOverlay(new BMapGL.Point(lng, lat));
     }
 
+    let polylineCache = ref({});
+
     // 轨迹绘制
     function drawLine(points) {
       // 定义覆盖物 线
@@ -334,11 +351,9 @@ export default {
         strokeStyle: "dashed", // 折线样式:虚线
       });
 
-      clearableData.value.push(polyline);
+      polylineCache.value = polyline;
       bmap.value.addOverlay(polyline); //增加折线
-      //   bmap.value.centerAndZoom(points[points.length - 1], 15); // params:(设置地图中心点,缩放级别)
     }
-    let clearableData = ref([]);
     async function getAllShipLocation() {
       let res = await api.getAllShipLocation();
       let data = res.data.result;
@@ -366,7 +381,7 @@ export default {
       initMap,
       shipStr,
       selectShip,
-      clearableData,
+      polylineCache,
     };
   },
 };