2-26 動態風場Widget

[info] 小提示：

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

[info] 測試檔案下載：

CSV 格式

Wissdom_20210331_1100.csv

JSON + PNG

2016112000.json

2016112000.png

注意事項

資料集
- 點擊"切換檔案格式"按鈕切換顯示CSV檔或JSON檔、PNG檔上傳介面。
- CSV檔上傳介面
  - 點擊CSV檔輸入框後的"上傳"按鈕上傳CSV檔，檔名須以固定格式命名，如同測試檔案中的 "Wissdom_20210331_1100.csv" ，代表資料時間為2021年03月31日11點00分。
  - CSV檔資料欄位順序須與測試檔案相同(與NCDR三維風場反演的資料下載API回傳的資料欄位順序相同)。
  - 點擊"新增"按鈕新增動態風場的流體，若資料中 "Level" 欄位有不同的高度數值會自動內插出不同高度之間的流體數據。
  - 無法新增同樣時間的流體。當存在不同時間的流體時，會將所有流體以時間軸播放，並自動內插出不同時間之間每個時刻的流體數據(所有時間的流體數據須包含同樣的高度分布才能正確播放)。
  - 舉例說明，假設 "Wissdom_20210330_1100.csv" 的 "Level" 欄位有0.5公里與1公里的流體數據，則 "Wissdom_20210331_1100.csv" 的 "Level" 欄位也要有0.5公里與1公里的流體數據，才能正確以時間軸播放。
- JSON檔、PNG檔上傳介面
  - 點擊JSON檔輸入框後的"上傳"按鈕上傳JSON檔，資料格式須與測試檔案 "2016112000.json" 相同。
  - 點擊PNG檔輸入框後的"上傳"按鈕上傳PNG檔，可參考測試檔案 "2016112000.png" ，可為不同精度即不同影像解析度之檔案。
  - 風場高度輸入框中可填入風場高度，若沒填寫則預設為3000公尺。
  - 點擊"新增"按鈕新增動態風場的流體，不可新增同時間且同高度的流體。
  - 當存在同時間且不同高度的流體時，會自動內插出不同高度之間的流體數據；當存在不同時間的流體時，會將所有流體以時間軸播放，並自動內插出不同時間之間每個時刻的流體數據(所有時間的流體數據須包含同樣的高度分布才能正確播放)。
  - 舉例說明，假設新增了 "2024-10-03 8:00" 的3000公尺與6000公尺的流體數據，則 "2024-10-04 8:00" 也要有3000公尺與6000公尺的流體數據，才能正確以時間軸播放。
清單
- 點擊"切換檔案格式"按鈕切換顯示CSV檔或JSON檔、PNG檔的清單介面，切換後會以該檔案格式的所有流體數據重新作畫在圖台上。
- 在資料集中新增的流體會在清單中顯示，可點擊"叉叉"圖示來刪除流體。

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

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

index.html：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <!--引入js-->
    <script src="./PGWeb3D.min.js"></script>
    <!-- <script src="../../PGWebJS/13.0/PGWeb3D.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link
      rel="stylesheet"
      type="text/css"
      href="../../PGWebJS/13.0/css/PGWeb3D.css"
    />
    <script src="https://widgets.colife.org.tw/widget/3dgdp.wind3d-widget.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://widgets.colife.org.tw/widget/3dgdp.wind3d-widget.css" />


</head>

<body>
    <div id="MyMap" style="width:100%;height:100%;position:absolute;top:0;left:0"></div>

    <script src="./js/main.js"></script>
</body>

</html>

main.js：

var terrainview = new ov.TerrainView("MyMap", { requestWebGL2: true });


// 開源底圖資源集合
const baseLayerResource = {
  bing_i: { url: "BING_MAP", identifier: "IMAGE" },
  bing_v: { url: "BING_MAP", identifier: "VECTOR" },
  bing_vi: { url: "BING_MAP", identifier: "VECTOR_IMAGE" },
  nlsc_e: { url: `https://wmts.nlsc.gov.tw/wmts`, identifier: "EMAP" },
  nlsc_eg: { url: `https://wmts.nlsc.gov.tw/wmts`, identifier: "EMAP01" },
  nlsc_p: { url: `https://wmts.nlsc.gov.tw/wmts`, identifier: "PHOTO2" },
  osm: { url: "OSM", identifier: "" },
};

//在使用其他圖層前必須要先讀入地形 其他圖層的新增都會在callback中
terrainview.openTerrain(
  {
     url: 'https://data-3dgdp.colife.org.tw/Sample_src/PGWebJS/13.0/oviewRP.ashx', // 或您自己的O'View MapServer服務
     identifier: "範例地形圖",
     callback: openCallback,
  }
);

function openCallback(result) {
  //設定底圖
  terrainview.setBaseLayer(baseLayerResource.bing_i);

  //設定初始位置
  let initialPos = new GeoPoint(120.785841, 23.404883, 515000.0013822634);
  let initialV = new Geo3DPoint(0, 0, -1);
  let initialUp = new Geo3DPoint(0, 1, 0);
  let initialCamera = new ov.Camera(initialPos, initialV, initialUp);
  terrainview.gotoCamera(initialCamera, false);

  var wind3d = new window.ov.Widget.Wind3dWidget({
    view: terrainview
  });

}

到目前為止，我們已成功將動態風場Widget加入圖台中。

動態風場Widget使用教學

注意事項

初始化Widget