话不多说，助您 2 分钟掌握卫星星座图，知晓原理，并能绘制

效果

基础

什么是卫星星座？

详细科普不在本文浪费时间了，完全不懂的同学瞄一下卫星星座-百度百科就可以了。

实现

储备知识

简单解释一下所需的数据，能获取的卫星数据参考下图，摘取百度文库相关文章片段：

其中我们所需的信息有 3 个：

卫星号（就是卫星名称，非必须）
卫星方位角
卫星俯仰角

下图先来解释一下「方位角」与「俯仰角」是什么样子的：

卫星号：就是卫星名称，即字符串，非必须，不用解释了。

卫星方位角：就是卫星相对于测量点的方向，正北方向为 0 度，顺时针递增。

卫星俯仰角：就是在地平面上，要抬头多少度，才能望到卫星，水平方向为 0 度，头顶的垂直方向为 90 度。

所以数据通常长这样：

const data = [
  { name: 11, elevation: 11, azimuth: 111 },
  { name: 22, elevation: 45, azimuth: 222 },
  { name: 33, elevation: 33, azimuth: 333 },
];

实现步骤

我们使用 Canvas 来实现即可。

代码步骤：

绘制背景框图
绘制卫星

绘制背景框图代码：

这里采用简单地等分俯仰角度线

  //画外部圈圈
  ctx.beginPath();
  ctx.arc(0, 0, Radius, 0, Math.PI * 2, false);
  ctx.stroke();

  //画中间圈圈
  ctx.beginPath();
  ctx.arc(0, 0, (Radius * 2) / 3, 0, Math.PI * 2, false);
  ctx.stroke();

  //画内部圈圈
  ctx.beginPath();
  ctx.arc(0, 0, Radius / 3, 0, Math.PI * 2, false);
  ctx.stroke();

  // 画 8 条方位角等分线
  ctx.beginPath();
  for (var i = 0; i < 8; i++) {
    ctx.rotate((Math.PI / 180) * 45);
    ctx.moveTo(0, 0);
    ctx.lineTo(0, Radius);
  }
  ctx.stroke();

绘制卫星代码（核心代码！）：

下面代码展示部分，忽略画笔的颜色，字体设置

  for (let i = 0; i < data.length; i++) {
    const element = data[i];
    ctx.beginPath();

    //核心的核心：计算卫星坐标。len 是卫星投影点到圆心的距离。
    let len = Math.cos((element.elevation * Math.PI) / 180) * Radius;
    y = Math.cos((element.azimuth * Math.PI) / 180) * len;
    x = Math.sin((element.azimuth * Math.PI) / 180) * len;

    //在坐标点绘制圆
    ctx.arc(x, -y, 14, 0, Math.PI * 2, false);
    ctx.fill();

    ctx.beginPath();
    //在坐标点写文字卫星号
    ctx.fillText(element.name, x, -y);
  }

核心代码解释：

这里的重点是根据「方位角」与「俯仰角」，以及我们定义的半径，来算出该卫星的绘制位置。

先根据俯仰角，算出该卫星投影到地平面上的点（投影点），该点距离测量点（圆心）的距离，我们在这里称其为「圆心距」。
根据圆心距与方位角，利用三角定理，就可以得到该投影点相对于圆心的相对位置。

总结

核心原理说白了就是这么简单。

先利用俯仰角，得到卫星投影点与圆心的距离。

接着通过方位角与圆心距，得到相对圆心的坐标。

最后通过坐标就可以直接绘制了。

根据实际情况，还能加上卫星类型。例如，我们除了有 GPS 卫星，还有 GLONASS 卫星、GALILEO 卫星、以及北斗卫星。如最上面的动图所示，不同颜色代表不同的类型的卫星。

更多

待实现：

背景框图上，卫星俯仰角的度数实际上不是等分的。这里并没有体现。
卫星在同一个地方的压盖问题处理。
卫星移动（显示/消失）动画。

真正到生产环境，我们还需要对绘制逻辑进行进一步的优化。具体内容，敬请关注。

以及可以通过 3D 技术，获取更直观的效果。请关注下一篇内容。

希望本文对您有所帮助。

如有不对的地方，还请纠正，万分感激。

完整代码参考

参考：