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

riku

2025-02-24 0b700614e2f3e41df4655ba5469217e009c246ac

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

 src/api/index.js

@@ -10,7 +10,7 @@
}

if (debug) {
  ip1 = 'http://192.168.0.138:8084/';
  ip1 = 'http://192.168.0.110:8084/';
}

const $http = axios.create({

 src/components.d.ts

@@ -34,10 +34,14 @@
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElPopover: typeof import('element-plus/es')['ElPopover']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSlider: typeof import('element-plus/es')['ElSlider']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElText: typeof import('element-plus/es')['ElText']

 src/components/animation/SatelliteAnimation.vue

@@ -109,7 +109,10 @@
          that.mapViews.textViews = textViews;
          // eslint-disable-next-line vue/no-mutating-props
          that.mapViews.labelsLayer = labelsLayer;
          SatelliteProxy.drawColor(that.mapViews.gridViews, d);
          SatelliteProxy.drawColor({
            gridViews: that.mapViews.gridViews,
            gridDataDetail: d
          });
        }
      );
    },

 src/stores/mission.js

@@ -6,7 +6,7 @@
// èµ°èˆªä»»åŠ¡
export const useMissionStore = defineStore('mission', () => {
  const missionList = ref([]);
  const { loading, fetchData } = useFetchData();
  const { loading, fetchData } = useFetchData(1000);

  function fetchMission(type) {
    return fetchData((page, pageSize) => {

 src/stores/satellite-grid.js

@@ -11,9 +11,10 @@
  const allGridDataList = ref([]);
  // åŽŸå§‹ç½‘格数据组
  const gridDataList = computed(() => {
    return allGridDataList.value.filter((v) => {
      return v.type == 0;
    });
    // return allGridDataList.value.filter((v) => {
    //   return v.type == 0;
    // });
    return allGridDataList.value;
  });
  // èžåˆç½‘格数据组
  const mixGridDataList = computed(() => {

 src/utils/map/grid.js

@@ -193,47 +193,61 @@

  /**
   * ç»˜åˆ¶ä¸€ç»„多边形
   * @param {*} points
   * @param {Array} points ç½‘格坐标点数组
   * @param {Boolean} draw æ˜¯å¦åˆ›å»ºå®ŒæˆåŽåŒæ—¶ç»˜åˆ¶
   */
  drawPolylines(points) {
  drawPolylines({ points, draw, event }) {
    const gridViews = [];
    points.forEach((p) => {
      let path = p.map((v) => {
        // eslint-disable-next-line no-undef
        return new AMap.LngLat(v[0], v[1]);
      });
      //创建多边形 Polygon å®žä¾‹
      // eslint-disable-next-line no-undef
      var polygon = new AMap.Polygon({
        path: path, //路径
        path: p.path, //路径
        fillColor: '#fff', //多边形填充颜色
        strokeWeight: 1, //线条宽度，默认为 2
        strokeColor: 'white', //线条颜色
        fillOpacity: 0
        fillOpacity: 0,
        extData: p.extData
      });

      if (typeof event === 'function') {
        event(polygon);
      }
      gridViews.push(polygon);
    });
    map.add(gridViews);
    map.setFitView(gridViews);
    if (draw) {
      map.add(gridViews);
      map.setFitView(gridViews);
    }
    return gridViews;
  },

  drawGridText(points, textViews, anchor, type) {
    // if (textViews) {
    //   points.forEach((p, i) => {
    //     textViews[i].setPosition(p.lnglat_GD);
    //     textViews[i].setText(p.data);
    //   });
    //   return textViews;
    // } else {
    //   const _textViews = [];
    //   points.forEach((p) => {
    //     const m = textMaker(p.lnglat_GD, p.data, anchor, type);
    //     _textViews.push(m);
    //   });
    //   map.add(_textViews);
    //   return { textViews: _textViews };
    // }
    if (textViews) {
      points.forEach((p, i) => {
        textViews[i].setPosition(p.lnglat_GD);
        textViews[i].setText(p.data);
      });
      return textViews;
    } else {
      const _textViews = [];
      points.forEach((p) => {
        const m = textMaker(p.lnglat_GD, p.data, anchor, type);
        _textViews.push(m);
      });
      map.add(_textViews);
      return { textViews: _textViews };
      map.remove(textViews);
    }
    const _textViews = [];
    points.forEach((p) => {
      const m = textMaker(p.lnglat_GD, p.data, anchor, type);
      _textViews.push(m);
    });
    // map.add(_textViews);
    return { textViews: _textViews };
  },

  drawGridTextLabel(points, textViews, labelsLayer, direction) {
@@ -271,51 +285,111 @@
    }
  },

  drawGridColor(gridViews, texts, factorName) {
    gridViews.forEach((g, i) => {
      const data = parseFloat(texts[i]);
      const { color, nextColor, range, nextRange } =
        Legend.getStandardColorAndNext(factorName, data);
      const ratio = (data - range) / (nextRange - range);
      const _color = getColorBetweenTwoColors(
        color.map((v) => v * 255),
        nextColor.map((v) => v * 255),
        ratio
      );
      g.setOptions({
        fillColor: _color,
        fillOpacity: color[3] == 0 ? 0 : 0.7
      });
  /**
   * æ ¹æ®é¥æµ‹æ•°æ®ï¼Œè®¾ç½®å¯¹åº”网格的标准色，返回有数据的网格
   * @param {Array} gridViews ç½‘格多边形对象数组
   * @param {Array} gridDataDetail å«æ˜Ÿé¥æµ‹æ•°æ®æ•°ç»„
   * @param {string} factorName ç›‘测因子名称
   * @param {number} opacity é€æ˜Žåº¦
   */
  drawGridColor(gridViews, gridDataDetail, factorName, opacity, zIndex) {
    const res = [];
    // éåŽ†å«æ˜Ÿé¥æµ‹æ•°æ®æ•°ç»„
    gridDataDetail.forEach((d, i) => {
      if (d.pm25) {
        const grid = gridViews[i];

        // æ ¹æ®é¥æµ‹æ•°æ®è®¡ç®—网格颜色
        const data = d.pm25;
        const { color, nextColor, range, nextRange } =
          Legend.getStandardColorAndNext(factorName, data);
        const ratio = (data - range) / (nextRange - range);
        const _color = getColorBetweenTwoColors(
          color.map((v) => v * 255),
          nextColor.map((v) => v * 255),
          ratio
        );
        grid.setOptions({
          zIndex: zIndex ? zIndex : 10,
          fillColor: _color,
          fillOpacity: opacity ? opacity : color[3] == 0 ? 0 : 0.7
        });

        res.push(grid);
      }
    });

    return res;
    // gridViews.forEach((g, i) => {
    //   const data = parseFloat(gridDataDetail[i]);
    //   const { color, nextColor, range, nextRange } =
    //     Legend.getStandardColorAndNext(factorName, data);
    //   const ratio = (data - range) / (nextRange - range);
    //   const _color = getColorBetweenTwoColors(
    //     color.map((v) => v * 255),
    //     nextColor.map((v) => v * 255),
    //     ratio
    //   );
    //   g.setOptions({
    //     fillColor: _color,
    //     fillOpacity: color[3] == 0 ? 0 : 0.7
    //   });
    // });
  },

  drawGridColorCustom(gridViews, texts) {
  drawGridColorCustom(gridViews, gridDataDetail, opacity) {
    var max, min;
    texts.forEach((t) => {
      if (!t) return;
      if (!max || t > max) {
        max = t;
    gridDataDetail.forEach((t) => {
      if (!t.pm25) return;
      if (!max || t.pm25 > max) {
        max = t.pm25;
      }
      if (!min || t < min) {
        min = t;
      if (!min || t.pm25 < min) {
        min = t.pm25;
      }
    });
    gridViews.forEach((g, i) => {
      const data = parseFloat(texts[i]);
      const { color, nextColor, range, nextRange } =
        Legend.getCustomColorAndNext(data, min, max);
      const ratio = (data - range) / (nextRange - range);
    const res = [];
    // éåŽ†å«æ˜Ÿé¥æµ‹æ•°æ®æ•°ç»„
    gridDataDetail.forEach((d, i) => {
      if (d.pm25) {
        const grid = gridViews[i];

      const _color = getColorBetweenTwoColors(
        color.map((v) => v * 255),
        nextColor.map((v) => v * 255),
        ratio
      );
      g.setOptions({
        fillColor: _color,
        // fillOpacity: color[3]
        fillOpacity: color[3] == 0 ? 0 : 0.7
      });
        // æ ¹æ®é¥æµ‹æ•°æ®è®¡ç®—网格颜色
        const data = d.pm25;
        const { color, nextColor, range, nextRange } =
          Legend.getCustomColorAndNext(data, min, max);
        const ratio = (data - range) / (nextRange - range);

        const _color = getColorBetweenTwoColors(
          color.map((v) => v * 255),
          nextColor.map((v) => v * 255),
          ratio
        );
        grid.setOptions({
          fillColor: _color,
          fillOpacity: opacity ? opacity : color[3] == 0 ? 0 : 0.7
        });

        res.push(grid);
      }
    });

    return res;
    // gridViews.forEach((g, i) => {
    //   const data = parseFloat(gridDataDetail[i]);
    //   const { color, nextColor, range, nextRange } =
    //     Legend.getCustomColorAndNext(data, min, max);
    //   const ratio = (data - range) / (nextRange - range);

    //   const _color = getColorBetweenTwoColors(
    //     color.map((v) => v * 255),
    //     nextColor.map((v) => v * 255),
    //     ratio
    //   );
    //   g.setOptions({
    //     fillColor: _color,
    //     fillOpacity: color[3] == 0 ? 0 : 0.7
    //   });
    // });
  }
};

 src/utils/map/line.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,98 @@
import { map } from './index_old';
import calculate from './calculate';
import { getHexColor } from '../color';

var _polylineArr = [];

function newPolyline(path, color) {
  // eslint-disable-next-line no-undef
  return new AMap.Polyline({
    path: path,
    strokeStyle: 'solid',
    isOutline: true,
    borderWeight: 1,
    outlineColor: 'white',
    strokeWeight: 4, // çº¿æ¡å®½åº¦ï¼Œé»˜è®¤ä¸º 1
    strokeColor: color, // çº¿æ¡é¢œè‰²
    lineJoin: 'round', // æŠ˜çº¿æ‹ç‚¹è¿žæŽ¥å¤„样式
    showDir: true
  });
}

export default {
  drawLine(fDatas, factor) {
    const lnglats_GD = fDatas.lnglats_GD;
    const colors = factor.colors;

    this.hideLine();

    var path = calculate.parse2LngLat(lnglats_GD);

    let sIndex = 0;
    for (let i = 1; i < path.length; i++) {
      var r = lnglats_GD[i];
      var lastP = lnglats_GD[i - 1];
      // eslint-disable-next-line no-undef
      var distance = AMap.GeometryUtil.distance(r, lastP);
      const c = colors[i];
      const lastC = colors[i - 1];
      if (distance > 500 || c != lastC) {
        let _path, _color;
        // å½“两点距离超过500时，认为两点不连续，不绘制连线
        if (distance > 500) {
          _path = path.slice(sIndex, i);
          _color = getHexColor(
            lastC.map((v, index) => {
              if (index < lastC.length - 1) {
                return v * 255;
              } else {
                return v;
              }
            })
          );
        } else {
          _path = path.slice(sIndex, i + 1);
          _color = getHexColor(
            c.map((v, index) => {
              if (index < c.length - 1) {
                return v * 255;
              } else {
                return v;
              }
            })
          );
        }

        // åˆ›å»ºæŠ˜çº¿å®žä¾‹
        const polyline = newPolyline(_path, _color);
        _polylineArr.push(polyline);

        sIndex = i;
      }
    }
    if (sIndex == 0) {
      const c = colors[sIndex];
      const _color = getHexColor(
        c.map((v, index) => {
          if (index < c.length - 1) {
            return v * 255;
          } else {
            return v;
          }
        })
      );
      const polyline = newPolyline(path, _color);
      _polylineArr.push(polyline);
    }
    // å°†æŠ˜çº¿æ·»åŠ è‡³åœ°å›¾å®žä¾‹
    map.add(_polylineArr);
    return _polylineArr;
  },

  hideLine() {
    if (_polylineArr) {
      map.remove(_polylineArr);
      _polylineArr = [];
    }
  }
};

 src/views/HomePage.vue

@@ -10,8 +10,18 @@
      <!-- <MapLocation></MapLocation> -->
      <SceneSearch></SceneSearch>
      <MapScene></MapScene>
      <el-button @click="satelliteImportVisible = !satelliteImportVisible" type="primary" class="el-button-custom satellite-right-top p-events-auto">监测数据导入</el-button>
      <el-button @click="aodImportVisible = !aodImportVisible" type="primary" class="el-button-custom aod-right-top p-events-auto">AOD数据导入</el-button>
      <el-button
        @click="satelliteImportVisible = !satelliteImportVisible"
        type="primary"
        class="el-button-custom satellite-right-top p-events-auto"
        >监测数据导入</el-button
      >
      <el-button
        @click="aodImportVisible = !aodImportVisible"
        type="primary"
        class="el-button-custom aod-right-top p-events-auto"
        >AOD数据导入</el-button
      >
    </el-row>
    <!-- <CoreMenu></CoreMenu> -->
    <router-view></router-view>
@@ -25,8 +35,8 @@
import { ref } from 'vue';
import SatelliteImport from './satellitetelemetry/component/SatelliteImport.vue';
import AODImport from './satellitetelemetry/component/AODImport.vue';
const satelliteImportVisible = ref(false)
const aodImportVisible = ref(false)
const satelliteImportVisible = ref(false);
const aodImportVisible = ref(false);
</script>

<style scoped>

 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,34 +57,39 @@
}

// ç»˜åˆ¶ç½‘格线
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];
    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 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(gridPoints);
  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³') : ''
@@ -59,8 +101,8 @@
}

// ç»˜åˆ¶ç›‘测数据排名文本
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) : ''
@@ -72,18 +114,61 @@
}

// ç»˜åˆ¶ç›‘测数据值对应网格颜色
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,

 src/views/satellitetelemetry/SatelliteTelemetry copy.vue

@@ -122,7 +122,10 @@
  );
  mapViews.textViews = textViews;
  mapViews.labelsLayer = labelsLayer;
  SatelliteProxy.drawColor(mapViews.gridViews, gridData);
  SatelliteProxy.drawColor({
    gridViews: mapViews.gridViews,
    gridDataDetail: gridData
  });
}

function handleRowClick(row) {

 src/views/satellitetelemetry/SatelliteTelemetry.vue

@@ -12,6 +12,7 @@
          @show-rank="handleRankClick"
          @show-data="handleDataClick"
          @change-color="handleColorClick"
          @change-opacity="handleOpacityClick"
        ></SatelliteManage>
      </el-row>
    </el-col>
@@ -27,6 +28,8 @@
  </el-row>
  <SatelliteDataMix class="data-mix" @mix-data="handleMixDataClick">
  </SatelliteDataMix>
  <SatelliteMixTool :group-id="3"></SatelliteMixTool>

  <!-- <el-row class="historical" justify="center">
    <SatelliteAnimation
      :loading="animaLoading"
@@ -45,42 +48,15 @@
import gridApi from '@/api/gridApi';
import SatelliteManage from './component/SatelliteManage.vue';
import SatelliteDataMix from './component/SatelliteDataMix.vue';
import SatelliteMixTool from './component/SatelliteMixTool.vue';
import SatelliteProxy from './SatelliteProxy';
import { useFetchData } from '@/composables/fetchData';
import { useSatelliteGridStore } from '@/stores/satellite-grid';

// æŸ¥è¯¢é•¿å®åŒºè¡Œæ”¿åŒºåˆ’
function initDistrict() {
  onMapMounted(() => {
    // eslint-disable-next-line no-undef
    var district = new AMap.DistrictSearch({
      extensions: 'all', //返回行政区边界坐标等具体信息
      level: 'district' //设置查询行政区级别为区
    });
    district.search('长宁区', 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
          var polygon = new AMap.Polygon({
            map: map, //显示该覆盖物的地图对象
            strokeWeight: 3, //轮廓线宽度
            path: bounds[i], //多边形轮廓线的节点坐标数组
            fillOpacity: 0.1, //多边形填充透明度
            fillColor: '#CCF3FF', //多边形填充颜色
            // strokeColor: '#ffffff' //线条颜色
            strokeColor: '#0077ff' //线条颜色
          });
        }
        map.setFitView(); //将覆盖物调整到合适视野
      }
    });
  });
}
import { useSceneStore } from '@/stores/scene';

const satelliteGridStore = useSatelliteGridStore();
const { loading, fetchData } = useFetchData(10000);
const sceneStore = useSceneStore();
const animaLoading = ref(true);
const show = ref(true);

@@ -96,7 +72,8 @@
function onSearch(options) {
  satelliteGridStore.fetchGridCell(options.id).then(() => {
    drawGrid(satelliteGridStore.gridInfo);
    initDistrict();
    // initDistrict();
    SatelliteProxy.drawDistrict('长宁区');
  });
  satelliteGridStore.fetchGridData(options.id).then(() => {
    max = satelliteGridStore.gridDataList.length;
@@ -133,16 +110,46 @@

function drawGrid(gridInfo) {
  SatelliteProxy.clearAll(mapViews);
  mapViews = SatelliteProxy.drawPolyline(gridInfo);
  mapViews = SatelliteProxy.drawPolyline(gridInfo, (polygon) => {
    //鼠标移入事件
    polygon.on('mouseover', () => {
      polygon.setOptions({
        //修改多边形属性的方法
        strokeWeight: 2,
        strokeColor: 'red'
      });
    });
    //鼠标移出事件
    polygon.on('mouseout', () => {
      polygon.setOptions({
        strokeWeight: 1,
        strokeColor: 'white'
      });
    });
    //鼠标点击事件
    polygon.on('click', () => {
      const [lng, lat] = polygon.getExtData();
      sceneStore.radius = 0.5;
      sceneStore.searchScene(lng, lat);
    });
  });
}

// ç»˜åˆ¶ç½‘格遥感数据值和网格颜色
function drawTextAndColor(gridData) {
  // SatelliteProxy.clearText(mapViews);
  const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
    gridViews: mapViews.gridViews,
    points: mapViews.points,
    gridDataDetail: gridData,
    lastGridViews: mapViews.lastGridViews
  });
  mapViews.lastGridViews = resGridViews;
  mapViews.lastPoints = pointsRes;
  // æ–‡æœ¬æ ‡è®°
  const { textViews: dataTxt, labelsLayer: dataLayer } =
    SatelliteProxy.drawDataText(
      mapViews.points,
      mapViews.lastPoints,
      gridData,
      mapViews.dataTxt,
      mapViews.dataLayer
@@ -151,14 +158,13 @@
  mapViews.dataLayer = dataLayer;
  const { textViews: rankTxt, labelsLayer: rankLayer } =
    SatelliteProxy.drawRankText(
      mapViews.points,
      mapViews.lastPoints,
      gridData,
      mapViews.rankTxt,
      mapViews.rankLayer
    );
  mapViews.rankTxt = rankTxt;
  mapViews.rankLayer = rankLayer;
  SatelliteProxy.drawColor(mapViews.gridViews, gridData);
}

let selectedGridData;
@@ -188,11 +194,23 @@
}

function handleColorClick(isStandardColor) {
  SatelliteProxy.drawColor(
    mapViews.gridViews,
    selectedGridData,
    !isStandardColor
  );
  const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
    gridViews: mapViews.gridViews,
    points: mapViews.points,
    gridDataDetail: selectedGridData,
    lastGridViews: mapViews.lastGridViews,
    customColor: !isStandardColor
  });
  mapViews.lastGridViews = resGridViews;
  mapViews.lastPoints = pointsRes;
}

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

function handleMixDataClick(gridData) {
@@ -215,5 +233,6 @@
  position: absolute;
  right: 0;
  top: 60px;
  /* color: #0552f7; */
}
</style>

 src/views/satellitetelemetry/component/SatelliteDataMix.vue

@@ -3,7 +3,7 @@
    <el-col span="2">
      <el-row>
        <CardButton
          name="数据融合"
          name="网格溯源"
          direction="left"
          @click="() => (show = !show)"
        ></CardButton>

 src/views/satellitetelemetry/component/SatelliteManage.vue

@@ -6,30 +6,40 @@
          :loading="loading"
          @search="onSearch"
        ></SatelliteSearchBar>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleRankClick"
        >
          {{ rankVisible ? '隐藏排名' : '显示排名' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleDataClick"
        >
          {{ dataVisible ? '隐藏数据' : '显示数据' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleColorClick"
        >
          {{ isStandardColor ? '绘制对比色' : '绘制标准色' }}
        </el-button>
        <el-row class="m-b-8">
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            @click="handleRankClick"
          >
            {{ rankVisible ? '隐藏排名' : '显示排名' }}
          </el-button>
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            @click="handleDataClick"
          >
            {{ dataVisible ? '隐藏数据' : '显示数据' }}
          </el-button>
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            @click="handleColorClick"
          >
            {{ isStandardColor ? '绘制对比色' : '绘制标准色' }}
          </el-button>
          <el-button
            type="primary"
            class="el-button-custom"
            size="small"
            @click="handleOpacityClick"
          >
            {{ !isOpacity ? '透明化' : '取消透明化' }}
          </el-button>
        </el-row>
        <el-table
          :data="gridDataList"
          table-layout="fixed"
@@ -109,11 +119,18 @@
  }
});

const rankVisible = ref(true);
const dataVisible = ref(true);
const isStandardColor = ref(true)
const rankVisible = ref(false);
const dataVisible = ref(false);
const isStandardColor = ref(true);
const isOpacity = ref(false);

const emits = defineEmits(['search', 'rowClick', 'showRank', 'showData', 'changeColor']);
const emits = defineEmits([
  'search',
  'rowClick',
  'showRank',
  'showData',
  'changeColor'
]);

// æŸ¥è¯¢ç½‘格信息和遥感数据组
function onSearch(options) {
@@ -121,20 +138,25 @@
}

function handleRankClick() {
  rankVisible.value = !rankVisible.value
  rankVisible.value = !rankVisible.value;
  emits('showRank', rankVisible.value);
}

function handleDataClick() {
  dataVisible.value = !dataVisible.value
  dataVisible.value = !dataVisible.value;
  emits('showData', dataVisible.value);
}

function handleColorClick() {
  isStandardColor.value = !isStandardColor.value
  isStandardColor.value = !isStandardColor.value;
  emits('changeColor', isStandardColor.value);
}

function handleOpacityClick() {
  isOpacity.value = !isOpacity.value;
  emits('changeOpacity', isOpacity.value);
}

function handleRowClick(row, col, event) {
  emits('rowClick', row);
}

 src/views/satellitetelemetry/component/SatelliteMixTool.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,311 @@
<template>
  <CardDialog
    v-model="dialogVisible"
    title="走航融合"
    draggable
    :modal="false"
    width="400px"
  >
    <template #default>
      <el-row>
        <OptionMission v-model="mission"></OptionMission>
        <el-text size="small" :type="fusionData ? 'success' : 'warning'">{{
          fusionData ? '走航数据已融合' : '走航数据未融合'
        }}</el-text>
      </el-row>
      <el-row>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          :disabled="!gridCellList || !fusionData"
          @click="handleFusionClick"
        >
          {{ '叠加融合' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleGridClick"
        >
          {{ gridVisible ? '隐藏融合' : '显示融合' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          :loading="loading"
          @click="handleUnderwayClick"
        >
          {{ underwayVisible ? '隐藏走航路线' : '显示走航路线' }}
        </el-button>
      </el-row>
      <el-row class="m-t-8">
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleRankClick"
        >
          {{ rankVisible ? '隐藏排名' : '显示排名' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleDataClick"
        >
          {{ dataVisible ? '隐藏数据' : '显示数据' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleColorClick"
        >
          {{ isStandardColor ? '绘制对比色' : '绘制标准色' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleOpacityClick"
        >
          {{ !isOpacity ? '透明化' : '取消透明化' }}
        </el-button>
      </el-row>
    </template>
    <template #footer>
      <el-row justify="start" align="middle" class="p-b-2 one-row">
        <!-- <el-text size="small" type="warning">搜索范围</el-text> -->
      </el-row>
    </template>
  </CardDialog>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import moment from 'moment';
import { map, onMapMounted } from '@/utils/map/index_old';
import gridApi from '@/api/gridApi';
import SatelliteProxy from '../SatelliteProxy';

const props = defineProps({
  groupId: {
    type: Number,
    default: 3
  }
});

const dialogVisible = ref(true);
const mission = ref(undefined);

const gridCellList = ref(undefined);
const fusionData = ref(undefined);
const gridDataDetailMap = new Map();

const gridVisible = ref(true);
const underwayVisible = ref(false);
const rankVisible = ref(false);
const dataVisible = ref(false);
const isStandardColor = ref(true);
const isOpacity = ref(false);

// åœ°å›¾ç½‘格相关对象
let mapViews;

// æ£€æŸ¥èµ°èˆªæ•°æ®æ˜¯å¦å’Œ100米网格已融合
function checkUnderwayFusionResult() {
  const time = moment(mission.value.startTime).format('YYYY-MM-DD HH:mm:ss');
  gridApi.fetchGridData(props.groupId, time, 3).then((res) => {
    if (res.data.length > 0) {
      fusionData.value = res.data[0];
    } else {
      fusionData.value = undefined;
    }
  });
}

function drawGrid(gridInfo) {
  SatelliteProxy.clearAll(mapViews);
  mapViews = SatelliteProxy.drawPolyline(gridInfo);
}

// ç»˜åˆ¶ç½‘格遥感数据值和网格颜色
function drawTextAndColor(gridData) {
  const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
    gridViews: mapViews.gridViews,
    points: mapViews.points,
    gridDataDetail: gridData,
    lastGridViews: mapViews.lastGridViews,
    opacity: 1,
    zIndex: 11
  });
  mapViews.lastGridViews = resGridViews;
  mapViews.lastPoints = pointsRes;
  // æ–‡æœ¬æ ‡è®°
  const { textViews: dataTxt, labelsLayer: dataLayer } =
    SatelliteProxy.drawDataText(
      mapViews.lastPoints,
      gridData,
      mapViews.dataTxt,
      mapViews.dataLayer
    );
  mapViews.dataTxt = dataTxt;
  mapViews.dataLayer = dataLayer;
  const { textViews: rankTxt, labelsLayer: rankLayer } =
    SatelliteProxy.drawRankText(
      mapViews.lastPoints,
      gridData,
      mapViews.rankTxt,
      mapViews.rankLayer
    );
  mapViews.rankTxt = rankTxt;
  mapViews.rankLayer = rankLayer;
}

watch(mission, (nV, oV) => {
  if (nV != oV) {
    checkUnderwayFusionResult();
    search(nV);
  }
});

watch(
  () => props.groupId,
  (nV, oV) => {
    if (nV != oV) {
      gridApi.fetchGridCell(nV).then((res) => {
        gridCellList.value = res.data;
        drawGrid(gridCellList.value);
      });
    }
  },
  {
    immediate: true
  }
);

let selectedGridData;
// å åŠ èžåˆ
function handleFusionClick() {
  const d = fusionData.value;
  if (gridDataDetailMap.has(d.id)) {
    const gridData = gridDataDetailMap.get(d.id);
    selectedGridData = gridData;
    drawTextAndColor(gridData);
  } else {
    gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
      gridDataDetailMap.set(d.id, res.data);
      const gridData = res.data;
      selectedGridData = gridData;
      drawTextAndColor(gridData);
    });
  }
}

function handleGridClick() {
  gridVisible.value = !gridVisible.value;
  gridVisible.value
    ? map.add(mapViews.lastGridViews)
    : map.remove(mapViews.lastGridViews);
}

function handleUnderwayClick() {
  underwayVisible.value = !underwayVisible.value;
  underwayVisible.value ? draw() : mapLine.hideLine();
}

function handleRankClick() {
  rankVisible.value = !rankVisible.value;
  rankVisible.value ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt);
}

function handleDataClick() {
  dataVisible.value = !dataVisible.value;
  dataVisible.value ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt);
}

function handleColorClick() {
  isStandardColor.value = !isStandardColor.value;
  const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
    gridViews: mapViews.gridViews,
    points: mapViews.points,
    gridDataDetail: selectedGridData,
    lastGridViews: mapViews.lastGridViews,
    customColor: !isStandardColor.value,
    opacity: 1,
    zIndex: 11
  });
  mapViews.lastGridViews = resGridViews;
  mapViews.lastPoints = pointsRes;
}

function handleOpacityClick() {
  isOpacity.value = !isOpacity.value;
  mapViews.lastGridViews.forEach((e) => {
    e.setOptions({
      fillOpacity: isOpacity.value ? 0.1 : 1
    });
  });
}

/**走航轨迹*******************************************************************/
import { FactorDatas } from '@/model/FactorDatas';
import sector from '@/utils/map/sector';
import mapLine from '@/utils/map/line';
import mapUtil from '@/utils/map/util';
import { fetchHistoryData } from '@/utils/factor/data';
import { useFetchData } from '@/composables/fetchData';

onMounted(() => (isUnmounted.value = false));
onUnmounted(() => {
  mapUtil.clearMap();
  isUnmounted.value = true;
});

const { loading, fetchData } = useFetchData(10000);

const isUnmounted = ref(false);
const deviceType = ref(undefined);
const drawMode = ref(0);
// ç›‘测数据
const factorDatas = ref(new FactorDatas());
// pm2.5
const factorType = 6;

function onFetchData(dType, data) {
  if (isUnmounted.value) return;
  // todo æ ¹æ®è®¾å¤‡ç±»åž‹åˆ‡æ¢åœ°å›¾ç›‘测因子展示单选框、折线图复选框、数据表格复选框的因子类型
  deviceType.value = dType;
  factorDatas.value.setData(data, drawMode.value, () => {
    factorDatas.value.refreshHeight(factorType.value);
  });
}

function search(option) {
  const { deviceType, deviceCode, startTime, endTime } = option;
  // deviceType.value = deviceType;
  // deviceCode.value = deviceCode;
  const _startTime = moment(startTime).format('YYYY-MM-DD HH:mm:ss');
  const _endTime = moment(endTime).format('YYYY-MM-DD HH:mm:ss');
  fetchData((page, pageSize) => {
    return fetchHistoryData({
      deviceType,
      deviceCode,
      startTime: _startTime,
      endTime: _endTime,
      page,
      perPage: pageSize
    }).then((res) => onFetchData(deviceType, res.data));
  });
}

function draw() {
  // åˆ·æ–°å›¾ä¾‹
  const factor = factorDatas.value.factor[factorType];
  sector.clearSector();
  factorDatas.value.refreshHeight(factorType);
  mapLine.drawLine(factorDatas.value, factor);
}
</script>