调试自动生成网格融合图片功能（待完成）

riku

2025-09-03 b2392458ebf42594b9fc5390fda40d7a0a12f923

 src/utils/map/grid.js

@@ -4,6 +4,7 @@
import { map } from './index_old';
import calculate from './calculate';
import { Legend } from '@/model/Legend';
import { getGridDataDetailFactorValue } from '@/model/GridDataDetail';
import { getHexColor, getColorBetweenTwoColors } from '../color';

/**
@@ -80,11 +81,7 @@
  });
}

/**
 * 文本标记
 * 可修改position
 */
function textMaker({ position, text, anchor, type, color }) {
function textMakerStyle({ type, color }) {
  let style = {};
  if (type == 'data') {
    style = {
@@ -111,6 +108,15 @@
      'margin-bottom': '4px'
    };
  }
  return style;
}

/**
 * 文本标记
 * 可修改position
 */
function textMaker({ position, text, anchor, type, color }) {
  let style = textMakerStyle({ type, color });
  // eslint-disable-next-line no-undef
  return new AMap.Text({
    text: text,
@@ -264,7 +270,8 @@
        strokeWeight: 1, //线条宽度，默认为 2
        strokeColor: 'white', //线条颜色
        fillOpacity: 0,
        extData: p.extData
        extData: p.extData,
        zIndex: 11
      });

      if (typeof event === 'function') {
@@ -279,11 +286,19 @@
    return gridViews;
  },

  drawGridText({ points, textViews, anchor, type, isCustomColor, useColor }) {
  drawGridText({
    points,
    textViews,
    anchor,
    type,
    isCustomColor,
    useColor,
    factorName = 'PM25'
  }) {
    let colorList = [];
    if (useColor) {
      colorList = calGridColor({
        factorName: 'PM25',
        factorName,
        data: points.map((p) => p.data),
        isCustomColor: isCustomColor
      });
@@ -304,6 +319,33 @@
    });
    // map.add(_textViews);
    return { textViews: _textViews };
  },

  changeGridText({
    points,
    textViews,
    type,
    isCustomColor,
    useColor,
    factorName = 'PM25'
  }) {
    let colorList = [];
    if (useColor) {
      colorList = calGridColor({
        factorName,
        data: points.map((p) => p.data),
        isCustomColor: isCustomColor
      });
    }
    if (textViews) {
      textViews.forEach((t, i) => {
        t.setText(points[i].data);
        t.setStyle(
          textMakerStyle({ type, color: useColor ? colorList[i] : 'white' })
        );
      });
    }
    return { textViews };
  },

  drawGridTextLabel(points, textViews, labelsLayer, direction) {
@@ -348,15 +390,21 @@
   * @param {string} factorName 监测因子名称
   * @param {number} opacity 透明度
   */
  drawGridColor(gridViews, gridDataDetail, factorName, opacity, zIndex) {
  drawGridColor(gridViews, gridDataDetail, factorName, style) {
    let {
      strokeWeight = 1,
      strokeColor = 'white',
      opacity = 1,
      zIndex = 11
    } = style;
    const res = [];
    // 遍历卫星遥测数据数组
    gridDataDetail.forEach((d, i) => {
      if (d.pm25) {
      const data = getGridDataDetailFactorValue(d, factorName);
      if (data) {
        const grid = gridViews[i];

        // 根据遥测数据计算网格颜色
        const data = d.pm25;
        const { color, nextColor, range, nextRange } =
          Legend.getStandardColorAndNext(factorName, data);
        const ratio = (data - range) / (nextRange - range);
@@ -365,11 +413,27 @@
          nextColor.map((v) => v * 255),
          ratio
        );

        const _extData = grid.getExtData();
        grid.setOptions({
          zIndex: zIndex ? zIndex : 10,
          fillColor: _color,
          fillOpacity: opacity ? opacity : color[3] == 0 ? 0 : 0.7
          strokeWeight,
          strokeColor,
          zIndex,
          fillColor: _color, //多边形填充颜色
          fillOpacity: opacity,
          extData: {
            ..._extData,
            gridData: d
          }
        });
        if (d.gridStyle && style.isMixGridHighlight) {
          const _strokeWeight = d.gridStyle.strokeWeight;
          const _strokeColor = d.gridStyle.strokeColor;
          grid.setOptions({
            strokeWeight: _strokeWeight, //线条宽度，默认为 1
            strokeColor: _strokeColor //线条颜色
          });
        }

        res.push(grid);
      }
@@ -378,25 +442,26 @@
    return res;
  },

  drawGridColorCustom(gridViews, gridDataDetail, opacity) {
  drawGridColorCustom(gridViews, gridDataDetail, factorName) {
    var max, min;
    gridDataDetail.forEach((t) => {
      if (!t.pm25) return;
      if (!max || t.pm25 > max) {
        max = t.pm25;
      const data = getGridDataDetailFactorValue(t, factorName);
      if (!data) return;
      if (!max || data > max) {
        max = data;
      }
      if (!min || t.pm25 < min) {
        min = t.pm25;
      if (!min || data < min) {
        min = data;
      }
    });
    const res = [];
    // 遍历卫星遥测数据数组
    gridDataDetail.forEach((d, i) => {
      if (d.pm25) {
      const data = getGridDataDetailFactorValue(d, factorName);
      if (data) {
        const grid = gridViews[i];

        // 根据遥测数据计算网格颜色
        const data = d.pm25;
        const { color, nextColor, range, nextRange } =
          Legend.getCustomColorAndNext(data, min, max);
        const ratio = (data - range) / (nextRange - range);
@@ -407,8 +472,8 @@
          ratio
        );
        grid.setOptions({
          fillColor: _color,
          fillOpacity: opacity ? opacity : color[3] == 0 ? 0 : 0.7
          fillColor: _color //多边形填充颜色
          // fillOpacity: style.opacity ? style.opacity : color[3] == 0 ? 0 : 1
        });

        res.push(grid);