添加排名展示；优化展示方式

riku

2024-12-27 1c31659852f8360cc0fdfac26aff51e54b8b8b67

添加排名展示；优化展示方式

 src/components/animation/SatelliteAnimation.vue

@@ -100,11 +100,15 @@
          const d = data[index];
          // SatelliteProxy.clearText(mapViews);
          // eslint-disable-next-line vue/no-mutating-props
          that.mapViews.textViews = SatelliteProxy.drawDataText(
          const { textViews, labelsLayer } = SatelliteProxy.drawDataText(
            that.mapViews.points,
            d,
            that.mapViews.textViews
          );
          // eslint-disable-next-line vue/no-mutating-props
          that.mapViews.textViews = textViews;
          // eslint-disable-next-line vue/no-mutating-props
          that.mapViews.labelsLayer = labelsLayer;
          SatelliteProxy.drawColor(that.mapViews.gridViews, d);
        }
      );

 src/utils/map/3dLayer.js

@@ -30,7 +30,7 @@
  const fDatas = _factorDatas;
  const factor = _factor;
  drawMesh(fDatas, factor);
  // console.log(map.getZoom());
  console.log(map.getZoom());
}

var _maxHeight = 1000,

 src/utils/map/grid.js

@@ -102,6 +102,42 @@
  });
}

/**
 * 海量文本标注
 */
function textLabelMarker(position, text, direction) {
  // eslint-disable-next-line no-undef
  return new AMap.LabelMarker({
    position: position,
    zooms: [10, 20],
    opacity: 1,
    zIndex: 2,
    // icon: {
    //   image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png',
    //   anchor: 'bottom-center',
    //   size: [25, 34],
    //   clipOrigin: [459, 92],
    //   clipSize: [50, 68]
    // },
    text: {
      // 注意内容格式必须是string
      content: text ? text + '' : '',
      direction: direction ? direction : 'center',
      style: {
        fontSize: 12,
        fillColor: '#fff',
        // strokeColor: 'rgba(0, 0, 0, 0.5)',
        // strokeWidth: 3,
        backgroundColor: '#122b54a9'
        // padding: [3, 10],
        // backgroundColor: 'yellow',
        // borderColor: '#ccc',
        // borderWidth: 3
      }
    }
  });
}

export default {
  parseGridPoint,

@@ -184,6 +220,44 @@
    }
  },

  drawGridTextLabel(points, textViews, labelsLayer, direction) {
    if (textViews) {
      points.forEach((p, i) => {
        textViews[i].setPosition(p.lnglat_GD);
        textViews[i].setText({
          content: p.data ? p.data + '' : ''
        });
      });
      return { textViews, labelsLayer };
    } else {
      // 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
      // eslint-disable-next-line no-undef
      const labelsLayer = new AMap.LabelsLayer({
        zooms: [12, 20],
        zIndex: 1000,
        // 开启标注避让，默认为开启，v1.4.15 新增属性
        collision: false,
        // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
        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);
        // 将 LabelMarker 实例添加到 LabelsLayer 上
        labelsLayer.add(m);
      });
      map.add(labelsLayer);
      map.on('zoomend', () => {
        console.log(map.getZoom());
      });
      return { textViews: _textViews, labelsLayer };
    }
  },

  drawGridColor(gridViews, texts, factorName) {
    // new Promise((resolve, reject) => {
    //   gridViews.forEach((g, i) => {

 src/utils/map/index_old.js

@@ -72,8 +72,9 @@
function _initControlbar() {
  controlbar = new AMap.ControlBar({
    position: {
      right: '300px',
      top: '260px'
      right: '10px',
      // top: '260px',
      bottom: '0px'
    }
  });
  map.addControl(controlbar);

 src/views/satellitetelemetry/SatelliteProxy.js

@@ -31,25 +31,25 @@
}

// 绘制监测数据值
function drawDataText(points, gridData, textViews) {
function drawDataText(points, gridData, textViews, labelsLayer) {
  const data = gridData.map((v, i) => {
    return {
      lnglat_GD: points[i],
      data: v.pm25
    };
  });
  return gridMapUtil.drawGridText(data, textViews);
  return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
}

// 绘制监测数据排名文本
function drawRankText(points, gridData) {
function drawRankText(points, gridData, textViews, labelsLayer) {
  const data = gridData.map((v, i) => {
    return {
      lnglat_GD: points[i],
      data: v.rank
    };
  });
  return gridMapUtil.drawGridText(data);
  return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
}

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

 src/views/satellitetelemetry/SatelliteTelemetry copy.vue

@@ -115,11 +115,13 @@
function drawTextAndColor(gridData) {
  // SatelliteProxy.clearText(mapViews);
  // 文本标记
  mapViews.textViews = SatelliteProxy.drawDataText(
  const { textViews, labelsLayer } = SatelliteProxy.drawDataText(
    mapViews.points,
    gridData,
    mapViews.textViews
  );
  mapViews.textViews = textViews;
  mapViews.labelsLayer = labelsLayer;
  SatelliteProxy.drawColor(mapViews.gridViews, gridData);
}


 src/views/satellitetelemetry/SatelliteTelemetry.vue

@@ -94,11 +94,14 @@
function drawTextAndColor(gridData) {
  // SatelliteProxy.clearText(mapViews);
  // 文本标记
  mapViews.textViews = SatelliteProxy.drawDataText(
    mapViews.points,
    gridData,
    mapViews.textViews
  );
  const { textViews: dataTxt, labelsLayer: dataLayer } =
    SatelliteProxy.drawDataText(mapViews.points, gridData, mapViews.dataTxt);
  mapViews.dataTxt = dataTxt;
  mapViews.dataLayer = dataLayer;
  const { textViews: rankTxt, labelsLayer: rankLayer } =
    SatelliteProxy.drawRankText(mapViews.points, gridData, mapViews.rankTxt);
  mapViews.rankTxt = rankTxt;
  mapViews.rankLayer = rankLayer;
  SatelliteProxy.drawColor(mapViews.gridViews, gridData);
}