ECharts 3D散点图自定义图标角度动态计算方案

ECharts 3D散点图自定义图标角度动态计算方案

引用

CSDN

1.

https://blog.csdn.net/qq_44879525/article/details/138794117

在数据可视化领域，ECharts是一个非常强大的工具，尤其在处理地理数据时。本文将介绍如何在ECharts 3D中实现散点图自定义图标的角度动态计算，解决地球航线上船只图标方向显示的问题。

需求背景

在地球航线上显示船只图标时，需要确保图标能够沿着航线方向正确显示。特别是在跨越东西半球时，由于经度的特殊性，需要对计算的经纬度数值进行特殊处理，以适应ECharts的坐标系。

坐标转换处理

为了解决这个问题，需要将经纬度数值转换到ECharts的坐标系范围内。具体处理方法如下：

// 转换经度到-180~180
normalizeLng(lng) {
  if (lng > 180) {
    return lng - 360;
  } else if (lng < -180) {
    return lng + 360;
  }
  return lng;
},
// 转换维度到-90~90
normalizeLat(lat) {
  if (lat > 90) {
    return lat - 180;
  } else if (lat < -90) {
    return lat + 180;
  }
  return lat;
},
let dx = this.normalizeLng(p2[0] - p1[0])
let dy = this.normalizeLat(p2[1] - p1[1])

解决效果

经过处理后，船只图标能够正确显示在航线上，并且方向与航线保持一致。

解决方案

1. 取两个点：p1（标点坐标）和p2（标点所在线的下一个点坐标）
2. 计算向量 [p2[0] - p1[0], p2[1] - p1[1]]
3. 使用三角函数计算两个向量的夹角，这里取x轴正方向 [1,0] 作为参考向量
4. 进行坐标转换，特别处理ECharts中跨越180度经线的情况

核心方法实现

// 计算向量与坐标轴的角度
getRotate(p1, p2) {
  // 向量坐标转换到-180~180，-90~90
  let dx = this.normalizeLng(p2[0] - p1[0])
  let dy = this.normalizeLat(p2[1] - p1[1])
  const aa = [dx, dy];
  // 计算向量与坐标（1,0）的夹角
  const bb = [1, 0];
  const dot = aa[0] * bb[0] + aa[1] * bb[1];
  const d = Math.sqrt(aa[0] * aa[0] + aa[1] * aa[1]);
  const res = dot / d;
  let angle = (Math.acos(res) * 180) / Math.PI;
  // ECharts角度在0~-180和0~180，逆时针为正，顺时针为负
  if (p2[1] < p1[1]) {
    angle = -angle;
  }
  return angle;
},
// 转换坐标到-180~180
normalizeLng(lng) {
  if (lng > 180) {
    return lng - 360;
  } else if (lng < -180) {
    return lng + 360;
  }
  return lng;
},
// 转换坐标到-90~90
normalizeLat(lat) {
  if (lat > 90) {
    return lat - 180;
  } else if (lat < -90) {
    return lat + 180;
  }
  return lat;
}

通过上述方法，可以实现船只图标在地球航线上正确显示方向的效果。这种方法不仅适用于船只图标，还可以推广到其他需要方向显示的场景中。