各模块功能新增

riku

2025-03-07 2592dc279ec82bf3649a4dbe644c6416263a10ef

 src/utils/map/grid.js

@@ -84,22 +84,39 @@
 * 文本标记
 * 可修改position
 */
function textMaker(position, text, anchor) {
function textMaker({ position, text, anchor, type, color }) {
  let style = {};
  if (type == 'data') {
    style = {
      'font-size': '12px',
      'text-align': 'center',
      'font-weight': 600,
      color: color ? color : 'white',
      background: '#122b54a9',
      // background: 'white',
      'text-shadow': 'black 1px 1px 1px',
      border: '0px',
      'margin-top': '4px'
    };
  } else if (type == 'rank') {
    style = {
      'font-size': '14px',
      'text-align': 'center',
      color: color ? color : 'white',
      background: 'transparent',
      'text-shadow': 'black 2px 2px 2px',
      'border-radius': '2px',
      border: '1px solid #122b54a9',
      // border: '1px solid rgba(255, 255, 255, 0.62)',
      'margin-bottom': '4px'
    };
  }
  // eslint-disable-next-line no-undef
  return new AMap.Text({
    text: text,
    anchor,
    position: position,
    style: {
      'font-size': '13px',
      'text-align': 'center',
      color: 'white',
      'background-color': 'transparent',
      'text-shadow': 'black 2px 2px 2px',
      'border-radius': '2px',
      border: '1px',
      padding: '4px'
    }
    style: style
  });
}

@@ -138,6 +155,60 @@
      }
    }
  });
}

/**
 * 计算每个网格颜色
 */
function calGridColor({ factorName, data, isCustomColor }) {
  let _colorList = [];
  if (isCustomColor) {
    var max, min;
    data.forEach((t) => {
      if (!t) return;
      if (!max || t > max) {
        max = t;
      }
      if (!min || t < min) {
        min = t;
      }
    });
    data.forEach((d) => {
      if (d) {
        // 根据遥测数据计算网格颜色
        const { color, nextColor, range, nextRange } =
          Legend.getCustomColorAndNext(d, min, max);
        const ratio = (d - range) / (nextRange - range);

        const _color = getColorBetweenTwoColors(
          color.map((v) => v * 255),
          nextColor.map((v) => v * 255),
          ratio
        );
        _colorList.push(_color);
      } else {
        _colorList.push(undefined);
      }
    });
  } else {
    data.forEach((d) => {
      if (d) {
        // 根据遥测数据计算网格颜色
        const { color, nextColor, range, nextRange } =
          Legend.getStandardColorAndNext(factorName, d);
        const ratio = (d - range) / (nextRange - range);
        const _color = getColorBetweenTwoColors(
          color.map((v) => v * 255),
          nextColor.map((v) => v * 255),
          ratio
        );
        _colorList.push(_color);
      } else {
        _colorList.push(undefined);
      }
    });
  }
  return _colorList;
}

export default {
@@ -179,47 +250,60 @@

  /**
   * 绘制一组多边形
   * @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) {
    if (textViews) {
      points.forEach((p, i) => {
        textViews[i].setPosition(p.lnglat_GD);
        textViews[i].setText(p.data);
  drawGridText({ points, textViews, anchor, type, isCustomColor, useColor }) {
    let colorList = [];
    if (useColor) {
      colorList = calGridColor({
        factorName: 'PM25',
        data: points.map((p) => p.data),
        isCustomColor: isCustomColor
      });
      return textViews;
    } else {
      const _textViews = [];
      points.forEach((p) => {
        const m = textMaker(p.lnglat_GD, p.data, anchor);
        _textViews.push(m);
      });
      map.add(_textViews);
      return { textViews: _textViews };
    }
    if (textViews) {
      map.remove(textViews);
    }
    const _textViews = [];
    points.forEach((p, i) => {
      const m = textMaker({
        position: p.lnglat_GD,
        text: p.data,
        anchor,
        type,
        color: useColor ? colorList[i] : 'white'
      });
      _textViews.push(m);
    });
    // map.add(_textViews);
    return { textViews: _textViews };
  },

  drawGridTextLabel(points, textViews, labelsLayer, direction) {
@@ -257,51 +341,80 @@
    }
  },

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

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