新增 绘制轨迹方法

src/views/transportationSafetyCenter.vue

@@ -74,6 +74,58 @@ export default {
       if (store.state.currentTabText == "智能交易中心") {
         store.dispatch("GetTradeShipDetail", item.key);
       }
+
+      let arr = [
+        {
+          lng: 120.60686,
+          lat: 32.00782,
+        },
+        {
+          lng: 120.460976,
+          lat: 32.046392,
+        },
+        {
+          lng: 120.384512,
+          lat: 32.005248,
+        },
+        {
+          lng: 120.384512,
+          lat: 32.005248,
+        },
+        {
+          lng: 120.199389,
+          lat: 31.932712,
+        },
+        {
+          lng: 120.071183,
+          lat: 31.962125,
+        },
+        {
+          lng: 119.966548,
+          lat: 32.03268,
+        },
+        {
+          lng: 119.940677,
+          lat: 32.070384,
+        },
+        {
+          lng: 119.909057,
+          lat: 32.17509,
+        },
+        {
+          lng: 119.892384,
+          lat: 32.233262,
+        },
+        {
+          lng: 119.862489,
+          lat: 32.29042,
+        },
+      ];
+      let points = [];
+      for (let i of arr) {
+        points.push(new BMapGL.Point(i.lng, i.lat));
+      }
+      drawLine(points);
     }
     // 定义复杂覆盖物
     function cpxOverlay(
@@ -230,7 +282,6 @@ export default {
         `;
         let shipBox = parseDom(content);
         div.addEventListener("click", function () {
-          console.log("shipId", shipId);
           selectShip({ key: shipId });
         });
         div.appendChild(shipBox);
@@ -248,6 +299,19 @@ export default {
       return new ComplexCustomOverlay(new BMapGL.Point(lng, lat));
     }
 
+    // 轨迹绘制
+    function drawLine(points) {
+      // 定义覆盖物 线
+      let polyline = new BMapGL.Polyline(points, {
+        strokeWeight: "2", //折线的宽度，以像素为单位
+        strokeColor: "#00ffb2", //折线颜色
+        strokeStyle: "dashed", // 折线样式:虚线
+      });
+
+      bmap.value.addOverlay(polyline); //增加折线
+      //   bmap.value.centerAndZoom(points[points.length - 1], 15); // params:(设置地图中心点,缩放级别)
+    }
+
     async function getAllShipLocation() {
       let res = await api.getAllShipLocation();
       let data = res.data.result;
@@ -261,9 +325,9 @@ export default {
 
     onMounted(() => {
       initMap();
-      // bmap.value.addOverlay(cpxOverlay());
+      bmap.value.addOverlay(cpxOverlay());
       store.dispatch("GetNumbers");
-      getAllShipLocation();
+      // getAllShipLocation();
     });
     return {
       initMap,