2-4 時間軸與時間軸撥放器Widget

本章將說明時間軸Widget的使用方式。
時間軸Widget分為Timeline(時間軸)與TimelinePlayer(時間軸撥放器)兩個組件，兩者結合才可得到具有撥放功能的時間軸。
使用時間軸Widget可以對時間屬性做更靈活的控制，如日照、衛星軌道、可視化資料網格圖層等，也可以新增色塊方便標示特定時段。

[info] 小提示：

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

[info] 小提示：

構成本Widget使用之Function：
ov.TerrainView.addTimeShowEvent
ov.TerrainView.removeTimeEvent
ov.TerrainView.date

注意!!

在本範例使用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://wmts.nlsc.gov.tw");  // 本範例必要的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://wmts.nlsc.gov.tw");之後新增proxy URL。

Widget初始化須依賴核心生成的div，所以需要寫在地形開啟後的CallBack中。

這裡先撰寫一個最基本的圖台。

index.html：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>TTimeLineWidget</title>
        <script src="PGWeb3D.min.js"></script>
    </head>
    <body>
        <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");
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}"
    }
);

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

main.js：

var terrainview = new ov.TerrainView("MyMap");
var widgetTimeline = null;// 預留一個物件當時間軸Widget開啟成功後的手柄。
var widgetTimelinePlayer = null; // 預留一個物件當時間軸撥放器Widget開啟成功後的手柄。
function openCallback (result) {
    //設定預設底圖
    terrainview.setBaseLayer({
        url: "BING_MAP",
        identifier: "IMAGE",
        urlTemplate: "{URL}"
    });   

    //選擇要綁定的terrainview並初始化時間軸Widget。
    widgetTimeline = new ov.Widget.Timeline({
        view: terrainview,
        style: { left: "10%", width: "88%" },
    });

    //選擇要綁定的terrainview並初始化時間軸撥放器Widget。   
    widgetTimelinePlayer = new ov.Widget.TimelinePlayer({
        view: terrainview,
        timeline: widgetTimeline,
        playSpeed: 5000.0
    });
}
terrainview.openTerrain(
    {
        url: "http://127.0.0.1:8080",
        identifier: "terrain",
        callback: openCallback,
        urlTemplate: "oview.aspx?{URL}"
    }
);

到目前為止，我們將時間軸功能加入圖台中。
其餘功能將於下方講解。

新增聯動，會自動判斷型別

新增聯動具有時間屬性的圖層(如：衛星軌道、可視化資料網格、氣象)。

var layer = terrainView.addTerrainVisualizedDataGridOverlay(layerSetting);
widgetTimeline.addLink(layer);
var entity = terrainView.getModule('military').addSatelliteEntity(satelliteSetting);
widgetTimeline.addLink(entity);

添加時間事件

設定在時間範圍內要執行的事件

wmts1 = terrainview.addTerrainWMTSOverlay({
    url: "http://wmts.nlsc.gov.tw/wmts/",
    identifier: "B25000",
    layername: "B25000",
    show: false,
    urlTemplate: "oviewTLS12.aspx?{URL}"
});

terrainview.addTimeEvent({
    start: new Date('2022-1-1'),
    end:  new Date('2022-1-31'),
    title: "測試Tooltip圖層",
    // 進入時間區間時執行的事件
    onEnter: function () {
      wmts1.show = true;
    },
    // 離開時間區間時執行的事件
    onLeave: function () {
      wmts1.show = false;
    }
});

新增時段色塊

var param = {};
param.start = new Date('2021-1-1');
param.end = new Date('2021-1-31');
param.color = 'green'; // 時段的顏色，若沒給將自動採用數量相對的顏色。
var block = widgetTimeline.addTimeBlock(param);

讓日光隨時間更新

let lightProperty = terrainView.lightProperty;
lightProperty.isAbs = true;
lightProperty.isAutoUpdateByDate = true;
terrainView.lightProperty = lightProperty;

widgetTimeline.remove();

移除所有時段色塊

widgetTimeline.removeAllTimeBlock();

移除聯動圖層或實體

widgetTimeline.removeLink(link);

移除時段色塊

widgetTimeline.removeTimeBlock(parameter);

回到開始時間

此功能只在開始時間有設定的情況下有作用。

widgetTimeline.toStart();

更新時間

var param = { terrainView = terrainView };
var widget = new ov.Widget.Timeline(param);
widgetTimeline.updateTime('2021-1-31');
widgetTimeline.updateTime(new Date('2021-1-31'));
widgetTimeline.updateTime(new Date().getTime());

開始撥放

widgetTimelinePlayer.play();

widgetTimelinePlayer.remove();

重置播放時間至開始時間

widgetTimelinePlayer.reset();

停止播放

widgetTimelinePlayer.stop();

時間軸Widget使用教學

初始化Widget

時間軸Widget其餘功能