2 分鐘掌握衛星星座圖

時間 2020-04-30

標籤分鐘掌握衛星星座简体版

原文原文鏈接

話很少說，助您 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);
  }
複製代碼