1. 调整了网格内文本的展示方式和样式； 2. 省去了单个网格4个顶点坐标的计算逻辑，交由后端完成；

riku

2025-01-10 b87b2befa85bd085f40dc5aa7ea9bfbc17d807e5

 src/utils/map/grid.js

@@ -84,28 +84,43 @@
 * 文本标记
 * 可修改position
 */
function textMaker(position, text) {
function textMaker(position, text, anchor, type) {
  let style = {};
  if (type == 'data') {
    style = {
      'font-size': '12px',
      'text-align': 'center',
      color: 'white',
      background: '#122b54a9',
      'text-shadow': 'black 2px 2px 2px',
      border: '0px',
      'margin-top': '4px'
    };
  } else if (type == 'rank') {
    style = {
      'font-size': '14px',
      'text-align': 'center',
      color: 'white',
      background: 'transparent',
      'text-shadow': 'black 2px 2px 2px',
      'border-radius': '2px',
      border: '1px solid #122b54a9',
      '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: '0px',
      padding: '4px'
    }
    style: style
  });
}

/**
 * 海量文本标注
 */
function textLabelMarker(position, text, direction) {
function textLabelMarker(position, text, direction, style) {
  // eslint-disable-next-line no-undef
  return new AMap.LabelMarker({
    position: position,
@@ -124,15 +139,16 @@
      content: text ? text + '' : '',
      direction: direction ? direction : 'center',
      style: {
        'border-radius': '.25rem',
        fontSize: 12,
        fillColor: '#fff',
        // strokeColor: 'rgba(0, 0, 0, 0.5)',
        // strokeWidth: 3,
        backgroundColor: '#122b54a9'
        // padding: [3, 10],
        strokeColor: 'rgba(0, 0, 0, 1)',
        strokeWidth: 4,
        // backgroundColor: '#122b54a9',
        padding: [3, 10],
        // backgroundColor: 'yellow',
        // borderColor: '#ccc',
        // borderWidth: 3
        borderColor: '#ccc',
        borderWidth: 30
      }
    }
  });
@@ -202,7 +218,7 @@
    return gridViews;
  },

  drawGridText(points, textViews) {
  drawGridText(points, textViews, anchor, type) {
    if (textViews) {
      points.forEach((p, i) => {
        textViews[i].setPosition(p.lnglat_GD);
@@ -212,11 +228,11 @@
    } else {
      const _textViews = [];
      points.forEach((p) => {
        const m = textMaker(p.lnglat_GD, p.data);
        const m = textMaker(p.lnglat_GD, p.data, anchor, type);
        _textViews.push(m);
      });
      map.add(_textViews);
      return _textViews;
      return { textViews: _textViews };
    }
  },

@@ -241,9 +257,6 @@
        animation: false
      });
      const _textViews = [];
      // const m = textLabelMarker([121.329723, 31.240625], 25);
      // _textViews.push(m);
      // labelsLayer.add(m);
      points.forEach((p) => {
        const m = textLabelMarker(p.lnglat_GD, p.data, direction);
        _textViews.push(m);
@@ -251,9 +264,9 @@
        labelsLayer.add(m);
      });
      map.add(labelsLayer);
      map.on('zoomend', () => {
        console.log(map.getZoom());
      });
      // map.on('zoomend', () => {
      //   console.log(map.getZoom());
      // });
      return { textViews: _textViews, labelsLayer };
    }
  },
@@ -277,13 +290,14 @@
  },

  drawGridColorCustom(gridViews, texts) {
    var max,min
    texts.forEach(t => {
    var max, min;
    texts.forEach((t) => {
      if (!t) return;
      if (!max || t > max) {
        max = t
        max = t;
      }
      if (!min || t < min) {
        min = t
        min = t;
      }
    });
    gridViews.forEach((g, i) => {
@@ -291,7 +305,7 @@
      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),
@@ -303,5 +317,5 @@
        fillOpacity: color[3] == 0 ? 0 : 0.7
      });
    });
  },
  }
};