完善数据融合功能（未完成）

feiyu02

2025-01-03 4f1fb28dad6a4df83752dc9b60f504764f8e3dcb

 src/views/satellitetelemetry/SatelliteTelemetry.vue

@@ -1,15 +1,6 @@
<template>
  <el-row class="wrap">
    <el-col span="2">
      <!-- <el-button
      class="p-events-auto"
      type="info"
      icon="Memo"
      plain
      @click="draw"
    >
      绘制网格
    </el-button> -->
      <el-row>
        <SatelliteManage
          v-show="show"
@@ -20,6 +11,7 @@
          @row-click="handleRowClick"
          @show-rank="handleRankClick"
          @show-data="handleDataClick"
          @change-color="handleColorClick"
        ></SatelliteManage>
      </el-row>
    </el-col>
@@ -32,17 +24,19 @@
        ></CardButton>
      </el-row>
    </el-col>
    <!-- <el-row class="historical" justify="center">
      <SatelliteAnimation
        :loading="animaLoading"
        :grid-data="gridDataDetailList"
        :mapViews="mapViews"
      ></SatelliteAnimation>
    </el-row> -->
  </el-row>
  <SatelliteDataMix class="data-mix" @mix-data="handleMixDataClick">
  </SatelliteDataMix>
  <!-- <el-row class="historical" justify="center">
    <SatelliteAnimation
      :loading="animaLoading"
      :grid-data="gridDataDetailList"
      :mapViews="mapViews"
    ></SatelliteAnimation>
  </el-row> -->
</template>
<script setup>
import { map } from '@/utils/map/index_old';
import { map, onMapMounted } from '@/utils/map/index_old';
import calculate from '@/utils/map/calculate';
import marks from '@/utils/map/marks';
import grid from '@/utils/map/grid';
@@ -50,10 +44,38 @@
import { ref } from 'vue';
import gridApi from '@/api/gridApi';
import SatelliteManage from './component/SatelliteManage.vue';
import SatelliteDataMix from './component/SatelliteDataMix.vue';
import SatelliteProxy from './SatelliteProxy';
import { useFetchData } from '@/composables/fetchData';
import { useSatelliteGridStore } from '@/stores/satellite-grid';

// 查询长宁区行政区划
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: "#CC66CC", //线条颜色
          strokeColor: "#0066ff", //线条颜色      
        });
      }
      map.setFitView(); //将覆盖物调整到合适视野
    }
  });
})

const satelliteGridStore = useSatelliteGridStore();
const { loading, fetchData } = useFetchData(10000);
@@ -73,7 +95,10 @@
  satelliteGridStore.fetchGridCell(options.id).then(() => {
    drawGrid(satelliteGridStore.gridInfo);
  });
  satelliteGridStore.fetchGridData(options.id);
  satelliteGridStore.fetchGridData(options.id).then(()=>{
    max = satelliteGridStore.gridDataList.length
    fetchGridDataDetail(satelliteGridStore.gridDataList)
  });
}

function fetchGridDataDetail(dataList) {
@@ -113,24 +138,37 @@
  // SatelliteProxy.clearText(mapViews);
  // 文本标记
  const { textViews: dataTxt, labelsLayer: dataLayer } =
    SatelliteProxy.drawDataText(mapViews.points, gridData, mapViews.dataTxt, mapViews.dataLayer);
    SatelliteProxy.drawDataText(
      mapViews.points,
      gridData,
      mapViews.dataTxt,
      mapViews.dataLayer
    );
  mapViews.dataTxt = dataTxt;
  mapViews.dataLayer = dataLayer;
  const { textViews: rankTxt, labelsLayer: rankLayer } =
    SatelliteProxy.drawRankText(mapViews.points, gridData, mapViews.rankTxt, mapViews.rankLayer);
    SatelliteProxy.drawRankText(
      mapViews.points,
      gridData,
      mapViews.rankTxt,
      mapViews.rankLayer
    );
  mapViews.rankTxt = rankTxt;
  mapViews.rankLayer = rankLayer;
  SatelliteProxy.drawColor(mapViews.gridViews, gridData);
}

let selectedGridData;
function handleRowClick(row) {
  if (gridDataDetailMap.has(row.id)) {
    const gridData = gridDataDetailMap.get(row.id);
    selectedGridData = gridData;
    drawTextAndColor(gridData);
  } else {
    gridApi.fetchGridDataDetail(row.id, row.groupId).then((res) => {
      gridDataDetailMap.set(row.id, res.data);
      const gridData = res.data;
      selectedGridData = gridData;
      drawTextAndColor(gridData);
    });
  }
@@ -143,6 +181,18 @@
function handleDataClick(dataVisible) {
  dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer);
}

function handleColorClick(isStandardColor) {
  SatelliteProxy.drawColor(
    mapViews.gridViews,
    selectedGridData,
    !isStandardColor
  );
}

function handleMixDataClick(gridData) {
  handleRowClick(gridData);
}
</script>
<style scoped>
.satellite-manage {
@@ -153,5 +203,12 @@
  bottom: 10px;
  left: 0;
  right: 0;
  color: #0066ff;
}

.data-mix {
  position: absolute;
  right: 0;
  top: 60px;
}
</style>