新增对比色

Riku

2025-01-01 7b1293cec33b47680f08756bd1f8518d3cb1a729

新增对比色

 src/api/index.js

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

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

const $http = axios.create({

 src/model/Legend.js

@@ -148,7 +148,7 @@
    [0.87, 0.92, 0.03, 0.75],
    [0.8, 0.67, 0.04, 0.75],
    [0.92, 0.28, 0.07, 0.75],
    [0.6, 0.05, 0.05, 0.75]
    [0.96, 0.05, 0.05, 0.75]
  ],

  getStandardRange: function (name) {
@@ -297,7 +297,44 @@
      i = this._custom.length - 1;
    }
    return this._custom[i];
  },

  getCustomColorAndNext: function (data, min, max) {
    if (!data) {
      return {
        color: [0, 0, 0, 0],
        nextColor: [0, 0, 0, 0],
        range: 0,
        nextRange: 0
      };
  }

    // if (data == min) {
    //   console.log(data);
    // }

    var per = (max - min) / this._custom.length;
    var i = parseInt((data - min) / per);
    var range = min + i * per
    if (i >= this._custom.length - 1) {
      i = this._custom.length - 2;
      range = min + i * per
    }

    let nextIndex = i + 1;
    let nextRange = min + nextIndex * per
    if (nextIndex > this._custom.length - 1) {
      nextIndex = this._custom.length - 1;
      nextRange = min + nextIndex * per
    }

    return {
      color: this._custom[i],
      nextColor: this._custom[nextIndex],
      range,
      nextRange
    };
  },
};

export { Legend };

 src/utils/map/grid.js

@@ -259,26 +259,6 @@
  },

  drawGridColor(gridViews, texts, factorName) {
    // new Promise((resolve, reject) => {
    //   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
    //     );
    //     resolve({ g, _color, color });
    //   });
    // }).then((res) => {
    //   const { g, _color, color } = res;
    //   g.setOptions({
    //     fillColor: _color,
    //     fillOpacity: color[3]
    //   });
    // });
    gridViews.forEach((g, i) => {
      const data = parseFloat(texts[i]);
      const { color, nextColor, range, nextRange } =
@@ -294,5 +274,33 @@
        fillOpacity: color[3]
      });
    });
  },

  drawGridColorCustom(gridViews, texts) {
    var max,min
    texts.forEach(t => {
      if (!max || t > max) {
        max = t
  }
      if (!min || t < min) {
        min = t
      }
    });
    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 _color = getColorBetweenTwoColors(
        color.map((v) => v * 255),
        nextColor.map((v) => v * 255),
        ratio
      );
      g.setOptions({
        fillColor: _color,
        fillOpacity: color[3]
      });
    });
  },
};

 src/views/satellitetelemetry/SatelliteProxy.js

@@ -53,12 +53,16 @@
}

// 绘制监测数据值对应网格颜色
function drawColor(gridViews, gridData) {
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,

 src/views/satellitetelemetry/SatelliteTelemetry.vue

@@ -20,6 +20,7 @@
          @row-click="handleRowClick"
          @show-rank="handleRankClick"
          @show-data="handleDataClick"
          @change-color="handleColorClick"
        ></SatelliteManage>
      </el-row>
    </el-col>
@@ -32,13 +33,13 @@
        ></CardButton>
      </el-row>
    </el-col>
    <!-- <el-row class="historical" justify="center">
  </el-row>
  <el-row class="historical" justify="center">
      <SatelliteAnimation
        :loading="animaLoading"
        :grid-data="gridDataDetailList"
        :mapViews="mapViews"
      ></SatelliteAnimation>
    </el-row> -->
  </el-row>
</template>
<script setup>
@@ -53,7 +54,6 @@
import SatelliteProxy from './SatelliteProxy';
import { useFetchData } from '@/composables/fetchData';
import { useSatelliteGridStore } from '@/stores/satellite-grid';


const satelliteGridStore = useSatelliteGridStore();
const { loading, fetchData } = useFetchData(10000);
@@ -113,24 +113,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 +156,10 @@
function handleDataClick(dataVisible) {
  dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer);
}

function handleColorClick(isStandardColor) {
  SatelliteProxy.drawColor(mapViews.gridViews, selectedGridData, !isStandardColor);
}
</script>
<style scoped>
.satellite-manage {

 src/views/satellitetelemetry/component/SatelliteManage.vue

@@ -22,6 +22,14 @@
        >
          {{ dataVisible ? '隐藏数据' : '显示数据' }}
        </el-button>
        <el-button
          type="primary"
          class="el-button-custom"
          size="small"
          @click="handleColorClick"
        >
          {{ isStandardColor ? '绘制对比色' : '绘制标准色' }}
        </el-button>
        <el-table
          :data="gridDataList"
          table-layout="fixed"
@@ -98,8 +106,9 @@

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

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

// 查询网格信息和遥感数据组
function onSearch(options) {
@@ -116,6 +125,11 @@
  emits('showData', dataVisible.value);
}

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

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