fix:优化 map

wanglizhong

2025-05-05 2ca520cee7b905dc5ddaef59a04ba1e6881c84e4

fix:优化 map

 ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/VehicleGpsController.java

@@ -31,11 +31,9 @@
public class VehicleGpsController extends BaseController {
    @Autowired
    private IVehicleGpsService vehicleGpsService;

    @Anonymous
    /**
   /**
     * 查询车辆GPS坐标列表
     */
     */  
    @PreAuthorize("@ss.hasPermi('system:gps:list')")
    @GetMapping("/list")
    public TableDataInfo list(VehicleGps vehicleGps) {
@@ -43,6 +41,13 @@
        List<VehicleGps> list = vehicleGpsService.selectVehicleGpsList(vehicleGps);
        return getDataTable(list);
    }
    @Anonymous(needSign=true)   
    @GetMapping("/anonymousList")
    public TableDataInfo anonymousList(VehicleGps vehicleGps) {
        startPage();
        List<VehicleGps> list = vehicleGpsService.selectVehicleGpsList(vehicleGps);
        return getDataTable(list);
    }

    /**
     * 导出车辆GPS坐标列表

 ruoyi-ui/src/api/system/gps.js

@@ -5,7 +5,23 @@
  return request({
    url: '/system/gps/list',
    method: 'get',
    params: query
    params: {
      ...query
    
    }
  })
}
//anonymousList
export function anonymousList(query) {
  return request({
    url: '/system/gps/anonymousList',
    method: 'get',
    params: {
      ...query,
      appId: query.appId,
      sign: query.sign,
      timestamp: query.timestamp
    }
  })
}


 ruoyi-ui/src/views/system/gps/map.vue

@@ -104,7 +104,7 @@
</template>

<script>
import { listGps } from "@/api/system/gps";
import { anonymousList } from "@/api/system/gps";

export default {
  name: "GpsMap",
@@ -126,9 +126,12 @@
      dateRange: [],
      // 查询参数
      queryParams: {
        vehicleNo: undefined,
        orderByColumn: "collect_time",
        isAsc: "desc",
        pageNum: 1,
        pageSize: 10,
        deviceId: null,
        appId: null,
        sign: null,
        timestamp: null
      },
      // 地图对象
      map: null,
@@ -156,9 +159,19 @@
    if (query.vehicleNo) {
      this.queryParams.vehicleNo = query.vehicleNo;
    }
    // 设置认证参数
    if (query.appId) {
      this.queryParams.appId = query.appId;
    }
    if (query.sign) {
      this.queryParams.sign = query.sign;
    }
    if (query.timestamp) {
      this.queryParams.timestamp = query.timestamp;
    }
    // 设置时间范围
    if (query.startTime && query.endTime) {
      this.dateRange = [query.startTime, query.endTime];
    if (query.beginTime && query.endTime) {
      this.dateRange = [query.beginTime, query.endTime];
    }
    this.getList();
  },
@@ -166,6 +179,10 @@
    // 动态加载百度地图API
    this.loadBMapScript().then(() => {
      this.initMap();
      window.initMapFlag=true;
      if(window.loadGpsList){
        this.drawTrack()
      }
    });
  },
  methods: {
@@ -205,15 +222,16 @@
    },
    /** 查询GPS列表 */
    getList() {
      this.loading = true;
      listGps(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.gpsList = response.rows;
          this.total = response.total;
          this.loading = false;
      this.loading = true;      
      anonymousList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.gpsList = response.rows;
        this.total = response.total;
        this.loading = false;
        window.loadGpsList=true;
        if(window.initMapFlag){
          this.drawTrack();
        }
      );
      });
    },
    async translatePoints(points) {
      // 将WGS84坐标转换为百度坐标
@@ -246,6 +264,7 @@
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      // 启用滚轮放大缩小
      this.map.enableScrollWheelZoom();
      console.log("initMap 初始化地图")
    },
     /** 计算两点之间的距离（米） */
     getDistance(point1, point2) {
@@ -258,34 +277,7 @@
        return Math.atan2(dy, dx) * 180 / Math.PI;
      },

     /** 在两点之间插入平滑点 */
     getSmoothPoints(point1, point2) {
        const distance = this.getDistance(point1, point2);
        if (distance < this.minDistance) {
          return [point1, point2];
        }
        
        const angle = this.getAngle(point1, point2);
        const midPoint = new BMap.Point(
          (point1.lng + point2.lng) / 2,
          (point1.lat + point2.lat) / 2
        );
        
        // 计算控制点
        const controlPoint = new BMap.Point(
          midPoint.lng + this.smoothFactor * distance * Math.cos((angle + 90) * Math.PI / 180),
          midPoint.lat + this.smoothFactor * distance * Math.sin((angle + 90) * Math.PI / 180)
        );
        
        // 使用二次贝塞尔曲线生成平滑点
        const points = [];
        for (let t = 0; t <= 1; t += 0.1) {
          const x = Math.pow(1 - t, 2) * point1.lng + 2 * (1 - t) * t * controlPoint.lng + Math.pow(t, 2) * point2.lng;
          const y = Math.pow(1 - t, 2) * point1.lat + 2 * (1 - t) * t * controlPoint.lat + Math.pow(t, 2) * point2.lat;
          points.push(new BMap.Point(x, y));
        }
        return points;
      },
   

    /** 绘制轨迹 */
    async drawTrack() {
@@ -333,11 +325,18 @@
      translatePoints.forEach((item, index) => {
        const bdPoint = item;

        // 只在起点和终点创建标记
        if (index === 0 || index === translatePoints.length - 1) {
        // 判断起点和终点是否相同
        const isStartPoint = index === 0;
        const isEndPoint = index === translatePoints.length - 1;
        const isStartEndSame = isStartPoint && isEndPoint && 
          translatePoints[0].lng === translatePoints[translatePoints.length - 1].lng && 
          translatePoints[0].lat === translatePoints[translatePoints.length - 1].lat;

        // 只在起点和终点创建标记，且起点和终点不同时才显示起点标记
        if ((isStartPoint && !isStartEndSame) || isEndPoint) {
          let marker;
          let direction=currentSegment[index].direction;
          if (index === 0) {
          if (isStartPoint && !isStartEndSame) {
            // 起点显示"起"字
            const label = new BMap.Label("起", {
              offset: new BMap.Size(0, 0),
@@ -410,12 +409,6 @@
          this.map.addOverlay(marker);
          this.markers.push(marker);
        }
        // const smoothPoints = [];
        // for (let i = 0; i < points.length - 1; i++) {
        //   const segmentPoints = this.getSmoothPoints(points[i], points[i + 1]);
        //   smoothPoints.push(...segmentPoints);
        // }
        // smoothPoints.push(points[points.length - 1]);

        // 如果是最后一个点，绘制轨迹线
        if (index === currentSegment.length - 1) {