2025.3.14

riku

2025-03-14 8372d022614a1897120802cf1bac90d61651177f

 src/views/satellitetelemetry/SatelliteProxy.js

@@ -1,12 +1,18 @@
import calculate from '@/utils/map/calculate';
import gridMapUtil from '@/utils/map/grid';
import { map, onMapMounted } from '@/utils/map/index_old';
import { useCloned } from '@vueuse/core';

export class SatelliteProxy {
  // 地图网格相关对象
  mapViews;

  mapViewsMap = new Map();

  districtPolygon;

  events = new Map();

  // 绘制区县边界
  drawDistrict(districtName, isNew) {
    onMapMounted(() => {
@@ -69,8 +75,11 @@
    }
  }

  firstEvent;

  // 绘制网格线
  drawPolyline(gridInfo, event) {
    this.firstEvent = event;
    // 绘制网格
    const points = gridInfo.map((v) => {
      return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
@@ -93,7 +102,11 @@
        ]
          // eslint-disable-next-line no-undef
          .map((d) => new AMap.LngLat(d[0], d[1])),
        extData: points[i]
        extData: {
          centerPoint: points[i],
          // gridPoints,
          gridCell: v
        }
      };
    });
    const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
@@ -101,7 +114,7 @@
  }

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

  // 绘制监测数据排名文本
@@ -123,7 +143,12 @@
      };
    });
    // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
    return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank');
    return gridMapUtil.drawGridText({
      points: data,
      textViews,
      anchor: 'bottom-center',
      type: 'rank'
    });
  }

  // 绘制监测数据值对应网格颜色
@@ -175,7 +200,7 @@
      map.remove(lastGridViews);
    }
    map.add(resGridViews);
    map.setFitView(resGridViews);
    // map.setFitView(resGridViews);

    return { resGridViews, pointsRes };
  }
@@ -189,355 +214,204 @@

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

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

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

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

    if (showRankTxt) {
      map.add(this.mapViews.rankTxt);
      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({ showGridViews, showDataTxt, showRankTxt }) {
  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) {
      showGridViews
        ? map.add(this.mapViews.lastGridViews)
        : map.remove(this.mapViews.lastGridViews);
      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) {
      showDataTxt
        ? map.add(this.mapViews.dataTxt)
        : map.remove(this.mapViews.dataTxt);
      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) {
      showRankTxt
        ? map.add(this.mapViews.rankTxt)
        : map.remove(this.mapViews.rankTxt);
      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({ isOpacity, opacityValue }) {
    this.mapViews.lastGridViews.forEach((e) => {
      e.setOptions({
        fillOpacity: opacityValue ? opacityValue : isOpacity ? 0.1 : 0.7
  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(event) {
  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) => {
      event(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);
      });
    }
  }
}

// // 地图网格相关对象
// let mapViews;

// 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) {
//     if (typeof mapViews.gridViews === 'object') {
//       map.remove(mapViews.gridViews);
//     }
//   }
//   clearText(mapViews);
// }

// 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, 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: points[i]
//     };
//   });
//   const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
//   return { gridViews, gridPoints, points };
// }

// // 绘制监测数据值
// 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 : ''
//     };
//   });
//   // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
//   return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data');
// }

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

// // 绘制监测数据值对应网格颜色
// 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) {
//     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 };
// }

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

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

//   // 数据标记
//   const { textViews: dataTxt, labelsLayer: dataLayer } = drawDataText(
//     mapViews.lastPoints,
//     gridData,
//     mapViews.dataTxt,
//     mapViews.dataLayer
//   );
//   mapViews.dataTxt = dataTxt;
//   mapViews.dataLayer = dataLayer;

//   const { textViews: rankTxt, labelsLayer: rankLayer } = drawRankText(
//     mapViews.lastPoints,
//     gridData,
//     mapViews.rankTxt,
//     mapViews.rankLayer
//   );
//   mapViews.rankTxt = rankTxt;
//   mapViews.rankLayer = rankLayer;

//   if (showDataTxt) {
//     map.add(mapViews.dataTxt);
//   }

//   if (showRankTxt) {
//     map.add(mapViews.rankTxt);
//   }
// }

// // 调整各类地图覆盖物的可见性
// function changeVisibility({ showGridViews, showDataTxt, showRankTxt }) {
//   if (showGridViews != undefined) {
//     showGridViews ? map.add(mapViews.lastGridViews) : map.remove(mapViews.lastGridViews);
//   }
//   if (showDataTxt != undefined) {
//     showDataTxt ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt);
//   }
//   if (showRankTxt != undefined) {
//     showRankTxt ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt);
//   }
// }

// function changeGridOpacity({ isOpacity, opacityValue }) {
//   mapViews.lastGridViews.forEach((e) => {
//     e.setOptions({
//       fillOpacity: opacityValue ? opacityValue : isOpacity ? 0.1 : 0.7
//     });
//   });
// }

// export default {
//   drawDistrict,
//   drawPolyline,
//   drawDataText,
//   drawRankText,
//   drawColor,
//   gridPrepare,
//   drawGrid,
//   changeVisibility,
//   changeGridOpacity,
//   clearText,
//   clearAll
// };