shangyun/Web/src/hooks/use-g-map-trajectory.ts

import { getRoot } from '/@/root'
import startSrc from '/@/assets/icons/start.svg'
import endSrc from '/@/assets/icons/end.svg'

export function useGMapTrajectory() {
  const root = getRoot();
  let AMap = root.$aMap;

  // 绘制轨迹
  const drawTrajectory = (paths: any[]) => {
    // 绘制起点图标
    const startPosition = paths[0];
    const startIcon = new AMap.Icon({
      size: new AMap.Size(40, 40),
      image: startSrc,
      imageSize: new AMap.Size(40, 40)
    })
    const startMarker = new AMap.Marker({
      position: new AMap.LngLat(startPosition[0], startPosition[startPosition.length - 1]),
      icon: startIcon,
      offset: new AMap.Pixel(-20, -35)
    })
    // 绘制终点图标
    const endPosition = paths[paths.length - 1];
    const endIcon = new AMap.Icon({
      size: new AMap.Size(40, 40),
      image: endSrc,
      imageSize: new AMap.Size(40, 40)
    })
    const endMarker = new AMap.Marker({
      position: new AMap.LngLat(endPosition[0], endPosition[endPosition.length - 1]),
      icon: endIcon,
      offset: new AMap.Pixel(-20, -35)
    })
    // 绘制轨迹折线
    const polyline = new AMap.Polyline({
      path: paths,
      strokeColor: '#2D8CF0',
      strokeOpacity: 1,
      strokeWeight: 2,
      strokeStyle: 'solid',
    })
    root.$map.add([startMarker, endMarker, polyline]);
    // 自动缩放地图到合适的视野级别
    root.$map.setFitView([startMarker, endMarker, polyline]);
  }

  return {
    drawTrajectory
  }
}