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

import { getRoot } from '/@/root'
import hardstandSrc from '/@/assets/icons/hardstand.png'
import droneIcon from '/@/assets/icons/drone.png'
import { wgs84togcj02 } from '../vendors/coordtransform'
import rootStore from '/@/store'

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

  // 删除
  // coverMap[id].forEach(cover => root.$map.remove(cover))
  // coverMap[id] = []

  // 绘制轨迹
  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(-8, -30),
        text: index + 1,
        style: {
          backgroundColor: 'transparent',
          borderColor: 'transparent',
        }
      })
    })
    // 序号下方圆形标记
    const circles = serialList.map((item, index) => {
      return new AMap.Circle({
        center: new AMap.LngLat(item.paths[0], item.paths[1]),
        radius: 0.5, // 半径
        // strokeColor: 'white',
        fillColor: 'white',
        fillOpacity: 1,
        strokeWeight: 2,
      });
    })
    // 计算并显示每段线的距离
    const distances = [];
    const serialPaths = serialList.map(item => item.paths)
    for (let i = 0; i < serialPaths.length - 1; i++) {
      const distance = AMap.GeometryUtil.distance(new AMap.LngLat(serialPaths[i][0], serialPaths[i][1]), new AMap.LngLat(serialPaths[i + 1][0], serialPaths[i + 1][1]));
      // 计算两个点之间的中点坐标
      const midLng = (serialPaths[i][0] + serialPaths[i + 1][0]) / 2;
      const midLat = (serialPaths[i][1] + serialPaths[i + 1][1]) / 2;
      const midPoint = new AMap.LngLat(midLng, midLat);
      // 在中点位置放置文本以显示距离
      const distanceText = new AMap.Text({
        position: midPoint,
        offset: new AMap.Pixel(-16, 10),
        text: `${distance.toFixed(1)} m`,// 距离
        style: {
          fontSize: '10px',
          color: '#FFFFFF',
          backgroundColor: 'rgba(0, 0, 0, 0.75)',
          borderColor: 'transparent',
        },
      });
      distances.push(distanceText);
    }
    root.$map.add([startMarker, polyline, ...text, ...circles, ...distances]);
    // 自动缩放地图到合适的视野级别
    root.$map.setFitView([startMarker, polyline]);
  }

  // 绘制动态轨迹
  const drawDynamicTrajectory = (sn: string, deviceInfo: any, host: any[]) => {
    if (coverMap[sn] && coverMap[sn].length) {// 如果地图已经画过了，先清除掉之前的绘画结果
      coverMap[sn].forEach(cover => root.$map.remove(cover))
      coverMap[sn] = []
    }
    const list = host.map((item: any) => {
      const data = {
        ...item,
        paths: wgs84togcj02(item.longitude, item.latitude),
      }
      delete data.latitude;
      delete data.longitude;
      return data;
    });
    const paths = list.map(item => item.paths);
    // 绘制轨迹折线
    const polyline = new AMap.Polyline({
      path: paths,
      strokeColor: '#2D8CF0',
      showDir: true,// 显示路线白色方向箭头
      strokeOpacity: 1,// 轮廓线透明度
      strokeWeight: 6,//线宽
      strokeStyle: 'solid',
    })
    // const serialList = list.filter((item) => item.type === 1);
    // // 序号
    // const text = serialList.map((item, index) => {
    //   return new AMap.Text({
    //     position: new AMap.LngLat(item.paths[0], item.paths[1]),
    //     offset: new AMap.Pixel(-8, -30),
    //     text: index + 1,
    //     style: {
    //       backgroundColor: 'transparent',
    //       borderColor: 'transparent',
    //     }
    //   })
    // })
    // // 序号下方圆形标记
    // const circles = serialList.map((item, index) => {
    //   return new AMap.Circle({
    //     center: new AMap.LngLat(item.paths[0], item.paths[1]),
    //     radius: 0.5, // 半径
    //     // strokeColor: 'white',
    //     fillColor: 'white',
    //     fillOpacity: 1,
    //     strokeWeight: 2,
    //   });
    // })
    // // 计算并显示每段线的距离
    // const distances = [];
    // const serialPaths = serialList.map(item => item.paths)
    // for (let i = 0; i < serialPaths.length - 1; i++) {
    //   const distance = AMap.GeometryUtil.distance(new AMap.LngLat(serialPaths[i][0], serialPaths[i][1]), new AMap.LngLat(serialPaths[i + 1][0], serialPaths[i + 1][1]));
    //   // 计算两个点之间的中点坐标
    //   const midLng = (serialPaths[i][0] + serialPaths[i + 1][0]) / 2;
    //   const midLat = (serialPaths[i][1] + serialPaths[i + 1][1]) / 2;
    //   const midPoint = new AMap.LngLat(midLng, midLat);
    //   // 在中点位置放置文本以显示距离
    //   const distanceText = new AMap.Text({
    //     position: midPoint,
    //     offset: new AMap.Pixel(-16, 10),
    //     text: `${distance.toFixed(1)} m`,// 距离
    //     style: {
    //       fontSize: '10px',
    //       color: '#FFFFFF',
    //       backgroundColor: 'rgba(0, 0, 0, 0.75)',
    //       borderColor: 'transparent',
    //     },
    //   });
    //   distances.push(distanceText);
    // }
    const other = [polyline]
    // 获取起飞点
    const homeList = list.filter(item => item.type === 0);
    if (homeList.length) {
      const startPosition = homeList[0].paths;
      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),// 位置偏移
      })
      other.push(startMarker);
    }
    // // 绘制小飞机图标
    // if (list.length) {
    //   const path = list[list.length - 1].paths;
    //   const angle = deviceInfo.attitude_head;// 角度
    //   const startIcon = new AMap.Icon({
    //     size: new AMap.Size(40, 40),
    //     image: droneIcon,
    //     imageSize: new AMap.Size(40, 40)
    //   })
    //   const endMarker = new AMap.Marker({
    //     position: new AMap.LngLat(path[0], path[path.length - 1]),
    //     icon: startIcon,
    //     offset: new AMap.Pixel(-20, -20),// 位置偏移
    //     angle: angle,// 旋转角度
    //   })
    //   other.push(endMarker);
    // }
    root.$map.add(other)
    coverMap[sn] = [other]
  }

  return {
    drawTrajectory,
    drawDynamicTrajectory
  }
}