2-2 衛星展示Widget · NCHC ProgrammingGuide Widget Document

[info] 小提示：

程式碼連結：https://doc-3dgdp.colife.org.tw/samplecode/#src/testweb/widget-satellite-sample/

[info] 小提示：

構成本Widget使用之Function：
ov.TerrainView.getModule
ov.Military.satelliteEntities
ov.Military.addSatelliteEntity
ov.Widget.Timeline.addLink
ov.MilitarySatelliteEntity.getHoveTimeSpan

注意!!

在本範例使用proxy前請先修改oviewTLS12.aspx，如下所示：
private bool ValidateWhiteList(string url)
{
  bool ret = false;
  List<string> whiteList = new List<string>();
  whiteList.Add("http://127.0.0.1:8080");
  whiteList.Add("https://api.n2yo.com");  // 本範例必要的proxy URL，已經存在的可以不用再加一次
  whiteList.Add("https://other.proxy.url");  // 其他proxy的 URL
  // must validate white list
  foreach (string s in whiteList)
  {
      if (url.ToLower().StartsWith(s.ToLower()))// CompareNoCase
      {
          ret = true;
          break;
      }
  }
  return ret;
}
如果還有需求可以在whiteList.Add("https://api.n2yo.com");之後新增proxy URL。

由於衛星軌道展示模組包含在軍事模組內，所以我們需要額外引入PGWeb3DMilitary.min.js，並使用terrainview.getModule取得軍事模組。
這裡先撰寫一個最基本的圖台，因為這個widget沒有開啟按鈕，所以我們需要自行新增一個按鈕，並在main.js中預留一個openManager() function。

[info] 小提示：

此Widget有使用到Material ICON，可自行下載引入或使用線上CDN。

index.html：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>SatelliteWidget</title>
        <script src="PGWeb3D.min.js"></script>
        <script src="PGWeb3DMilitary.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    </head>
    <body>
        <div id="MyMap" style="width:100%;height:100%;position:absolute;top:0;left:0">
            <div id="MyControl" style="position: absolute;z-index:1;color: white;background-color:black;">
                <button id="satellite_control" onclick="openManager()" style="margin: 0px;">開啟Widget</button>
            </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>

main.js：

var terrainview = new ov.TerrainView("MyMap");
//載入軍事模組，需要PGWeb3DMilitary.min.js
var militaryModule = terrainview.getModule("military");

function openCallback (result) {
    //設定底圖
    terrainview.setBaseLayer({
        url: "BING_MAP",
        identifier: "IMAGE",
        urlTemplate: "{URL}"
    });   
}
terrainview.openTerrain(
    {
        url: "http://127.0.0.1:8080",
        identifier: "terrain",
        callback: openCallback,
        urlTemplate: "oview.aspx?{URL}"
    }
);
function openManager() {

}

再來我們要把Widget初始化加進我們撰寫好的main.js中。

main.js：

var terrainview = new ov.TerrainView("MyMap");
var widgetSatellite = null; // 預留一個物件當Widget開啟成功後的手柄。
var widgetTimeline = null   // Widget Timeline 開啟成功後的手柄
var initSatellite = false;  // 判斷widget是否是首次開啟。
function openCallback (result) {
    //設定預設底圖
    terrainview.setBaseLayer({
        url: "BING_MAP",
        identifier: "IMAGE",
        urlTemplate: "{URL}"
    });   

    widgetTimeline = new ov.Widget.Timeline({ view: terrainview, style: { left: "70px", width: "calc(90% - 70px)" } });
}
terrainview.openTerrain(
    {
        url: "http://127.0.0.1:8080",
        identifier: "terrain",
        callback: openCallback,
        urlTemplate: "oview.aspx?{URL}"
    }
);

function openManager() {
    if (initSatellite) // 非首次開啟的情況無須新增預設列表。
        widgetSatellite = new ov.Widget.SatelliteWidget({ view: terrainview, timeline: widgetTimeline }); // 設定綁定的terrainview與Timeline並初始化Widget。
    else {
        initSatellite = true;
        let list = [16613, 20436, 22823, 25260, 27421, 38755, 40053, 44586,44587,
            28254, 42920,
            38012,39019,
            33331,
            35946
        ]; 
        // list為開啟Widget時從N2YO新增衛星的衛星Id清單。
        // apiKey開啟Widget時從N2YO新增衛星的API Key。
        // 首次開啟的情況將新增預設衛星。
        widgetSatellite = new ov.Widget.SatelliteWidget({ 
            view: terrainview, 
            timeline: widgetTimeline, 
            list: list, 
            apiKey: "3XFHAJ-RLL9CP-5XWQ2G-4TX9",
            proxy: "oviewTLS12.aspx?"
        });
    }
    var button = document.getElementById('satellite_control')
    button.disabled = true;
    setTimeout(function () { button.disabled = false; }, 1000);
}

[info] 小提示：

衛星軌道模組Widget包含衛星過頂資料分析功能，此功能是以中華民國公布之領海基線為基準，並以每分鐘為單位做計算。

衛星軌道展示Widget使用教學

初始化Widget