1. 初步完成走航融合相关功能

riku

2025-02-24 0b700614e2f3e41df4655ba5469217e009c246ac

 src/views/satellitetelemetry/SatelliteProxy.js

@@ -1,6 +1,43 @@
import calculate from '@/utils/map/calculate';
import gridMapUtil from '@/utils/map/grid';
import { map } from '@/utils/map/index_old';
import { map, onMapMounted } from '@/utils/map/index_old';

let districtPolygon;
// 绘制区县边界
function drawDistrict(districtName, isNew) {
  onMapMounted(() => {
    if (districtPolygon && !isNew) {
      map.remove(districtPolygon);
      map.add(districtPolygon);
    } else {
      // eslint-disable-next-line no-undef
      var district = new AMap.DistrictSearch({
        extensions: 'all', //返回行政区边界坐标等具体信息
        level: 'district' //设置查询行政区级别为区
      });
      district.search(districtName, function (status, result) {
        var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
        if (bounds) {
          for (var i = 0; i < bounds.length; i++) {
            //生成行政区划 polygon
            // eslint-disable-next-line no-undef
            districtPolygon = new AMap.Polygon({
              map: map, //显示该覆盖物的地图对象
              strokeWeight: 2, //轮廓线宽度
              path: bounds[i], //多边形轮廓线的节点坐标数组
              fillOpacity: 0, //多边形填充透明度
              fillColor: '#CCF3FF', //多边形填充颜色
              // strokeColor: '#ffffff' //线条颜色
              strokeColor: '#0552f7', //线条颜色
              zIndex: 9
            });
          }
          map.setFitView(); //将覆盖物调整到合适视野
        }
      });
    }
  });
}

function clearAll(mapViews) {
  if (mapViews) {
@@ -20,51 +57,118 @@
}

// 绘制网格线
function drawPolyline(gridInfo) {
function drawPolyline(gridInfo, event) {
  // 绘制网格
  const points = gridInfo.map((v) => {
    return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
    // return [v.longitude, v.latitude];
  });
  const gridPoints = gridMapUtil.parseGridPoint(points);
  const gridViews = gridMapUtil.drawPolylines(gridPoints);
  // const gridPoints = gridMapUtil.parseGridPoint(points);
  // console.log('gridPoints:', gridPoints);

  const gridPoints = gridInfo.map((v, i) => {
    return {
      path: [
        calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat),
        calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat),
        calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat),
        calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat)
        // [v.point1Lon, v.point1Lat],
        // [v.point2Lon, v.point2Lat],
        // [v.point3Lon, v.point3Lat],
        // [v.point4Lon, v.point4Lat]
      ]
        // eslint-disable-next-line no-undef
        .map((d) => new AMap.LngLat(d[0], d[1])),
      extData: points[i]
    };
  });
  const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
  return { gridViews, gridPoints, points };
}

// 绘制监测数据值
function drawDataText(points, gridData, textViews, labelsLayer) {
  const data = gridData.map((v, i) => {
function drawDataText(points, gridDataDetail, textViews, labelsLayer) {
  const data = gridDataDetail.map((v, i) => {
    return {
      lnglat_GD: points[i],
      data: v.pm25 ? (v.pm25 + 'μg/m³') : ''
      // data: v.pm25 ? (v.pm25 + 'μg/m³') : ''
      data: v.pm25 ? v.pm25 : ''
    };
  });
  return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
  // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
  return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data');
}

// 绘制监测数据排名文本
function drawRankText(points, gridData, textViews, labelsLayer) {
  const data = gridData.map((v, i) => {
function drawRankText(points, gridDataDetail, textViews, labelsLayer) {
  const data = gridDataDetail.map((v, i) => {
    return {
      lnglat_GD: points[i],
      data: v.pm25 ? ('排名: ' + v.rank) : ''
      // data: v.pm25 ? ('排名: ' + v.rank) : ''
      data: v.pm25 ? v.rank : ''
    };
  });
  return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
  // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
  return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank');
}

// 绘制监测数据值对应网格颜色
function drawColor(gridViews, gridData, customColor) {
  const pm25Data = gridData.map((v) => {
    return v.pm25;
function drawColor({
  gridViews,
  points,
  gridDataDetail,
  lastGridViews,
  opacity,
  zIndex,
  customColor
}) {
  // 根据数据筛选有数据的网格
  const res = [];
  // 以及对应的中心点坐标
  const pointsRes = [];
  gridDataDetail.forEach((d) => {
    // 根据数据关联的网格编号，找到对应网格
    const cellId = d.cellId;
    if (cellId > gridViews.length) {
      throw Error(
        '遥测数据的网格索引编号超出网格组范围，数据和网格组可能不对应'
      );
    }
    res.push(gridViews[cellId - 1]);
    pointsRes.push(points[cellId - 1]);
  });

  // 根据绘制颜色方式绘制网格
  let resGridViews;
  if (customColor) {
    gridMapUtil.drawGridColorCustom(gridViews, pm25Data);
    resGridViews = gridMapUtil.drawGridColorCustom(
      res,
      gridDataDetail,
      opacity,
      zIndex
    );
  } else {
    gridMapUtil.drawGridColor(gridViews, pm25Data, 'PM25');
    resGridViews = gridMapUtil.drawGridColor(
      res,
      gridDataDetail,
      'PM25',
      opacity,
      zIndex
    );
  }

  if (lastGridViews) {
    map.remove(lastGridViews);
  }
  map.add(resGridViews);
  map.setFitView(resGridViews);

  return { resGridViews, pointsRes };
}

export default {
  drawDistrict,
  drawPolyline,
  drawDataText,
  drawRankText,