1. 完成表格模块的功能迁移； 2. 完成表格、折线图、地图标记三者点击联动

riku

2024-05-08 f16acb06ab278cdcb1d39a29680634010638326d

 src/utils/map/3dLayer.js

@@ -87,89 +87,88 @@
  return scale;
}

/**
 * 绘图
 */
function drawMesh(fDatas, factor, center, merge) {
  const lnglats_GD = fDatas.lnglats_GD;
  const coors = fDatas.coors_GD;
  const heights = factor.heights;
  const colors = factor.colors;
  const bColor = factor.bottomColor;
  if (center) {
    map.setZoomAndCenter(16, center);
  }

  // eslint-disable-next-line no-undef
  var cylinder = new AMap.Object3D.Mesh();
  cylinder.backOrFront = 'both';
  cylinder.transparent = true;

  var geometry = cylinder.geometry;

  const scale = _getScale(_minH, _maxH);
  for (let i = 0; i < coors.length; i++) {
    var r = lnglats_GD[i];
    var lastP = lnglats_GD[i - 1];
    var p = coors[i];
    var h = (heights[i] - _minH) * scale + _minHeight;
    if (heights[i] == -1) {
      h = -1;
    }

    geometry.vertices.push(p.x, p.y, 0); //底部顶点
    geometry.vertices.push(p.x, p.y, 0 - h); //顶部顶点

    if (i > 0) {
      // eslint-disable-next-line no-undef
      var distance = AMap.GeometryUtil.distance(r, lastP);
      //两个数据点最小间隔时间为4s，假设车速按照120km/h计算，4s行驶最大距离作为132米，
      //设定超过1分钟的数据绘制特殊的连线
      if (distance <= 500 && h != -1) {
        var bottomIndex = i * 2;
        var topIndex = bottomIndex + 1;
        var lastBottomIndex = bottomIndex - 2;
        var lastTopIndex = bottomIndex - 1;
        geometry.faces.push(bottomIndex, topIndex, lastTopIndex);
        geometry.faces.push(bottomIndex, lastBottomIndex, lastTopIndex);
      }
    }

    // var bColor = bColor
    var tColor = colors[i];
    geometry.vertexColors.push.apply(geometry.vertexColors, bColor); //底部顶点颜色
    geometry.vertexColors.push.apply(geometry.vertexColors, tColor); //顶部顶点颜色
  }

  // 7.根据合并选项重置或新增当前缓存数据
  if (merge != true) {
    _factorDatas = fDatas;
    _factor = factor;
    if (_cylinder != undefined) {
      object3Dlayer.remove(_cylinder);
    }
  } else {
    // _factorDatas.lnglats.push.apply(
    //   _factorDatas.lnglats,
    //   lnglats_GD
    // );
    // _factorDatas.coors.push.apply(_factorDatas.coors, coors);
    // _factorDatas.heights.push.apply(_factorDatas.heights, heights);
    // _factorDatas.colors.push.apply(_factorDatas.colors, colors);
    // _factorDatas.bottomColor = bColor;
  }
  object3Dlayer.add(cylinder);
  /**************test ****************/
  // object3Dlayer.on('mouseover', function (e) {
  //   console.log(
  //     `鼠标移入覆盖物! [${e.lnglat.getlng()}, ${e.lnglat.getLat()}]`
  //   );
  // });
  /**************test ****************/
  _cylinder = cylinder;
}

export default {
  /**
   * 绘图
   */
  drawMesh(fDatas, factor, center, merge) {
    const lnglats_GD = fDatas.lnglats_GD;
    const coors = fDatas.coors_GD;
    const heights = factor.heights;
    const colors = factor.colors;
    const bColor = factor.bottomColor;
    if (center) {
      map.setZoomAndCenter(16, center);
    }

    // eslint-disable-next-line no-undef
    var cylinder = new AMap.Object3D.Mesh();
    cylinder.backOrFront = 'both';
    cylinder.transparent = true;

    var geometry = cylinder.geometry;

    const scale = _getScale(_minH, _maxH);
    for (let i = 0; i < coors.length; i++) {
      var r = lnglats_GD[i];
      var lastP = lnglats_GD[i - 1];
      var p = coors[i];
      var h = (heights[i] - _minH) * scale + _minHeight;
      if (heights[i] == -1) {
        h = -1;
      }

      geometry.vertices.push(p.x, p.y, 0); //底部顶点
      geometry.vertices.push(p.x, p.y, 0 - h); //顶部顶点

      if (i > 0) {
        // eslint-disable-next-line no-undef
        var distance = AMap.GeometryUtil.distance(r, lastP);
        //两个数据点最小间隔时间为4s，假设车速按照120km/h计算，4s行驶最大距离作为132米，
        //设定超过1分钟的数据绘制特殊的连线
        if (distance <= 500 && h != -1) {
          var bottomIndex = i * 2;
          var topIndex = bottomIndex + 1;
          var lastBottomIndex = bottomIndex - 2;
          var lastTopIndex = bottomIndex - 1;
          geometry.faces.push(bottomIndex, topIndex, lastTopIndex);
          geometry.faces.push(bottomIndex, lastBottomIndex, lastTopIndex);
        }
      }

      // var bColor = bColor
      var tColor = colors[i];
      geometry.vertexColors.push.apply(geometry.vertexColors, bColor); //底部顶点颜色
      geometry.vertexColors.push.apply(geometry.vertexColors, tColor); //顶部顶点颜色
    }

    // 7.根据合并选项重置或新增当前缓存数据
    if (merge != true) {
      _factorDatas = fDatas;
      _factor = factor;
      if (_cylinder != undefined) {
        object3Dlayer.remove(_cylinder);
      }
    } else {
      // _factorDatas.lnglats.push.apply(
      //   _factorDatas.lnglats,
      //   lnglats_GD
      // );
      // _factorDatas.coors.push.apply(_factorDatas.coors, coors);
      // _factorDatas.heights.push.apply(_factorDatas.heights, heights);
      // _factorDatas.colors.push.apply(_factorDatas.colors, colors);
      // _factorDatas.bottomColor = bColor;
    }
    object3Dlayer.add(cylinder);
    /**************test ****************/
    // object3Dlayer.on('mouseover', function (e) {
    //   console.log(
    //     `鼠标移入覆盖物! [${e.lnglat.getlng()}, ${e.lnglat.getLat()}]`
    //   );
    // });
    /**************test ****************/
    _cylinder = cylinder;
  },
  /**
   * 绘制3D走行路线图
   * @param fDatas 完整监测数据
@@ -213,7 +212,7 @@
    }

    // 5.绘制3D图形
    drawMesh(fDatas, factor, center, merge);
    this.drawMesh(fDatas, factor, center, merge);

    // 缩放地图到合适的视野级别
    // map.setFitView()