feat: 实现航线中当前轮船的位置

src/views/Tracking/src/components/TrackingDetail/src/components/MapView.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- <el-button @click="test">测试</el-button> -->
   <div
     id="tracking-map"
     ref="mapContainer"
@@ -231,40 +230,6 @@ const addMapLine = (l, IsDash, opts) => {
 const showTrackLine = (pts, jj, opts) => {
   let arrow = L.polyline(pts, Object.assign({}, { color: '#ff7500', weight: 2 }, opts)).addTo(map)
   track_added_marker.push(arrow)
-
-  // 如果线段至少有两个点，才添加箭头
-  // if (pts.length >= 2) {
-  //   // 获取线段的最后一个点和倒数第二个点
-  //   const lastPoint = pts[pts.length - 1]
-  //   const secondLastPoint = pts[pts.length - 2]
-
-  //   // 计算线段末端的角度（以弧度为单位）
-  //   const angle =
-  //     Math.atan2(lastPoint[1] - secondLastPoint[1], lastPoint[0] - secondLastPoint[0]) *
-  //     (180 / Math.PI)
-
-  //   // 创建自定义箭头图标
-  //   const arrowIcon = L.divIcon({
-  //     html: `
-  //     <div  style="transform: rotate(${angle + 270}deg);" class="container">
-  //       <div class="circle"></div>
-  //       <span style="color:white;border:1px solid white" class="font_family icon-icon_path_b"></span>
-  //     </div>
-  //     `,
-  //     className: 'arrow-icon',
-  //     iconSize: [50, 50],
-  //     iconAnchor: [25, 25], // 箭头的中心点
-  //     popupAnchor: [0, -25] // 弹出框的锚点
-  //   })
-
-  //   // 创建箭头标记，并根据计算出的角度旋转箭头
-  //   const arrowMarker = L.marker(lastPoint, {
-  //     icon: arrowIcon
-  //   }).addTo(map)
-  //   console.log(angle, '角度')
-  //   // 将箭头标记也存储在 track_added_marker 数组中，以便后续管理
-  //   track_added_marker.push(arrowMarker)
-  // }
 }
 
 const addResetZoomButton = (center: L.LatLng, zoom: number) => {
@@ -349,6 +314,66 @@ const addMarkersToMap = () => {
   }
 }
 
+// 新增轮船当前位置标记
+const addShipMarker = (x: number) => {
+  const solidLine = allMapData.value.solidLine
+  // 如果轮船还未出发，则显示起点轮船标记
+  if (solidLine.length === 0) {
+    // 创建轮船图标
+    const arrowIcon = L.divIcon({
+      html: `
+        <div class="container">
+          <div class="circle"></div>
+          <span style="color:white;border:1px solid white" class="font_family icon-icon_path_b"></span>
+        </div>
+        `,
+      className: 'arrow-icon',
+      iconSize: [50, 50],
+      iconAnchor: [25, 25], // 箭头的中心点
+      popupAnchor: [0, -25] // 弹出框的锚点
+    })
+
+    let curMarkerLocation = markerPositions.value.find((item) => item.label === 'Origin')
+    const arrowMarker = L.marker([curMarkerLocation.lat, curMarkerLocation.lng + x * 360], {
+      icon: arrowIcon
+    }).addTo(map)
+    track_added_marker.push(arrowMarker)
+  } else if (solidLine.length > 0) {
+    // 如果轮船已经出发，则显示轮船当前位置标记
+    // 如果线段至少有两个点，才添加箭头
+    // 获取线段的最后一个点和倒数第二个点
+    const lastPoint = solidLine[solidLine.length - 1]
+    const secondLastPoint = solidLine[solidLine.length - 2]
+    // 计算线段末端的角度（以弧度为单位）
+    const angle =
+      Math.atan2(
+        Number(lastPoint.lon) - Number(secondLastPoint.lon),
+        Number(lastPoint.lat) - Number(secondLastPoint.lat)
+      ) *
+      (180 / Math.PI)
+
+    // 创建自定义箭头图标
+    const arrowIcon = L.divIcon({
+      html: `
+      <div style="transform: rotate(${90 - angle}deg);" class="container">
+        <div class="circle"></div>
+        <span style="color:white;border:1px solid white" class="font_family icon-icon_arrow_b"></span>
+      </div>
+      `,
+      className: 'arrow-icon',
+      iconSize: [50, 50],
+      iconAnchor: [25, 25], // 箭头的中心点
+      popupAnchor: [0, -25] // 弹出框的锚点
+    })
+    // 创建箭头标记，并根据计算出的角度旋转箭头
+    const arrowMarker = L.marker([Number(lastPoint.lat), Number(lastPoint.lon) + x * 360], {
+      icon: arrowIcon
+    }).addTo(map)
+    // 将箭头标记也存储在 track_added_marker 数组中，以便后续管理
+    track_added_marker.push(arrowMarker)
+  }
+}
+
 // 更新可见标记
 const updateVisibleMarkers = () => {
   const newVisibleMarkers = new Set()
@@ -391,7 +416,9 @@ const updateVisibleMarkers = () => {
       }
       newVisibleMarkers.add(allMarkers[key])
     })
