2 分钟掌握卫星星座图

时间 2020-04-30 标签 2 分钟掌握卫星星座图

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

效果

基础

什么是卫星星座？html

详细科普不在本文浪费时间了，彻底不懂的同窗瞄一下卫星星座-百度百科就能够了。html5

实现

储备知识

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

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

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

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

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

卫星方位角：就是卫星相对于测量点的方向，正北方向为 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 技术，获取更直观的效果。请关注下一篇内容。

但愿本文对您有所帮助。

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

完整代码参考

参考：

2 分钟掌握卫星星座图

效果

基础

实现

储备知识

实现步骤

总结

更多