动态溯源（待完成）

Riku

2025-06-04 d0f07e25103d7c7845c3b9534e8c66b5905447c0

 src/utils/map/line.js

@@ -2,43 +2,115 @@
import calculate from './calculate';
import { getHexColor } from '../color';

var _polylineArr = [];
var defaultPolylineArr = [];
const lineMap = new Map();

function newPolyline(path, color) {
  // eslint-disable-next-line no-undef
  return new AMap.Polyline({
    path: path,
    strokeStyle: 'solid',
    isOutline: true,
    borderWeight: 1,
    outlineColor: 'white',
    strokeWeight: 4, // 线条宽度，默认为 1
    strokeColor: color, // 线条颜色
    lineJoin: 'round', // 折线拐点连接处样式
    showDir: true
  });
}

function drawDirection(path) {
  const polyline = newPolyline(path, '#02ffea');
  map.add(polyline)
}

export default {
  drawLine(fDatas, factor) {
    if (defaultPolylineArr.length > 0) {
      map.remove(defaultPolylineArr);
      defaultPolylineArr = [];
    }

    const lnglats_GD = fDatas.lnglats_GD;
    const colors = factor.colors;

    if (_polylineArr) {
      map.remove(_polylineArr);
      _polylineArr = [];
    }
    // this.hideLine();

    var path = calculate.parse2LngLat(lnglats_GD);

    let sIndex = 0;
    for (let i = 1; i < path.length; i++) {
      // if (colors[i] == colors[i - 1]) {
      // } else {
      // }
      const _path = [path[i], path[i + 1]];
      const _color = getHexColor(colors[i + 1].map((v) => v * 255));
      // 创建折线实例
      var r = lnglats_GD[i];
      var lastP = lnglats_GD[i - 1];
      // eslint-disable-next-line no-undef
      const polyline = new AMap.Polyline({
        path: _path,
        strokeStyle: 'solid',
        isOutline: true,
        borderWeight: 2,
        outlineColor: 'white',
        strokeWeight: 4, // 线条宽度，默认为 1
        strokeColor: _color, // 线条颜色
        lineJoin: 'round', // 折线拐点连接处样式
        showDir: true
      });
      _polylineArr.push(polyline);
      var distance = AMap.GeometryUtil.distance(r, lastP);
      const c = colors[i];
      const lastC = colors[i - 1];
      if (distance > 500 || c != lastC) {
        let _path, _color;
        _path = path.slice(sIndex, i);
        _color = getHexColor(
          lastC.map((v, index) => {
            if (index < lastC.length - 1) {
              return v * 255;
            } else {
              return v;
            }
          })
        );
        // 当两点距离超过500时，认为两点不连续，不绘制连线
        if (distance > 500) {
          sIndex = i;
        } else {
          sIndex = i - 1;
        }

        // 创建折线实例
        const polyline = newPolyline(_path, _color);
        defaultPolylineArr.push(polyline);
      }
    }
    if (sIndex < path.length - 1) {
      const c = colors[path.length - 1];
      const _path = path.slice(sIndex, path.length);
      const _color = getHexColor(
        c.map((v, index) => {
          if (index < c.length - 1) {
            return v * 255;
          } else {
            return v;
          }
        })
      );
      const polyline = newPolyline(_path, _color);
      defaultPolylineArr.push(polyline);
    }
    // 将折线添加至地图实例
    map.add(_polylineArr);
    return _polylineArr;
  }
    map.add(defaultPolylineArr);
    return defaultPolylineArr;
  },

  drawTagLine(tag, fDatas, factor) {
    if (lineMap.has(tag)) {
      const _polylineArr = lineMap.get(tag);
      map.add(_polylineArr);
    } else {
      const _polylineArr = this.drawLine(fDatas, factor);
      lineMap.set(tag, _polylineArr);
    }
  },

  hideLine(tag) {
    if (tag && lineMap.has(tag)) {
      const _polylineArr = lineMap.get(tag);
      map.remove(_polylineArr);
    } else {
      lineMap.forEach((v) => {
        map.remove(v);
      });
    }
  },

  drawDirection
};