-    // }
+
+    addShipMarker(x)
+
     x++
     cc--
   }
@@ -430,6 +457,7 @@ const handleData = (data) => {
   return resultLine
 }
 
+const allMapData = ref()
 const viewData = ref([])
 // 请求接口并处理标记
 const getMarker = () => {
@@ -440,6 +468,7 @@ const getMarker = () => {
     })
     .then((res) => {
       if (res.code === 200) {
+        allMapData.value = res.data
         const { data } = res
 
         data?.point &&
@@ -499,95 +528,6 @@ onMounted(() => {
 onUnmounted(() => {
   map?.remove()
 })
-
-const test = () => {
-  // 定义一个更复杂的 HTML 标记
-  var complexIcon = L.divIcon({
-    html: `
-       <div class="container">
-    <div class="circle"></div>
-    <span class="font_family icon-icon_ocean_b"></span>
-  </div>
-    `,
-    className: 'complex-marker',
-    iconSize: [32, 50], // 考虑到额外的文字，设置更大的高度
-    iconAnchor: [16, 25] // 调整锚点以适应新的布局
-  })
-
-  // 在地图上添加一个带有复杂 HTML 标记的标记
-  L.marker([51.5, -0.09], { icon: complexIcon }).addTo(map)
-}
-
-const test1 = () => {
-  const data = {
-    point: [
-      {
-        lng: '101.40000000',
-        lat: '3.00000000',
-        label: 'Origin',
-        infor: 'PORT KLANG, MALAYSIA',
-        sort: '1',
-        stime: null,
-        ptype: 'pol'
-      },
-      {
-        lng: '-81.09008789',
-        lat: '32.08044084',
-        label: 'Destination',
-        infor: 'SAVANNAH, GA',
-        sort: '2',
-        stime: null,
-        ptype: 'pod'
-      },
-      {
-        lng: '103.81666667',
-        lat: '1.26666667',
-        label: 'Transfer',
-        infor: 'SINGAPORE',
-        sort: '3',
-        stime: null,
-        ptype: 'poe'
-      }
-    ],
-    solidLine: [],
-    dottedLine: [],
-    rangePoint: []
-  }
-  data?.point &&
-    data?.point.forEach((item) => {
-      const iconColorList = {
-        Destination: { color: '#24ca5a', icon: destinationIcon },
-        Origin: { color: '#ED6D00', icon: originIcon },
-        Transfer: { color: '#ed0000', icon: transferIcon }
-      }
-      markerPositions.value.push({
-        lat: item.lat,
-        lng: (Number(item.lng) + 360) % 360,
-        city: item.infor,
-        label: item.label,
-        icon: iconColorList[item.label].icon,
-        iconColor: iconColorList[item.label].color
-      })
-    })
-  console.log(data, '这是数据')
-  viewData.value = (data?.rangePoint.length > 0 ? data?.rangePoint : data?.point)?.map((item) => {
-    console.log(item.lon, '这是只')
-    return [Number(item.lat), (Number(item.lon || item.lng) + 360) % 360]
-  })
-  // 请求成功后添加标记，并动态添加重置按钮
-  addMarkersToMap()
-  if (data?.dottedLine) {
-    draw_marker(handleData(data.dottedLine), handleData(data.solidLine))
-    map.on('moveend', function () {
-      draw_marker(handleData(data.dottedLine), handleData(data.solidLine))
-      updateVisibleMarkers()
-    })
-    map.on('zoomend', function () {
-      draw_marker(handleData(data.dottedLine), handleData(data.solidLine))
-      updateVisibleMarkers()
-    })
-  }
-}
 </script>
 
 <style lang="scss">
@@ -669,12 +609,12 @@ const test1 = () => {
       align-items: center;
       width: 24px;
       height: 24px;
-      padding: 4px;
-      font-size: 9px;
+      padding-bottom: 2px;
+      padding-left: 1px;
       color: white;
       background-color: rgba(255, 117, 0, 1);
       border-radius: 50%;
-      font-size: 18px;
+      font-size: 14px;
       border: 1px solid white;
     }
   }