2025.3.14

riku

2025-03-14 8372d022614a1897120802cf1bac90d61651177f

 src/views/satellitetelemetry/SatelliteProxy.js

@@ -1,104 +1,417 @@
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';
import { useCloned } from '@vueuse/core';

function clearAll(mapViews) {
  if (mapViews) {
    if (typeof mapViews.textViews === 'object') {
      map.remove(mapViews.textViews);
export class SatelliteProxy {
  // 地图网格相关对象
  mapViews;

  mapViewsMap = new Map();

  districtPolygon;

  events = new Map();

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

  clearAll(mapViews) {
    if (mapViews) {
      if (typeof mapViews.gridViews === 'object') {
        map.remove(mapViews.gridViews);
      }
    }
    if (typeof mapViews.gridViews === 'object') {
      map.remove(mapViews.gridViews);
    this.clearText(mapViews);
  }

  clearText(mapViews) {
    if (mapViews) {
      if (typeof mapViews.dataTxt === 'object') {
        map.remove(mapViews.dataTxt);
      }
      if (typeof mapViews.dataLayer === 'object') {
        map.remove(mapViews.dataLayer);
      }
      if (typeof mapViews.rankTxt === 'object') {
        map.remove(mapViews.rankTxt);
      }
      if (typeof mapViews.rankLayer === 'object') {
        map.remove(mapViews.rankLayer);
      }
    }
  }

  firstEvent;

  // 绘制网格线
  drawPolyline(gridInfo, event) {
    this.firstEvent = 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);
    // 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: {
          centerPoint: points[i],
          // gridPoints,
          gridCell: v
        }
      };
    });
    const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
    return { gridViews, gridPoints, points };
  }

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

  // 绘制监测数据排名文本
  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 : ''
      };
    });
    // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
    return gridMapUtil.drawGridText({
      points: data,
      textViews,
      anchor: 'bottom-center',
      type: 'rank'
    });
  }

  // 绘制监测数据值对应网格颜色
  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) {
      resGridViews = gridMapUtil.drawGridColorCustom(
        res,
        gridDataDetail,
        opacity,
        zIndex
      );
    } else {
      resGridViews = gridMapUtil.drawGridColor(
        res,
        gridDataDetail,
        'PM25',
        opacity,
        zIndex
      );
    }

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

    return { resGridViews, pointsRes };
  }

  // 卫星网格配置准备
  gridPrepare(gridInfo, event) {
    // clearText(mapViews);
    this.clearAll(this.mapViews);
    this.mapViews = this.drawPolyline(gridInfo, event);
  }

  // 绘制网格遥感数据值和网格颜色
  drawGrid({
    gridDataDetail,
    useCustomColor,
    opacity,
    zIndex,
    showDataTxt,
    showRankTxt,
    useDataTxtColor,
    mapViews
  }) {
    const _mapViews = mapViews ? mapViews : this.mapViews;
    // SatelliteProxy.clearText(mapViews);
    const { resGridViews, pointsRes } = this.drawColor({
      gridViews: _mapViews.gridViews,
      points: _mapViews.points,
      gridDataDetail: gridDataDetail,
      lastGridViews: _mapViews.lastGridViews,
      customColor: useCustomColor,
      opacity: opacity,
      zIndex: zIndex
    });
    _mapViews.lastGridViews = resGridViews;
    _mapViews.lastPoints = pointsRes;

    // 数据标记
    const { textViews: dataTxt, labelsLayer: dataLayer } = this.drawDataText(
      _mapViews.lastPoints,
      gridDataDetail,
      _mapViews.dataTxt,
      useCustomColor,
      useDataTxtColor
    );
    _mapViews.dataTxt = dataTxt;
    _mapViews.dataLayer = dataLayer;

    const { textViews: rankTxt, labelsLayer: rankLayer } = this.drawRankText(
      _mapViews.lastPoints,
      gridDataDetail,
      _mapViews.rankTxt,
      _mapViews.rankLayer
    );
    _mapViews.rankTxt = rankTxt;
    _mapViews.rankLayer = rankLayer;

    if (showDataTxt) {
      map.add(_mapViews.dataTxt);
    }

    if (showRankTxt) {
      map.add(_mapViews.rankTxt);
    }
  }

  drawTagGrid({
    tag,
    gridDataDetail,
    useCustomColor,
    opacity,
    zIndex,
    showDataTxt,
    showRankTxt,
    extData
  }) {
    if (!this.mapViewsMap.has(tag)) {
      const newMapViews = {
        gridViews: gridMapUtil.drawPolylines({
          points: this.mapViews.gridPoints,
          event: this.firstEvent
        }),
        gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
        points: JSON.parse(JSON.stringify(this.mapViews.points)),
        extData: extData
      };
      this.mapViewsMap.set(tag, newMapViews);
    }
    const _mapViews = this.mapViewsMap.get(tag);
    this.drawGrid({
      gridDataDetail,
      useCustomColor,
      opacity,
      zIndex,
      showDataTxt,
      showRankTxt,
      mapViews: _mapViews
    });
  }

  // 调整各类地图覆盖物的可见性
  changeVisibility({ tag, showGridViews, showDataTxt, showRankTxt }) {
    let _mapViewsList = [];
    if (this.mapViews) {
      _mapViewsList.push(this.mapViews);
    }
    if (tag && this.mapViewsMap.has(tag)) {
      _mapViewsList.push(this.mapViewsMap.get(tag));
    } else {
      this.mapViewsMap.forEach((v) => {
        _mapViewsList.push(v);
      });
    }
    if (showGridViews != undefined) {
      if (showGridViews) {
        // map.add(this.mapViews.lastGridViews);
        _mapViewsList.forEach((v) => {
          if (v.lastGridViews) map.add(v.lastGridViews);
        });
      } else {
        // map.remove(this.mapViews.lastGridViews);
        _mapViewsList.forEach((v) => {
          if (v.lastGridViews) map.remove(v.lastGridViews);
        });
      }
    }
    if (showDataTxt != undefined) {
      if (showDataTxt) {
        // map.add(this.mapViews.dataTxt);
        _mapViewsList.forEach((v) => {
          if (v.dataTxt) map.add(v.dataTxt);
        });
      } else {
        // map.remove(this.mapViews.dataTxt);
        _mapViewsList.forEach((v) => {
          if (v.dataTxt) map.remove(v.dataTxt);
        });
      }
    }
    if (showRankTxt != undefined) {
      if (showRankTxt) {
        // map.add(this.mapViews.rankTxt);
        _mapViewsList.forEach((v) => {
          if (v.rankTxt) map.add(v.rankTxt);
        });
      } else {
        // map.remove(this.mapViews.rankTxt);
        _mapViewsList.forEach((v) => {
          if (v.rankTxt) map.remove(v.rankTxt);
        });
      }
    }
  }

  changeGridOpacity({ tag, isOpacity, opacityValue }) {
    let _mapViewsList = [];
    if (this.mapViews) {
      _mapViewsList.push(this.mapViews);
    }
    if (tag && this.mapViewsMap.has(tag)) {
      _mapViewsList.push(this.mapViewsMap.get(tag));
    } else {
      this.mapViewsMap.forEach((v) => {
        _mapViewsList.push(v);
      });
    }
    _mapViewsList.forEach((v) => {
      if (v.lastGridViews) {
        v.lastGridViews.forEach((e) => {
          e.setOptions({
            fillOpacity:
              typeof opacityValue === 'number'
                ? opacityValue
                : isOpacity
                  ? 0.1
                  : 0.7
          });
        });
      }
    });
  }

  setGridEvent(name, event) {
    if (!this.events.has(name)) {
      this.events.set(name, []);
    }
    const list = this.events.get(name);
    if (list.length > 0) {
      const lastEvent = list[list.length - 1];
      this.mapViews.gridViews.forEach((polygon) => {
        polygon.off(name, lastEvent);
      });
    }
    this.events.get(name).push(event);
    this.mapViews.gridViews.forEach((polygon) => {
      polygon.on(name, event);
    });
  }

  goBackGridEvent(name) {
    if (this.events.has(name)) {
      const eventList = this.events.get(name);
      //先移除原有的事件
      const lastEvent = eventList.pop();
      this.mapViews.gridViews.forEach((polygon) => {
        polygon.off(name, lastEvent);
      });
      //获取上一个事件
      const event = eventList.pop();
      this.mapViews.gridViews.forEach((polygon) => {
        polygon.on(name, event);
      });
    }
  }
}

