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

import { getRoot } from '/@/root'
import hardstandSrc from '/@/assets/icons/hardstand.png'

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

  // 绘制轨迹
  const drawTrajectory = (list: any[]) => {
    const paths = list.map(item => item.paths)
    // 绘制起点图标
    const startPosition = paths[0];
    const startIcon = new AMap.Icon({
      size: new AMap.Size(30, 30),
      image: hardstandSrc,
      imageSize: new AMap.Size(30, 30)
    })
    const startMarker = new AMap.Marker({
      position: new AMap.LngLat(startPosition[0], startPosition[startPosition.length - 1]),
      icon: startIcon,
      offset: new AMap.Pixel(-20, -35),// 位置偏移
    })
    // 绘制轨迹折线
    const polyline = new AMap.Polyline({
      path: paths,
      strokeColor: '#2D8CF0',
      showDir: true,// 显示路线白色方向箭头
      strokeOpacity: 1,// 轮廓线透明度
      strokeWeight: 6,//线宽
      strokeStyle: 'solid',
    })
    // 渲染序号
    const serialList = list.filter(item => [2, 3].includes(item.type));
    const text = serialList.map((item, index) => {
      return new AMap.Text({
        position: new AMap.LngLat(item.paths[0], item.paths[1]),
        // offset: new AMap.Pixel(-30, -30),
        text: index + 1,
        style: {
          fontSize: 12,
          padding: 0,
          backgroundColor: 'transparent',
          borderColor: 'transparent',
        }
      })
    })
    root.$map.add([startMarker, polyline, ...text]);
    // 自动缩放地图到合适的视野级别
    root.$map.setFitView([startMarker, polyline]);
  }

  return {
    drawTrajectory
  }
}