完善数据融合功能（未完成）

feiyu02

2025-01-03 4f1fb28dad6a4df83752dc9b60f504764f8e3dcb

 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,27 +220,45 @@
    }
  },

  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) => {
    //     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
    //     );
    //     resolve({ g, _color, color });
    //   });
    // }).then((res) => {
    //   const { g, _color, color } = res;
    //   g.setOptions({
    //     fillColor: _color,
    //     fillOpacity: color[3]
    //   });
    // });
    gridViews.forEach((g, i) => {
      const data = parseFloat(texts[i]);
      const { color, nextColor, range, nextRange } =
@@ -217,8 +271,37 @@
      );
      g.setOptions({
        fillColor: _color,
        fillOpacity: color[3]
        fillOpacity: color[3] == 0 ? 0 : 0.7
      });
    });
  }
  },

  drawGridColorCustom(gridViews, texts) {
    var max,min
    texts.forEach(t => {
      if (!max || t > max) {
        max = t
      }
      if (!min || t < min) {
        min = t
      }
    });
    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 _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
      });
    });
  },
};