2-9 軌跡管理Widget

本章將說明軌跡管理Widget的使用方式。

[info] 小提示：

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

[info] 測試檔案下載：
下載連結：點擊此處下載

[info] 小提示：

構成本Widget使用之Function： ov.TerrainView.getModule ov.TrackModule.addFlightAwareEntity ov.TrackModule.addFlightRadarEntity ov.TrackModule.addGPXEntity ov.TrackModule.addAISEntity

這裡先撰寫一個最基本的圖台。
並在圖台中加入按鈕以控制Widget開關。

[info] 小提示：

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

FlightWare API 及串接 TDX 需要申請金鑰，請參考下列連結自行申請。

FlightaWare飛航軌跡平台：點此前往

FlightaWare飛航軌跡平台 API線上說明文件：點此前往

TDX 交通部運輸資料流通服務平臺：點此前往

TDX 交通部運輸資料流通服務平臺 API線上說明文件：點此前往

index.html：

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

main.js：

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

再來我們要把openWidget按鈕點擊事件加進我們撰寫好的main.js中。

main.js：

var terrainview = new ov.TerrainView("MyMap");
var widgetTimeline = null; // 預留時間軸物件
var widgetTimelinePlayer = null; // 預留時間軸撥放器物件
terrainview.openTerrain(
    {
        url: "http://127.0.0.1:8080",
        identifier: "terrain",
        callback: openCallback,
        urlTemplate: "oview.aspx?{URL}"
    }
);
function openCallback (result) {
    //設定預設底圖
    terrainview.setBaseLayer({
        url: "BING_MAP",
        identifier: "IMAGE",
        urlTemplate: "{URL}"
    });
    // 新增時間軸物件
    widgetTimeline = new window.ov.Widget.Timeline({
        view: terrainview,
        style: { left: "10%", width: "88%" }
    });
    // 新增時間軸撥放器物件
    widgetTimelinePlayer = new window.ov.Widget.TimelinePlayer({
        view: terrainview,
        timeline: widgetTimeline,
        playSpeed: 500.0
    });
}
// 加入開啟軌跡管理Widget的按鈕事件
function openWidget() {
    new window.ov.Widget.TrackWidget({
        view: terrainview,
        timeline: widgetTimeline // 時間軸物件整合
        eTagCities: [ // 設定電子標籤門架配對路段即時路況要提供哪些縣市
            'Taipei', 'NewTaipei', 'Taoyuan', 'Taichung', 'Tainan', 
            'Kaohsiung', 'Keelung', 'Hsinchu', 'HsinchuCounty', 'MiaoliCounty', 
            'ChanghuaCounty', 'NantouCounty', 'Chiayi', 'ChiayiCounty', 'YunlinCounty', 
            'PingtungCounty', 'YilanCounty', 'HualienCounty', 'TaitungCounty', 'PenghuCounty', 
            'LienchiangCounty', 'KinmenCounty',
        ]
    });
}

到目前為止，我們已成功將開啟軌跡管理Widget加入圖台中。

軌跡管理Widget使用教學

初始化Widget