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

riku

2025-01-10 b87b2befa85bd085f40dc5aa7ea9bfbc17d807e5

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

 src/api/gridApi.js

@@ -27,9 +27,6 @@
  },

  /**
   * 
   * 
   * 
   * 获取网格组下的遥测数据
   * @param {*} groupId
   * @param {*} dataTime
@@ -131,5 +128,5 @@
    return $http
      .post(`air/satellite/grid/data/mix`, dataIdList)
      .then((res) => res.data);
  },
  }
};

 src/utils/map/grid.js

@@ -84,22 +84,36 @@
 * 文本标记
 * 可修改position
 */
function textMaker(position, text, anchor) {
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: '1px',
      padding: '4px'
    }
    style: style
  });
}

@@ -204,7 +218,7 @@
    return gridViews;
  },

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

 src/views/satellitetelemetry/SatelliteProxy.js

@@ -23,10 +23,24 @@
function drawPolyline(gridInfo) {
  // 绘制网格
  const points = gridInfo.map((v) => {
    return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
    // return [v.longitude, v.latitude]
    // return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
    return [v.longitude, v.latitude];
  });
  const gridPoints = gridMapUtil.parseGridPoint(points);
  // const gridPoints = gridMapUtil.parseGridPoint(points);
  // console.log('gridPoints:', gridPoints);

  const gridPoints = gridInfo.map((v) => {
    return [
      calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat),
      calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat),
      calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat),
      calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat)
      // [v.point1Lon, v.point1Lat],
      // [v.point2Lon, v.point2Lat],
      // [v.point3Lon, v.point3Lat],
      // [v.point4Lon, v.point4Lat]
    ];
  });
  const gridViews = gridMapUtil.drawPolylines(gridPoints);
  return { gridViews, gridPoints, points };
}
@@ -41,7 +55,7 @@
    };
  });
  // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
  return gridMapUtil.drawGridText(data, textViews, 'top-center');
  return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data');
}

// 绘制监测数据排名文本
@@ -54,7 +68,7 @@
    };
  });
  // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
  return gridMapUtil.drawGridText(data, textViews, 'bottom-center');
  return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank');
}

// 绘制监测数据值对应网格颜色