话不多说，助您 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 技术，获取更直观的效果。请关注下一篇内容。

希望本文对您有所帮助。

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

完整代码参考

参考：

百度文库：如何确定卫星与测试点的俯仰角和方位角

根据卫星仰角和方位角使用html5绘制天空图

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[2 分钟掌握卫星星座图]http://www.zyiz.net/tech/detail-131197.html