function clearText(mapViews) {
  if (mapViews) {
    if (typeof mapViews.dataTxt === 'object') {
      map.remove(mapViews.dataTxt);      
    }
    if (typeof mapViews.dataLayer === 'object') {
      map.remove(mapViews.dataLayer);      
    }
    if (typeof mapViews.rankTxt === 'object') {
      map.remove(mapViews.rankTxt);      
    }
    if (typeof mapViews.rankLayer === 'object') {
      map.remove(mapViews.rankLayer);      
    }
  }
}

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

  const gridPoints = gridInfo.map((v) => {
    return [
      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]
    ];
  });
  const gridViews = gridMapUtil.drawPolylines(gridPoints);
  return { gridViews, gridPoints, points };
}

// 绘制监测数据值
function drawDataText(points, gridData, textViews, labelsLayer) {
  const data = gridData.map((v, i) => {
    return {
      lnglat_GD: points[i],
      // data: v.pm25 ? (v.pm25 + 'μg/m³') : ''
      data: v.pm25 ? v.pm25 : ''
    };
  });
  // 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) => {
    return {
      lnglat_GD: points[i],
      // data: v.pm25 ? ('排名: ' + v.rank) : ''
      data: v.pm25 ? v.rank : ''
    };
  });
  // 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;
  });
  if (customColor) {
    gridMapUtil.drawGridColorCustom(gridViews, pm25Data);
  } else {
    gridMapUtil.drawGridColor(gridViews, pm25Data, 'PM25');
  }
}

export default {
  drawPolyline,
  drawDataText,
  drawRankText,
  drawColor,
  clearText,
  clearAll
};