污染溯源模块编写中

feiyu02

2025-03-03 7eb2abf43167d9db3fca2e7958b90ff1bea0cead

 src/views/satellitetelemetry/SatelliteProxy.js

@@ -1,70 +1,575 @@
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';

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

  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);
      }
    }
  }

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

  // 绘制监测数据值
  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');
  }

  // 绘制监测数据排名文本
  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');
  }

  // 绘制监测数据值对应网格颜色
  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
  }) {
    // SatelliteProxy.clearText(mapViews);
    const { resGridViews, pointsRes } = this.drawColor({
      gridViews: this.mapViews.gridViews,
      points: this.mapViews.points,
      gridDataDetail: gridDataDetail,
      lastGridViews: this.mapViews.lastGridViews,
      customColor: useCustomColor,
      opacity: opacity,
      zIndex: zIndex
    });
    this.mapViews.lastGridViews = resGridViews;
    this.mapViews.lastPoints = pointsRes;

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

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

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

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

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

  changeGridOpacity({ isOpacity, opacityValue }) {
    this.mapViews.lastGridViews.forEach((e) => {
      e.setOptions({
        fillOpacity: opacityValue ? 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 && typeof mapViews.textViews === 'object') {
    map.remove(mapViews.textViews);
  }
}
// // 地图网格相关对象
// let mapViews;

// 绘制网格线
function drawPolyline(gridInfo) {
  // 绘制网格
  const points = gridInfo.map((v) => {
    return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
  });
  const gridPoints = gridMapUtil.parseGridPoint(points);
  const gridViews = gridMapUtil.drawPolylines(gridPoints);
  return { gridViews, gridPoints, points };
}
// 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 drawDataText(points, gridData, textViews) {
  const data = gridData.map((v, i) => {
    return {
      lnglat_GD: points[i],
      data: v.pm25
    };
  });
  return gridMapUtil.drawGridText(data, textViews);
}
// function clearAll(mapViews) {
//   if (mapViews) {
//     if (typeof mapViews.gridViews === 'object') {
//       map.remove(mapViews.gridViews);
//     }
//   }
//   clearText(mapViews);
// }

// 绘制监测数据排名文本
function drawRankText(points, gridData) {
  const data = gridData.map((v, i) => {
    return {
      lnglat_GD: points[i],
      data: v.rank
    };
  });
  return gridMapUtil.drawGridText(data);
}
// 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 drawColor(gridViews, gridData) {
  const pm25Data = gridData.map((v) => {
    return v.pm25;
  });
  gridMapUtil.drawGridColor(gridViews, pm25Data, 'PM25');
}
// // 绘制网格线
// 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);

export default {
  drawPolyline,
  drawDataText,
  drawRankText,
  drawColor,
  clearText,
  clearAll
};
//   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
// };