terriaJS 介紹

---

⚠️ 這份文件正在整理中 work in process

Summary

Terria.js 是一套網頁 空間圖資目錄 (Geospatical data catalog) 網頁前端程式函式庫，由澳洲政府的科研機構 CSIRO DATA61 以 Apache2.0 授權釋出。

Kevin Ring 主導 TerriaJS 的開發，現為 DATA61 主任軟體工程師。 當在 Analytical Graphics, Inc. (AGI) 任職的時候，他協助建立了 Cesium 這個專案，並開發 terrain 串流服務及 imagery engine. [1]

DEMO site

特色

• 原生支援 WMS, WMTS, WFS, KML, GeoJSON, CSV, CZML, GPX 及許多空間資料格式的視覺化
• 支援圖資服務伺服器如 WMS, ArcGIS, CKAN, CSW, Socrata, WMTS or WFS server
• 3D/4D （加入時間軸）資料視覺化，time-varying WMS layers, 有時間軸的 CSV
• 支援行動裝置手機、平板，偵測到舊裝置時自動切換為 2D 模式
• 圖表、即時資料擷取
• 顯示 3D 地形、物件（車輛、土方），並可動態展示
• 輸出圖檔，支援 url 分享，不同使用者可透過 url 直接載入到特定視角及資料集設定，如這個 czml 範例
• 故事書功能，可整理各個視角及資料集自動播放。
• drag-and-drop csv [3]

案例

• Australia National Map
• Propeller 雪梨公司, 無人機圖資, 土方測量, 4D地表圖資比對
• 官網專案列表

專案狀態

1. 年資：第五年，看起來仍是相當活躍，持續開發中，前陣子有擴編開發人員。
2. 最近似乎在調整架構 react-mobx, 與 NSW 政府合作進行 3d/4d 都市計畫專案 Digital twin 。
3. 中文化/本地化: i18n 還在起步階段，如有興趣貢獻應該是很好的切入點。
4. code for thought: cesium 貢獻者示範如何使用 cesium

架構

1. 前端套件：
   • React, CesiumJS, mobx, d3, mapbox, jasmine(test), leaflet(2D fall back)
2. 建置:
   • npm, webpack, gulp, babel, saucelab 的跨瀏覽器測試服務。
   • 使用ES6, scss, webgl, localstorage. 透過建置工具產出支援 IE 的 js 檔。
   • husky, prettier 做 git hook js 等檔案格式化
3. 部署:
   • terriajs-server 是一個 node.js 寫成的 reverse proxy server, 解決 wms geo data server cors 問題。

架設/設置

• 建議直接拿 Terriamap repo 做修改。裡面已經設定好 gulp 建置工具，及 reverse proxy 伺服器 terriajs-server

  • npm run gulp watch,
  • npm start ;
    npx pm2 來開關 terriajs-server

• terriamap 專案目錄架構:

terriamap
├─ lib/ **透過 terriajs 做的範例 interface
├─ wwwroot/ **編譯完的檔案
    ├─ init/ **放catalog.json
    ├─ build/ 編譯後的檔案, TerriaJS.js
    config.json **設定載入哪些 catalog, ...
    index.html
    

• terriajs 程式碼架構 參考官網架構文件

Terriamap 客製化

1. 設定資料集
   修改 terriamap/wwwroot 內 json檔

• catalog.json
  • 可以設定自己需要的資料集如tw.jsongist
• config.json 全站設定
  • initializationUrls: 帶入寫好的catalog設定如：

initializationUrls: [
    "tw",
    "terria"
],

2. 修改外觀，加入自有 react 元件
   • 參考 nationalmap, official guide
   • 了解如何操作 terria js(地圖)物件
3. 如需要修改 terriajs npm 模組
   • 使用 yarn workspace 參考開發指南修改 config.json
   • clone 一份 terriajs 或是其他你想修改的 npm package 到packages 資料夾內

其他

• 可透過 iframe 嵌入到其他網頁中, send message 控制 view ，說明、範例。

issues

• react hot reload 支援？，每次改完要重新整理有點麻煩 npm run hot 不是很好用, related issue

Ref

1

TerriaJS 介紹影片連結 ~ 25 min。

該次會議全部影片連結。

2 https://github.com/TerriaJS

3

csv format sv-geo-au 1.5, sample link

Taiwan Geo/open data

1. QGIS及Open Geodata資源網@Sinica, 2

多數wms get capabilities 讀取得到圖層列表，但載入的時候會拿不到圖檔，估計是 wms server 設定或是圖層名稱沒有按照規範。

但是直接用 QGIS 開可以（？）

2. ckan 中文介紹
   新竹市政府 ckan server

datalog json 需要設定 query string，還沒試成功
地理相關資料 csv 經緯度格式不一，有的只有地址

範例程式碼

https://map.owlfox.org
環保署空氣測站資料檢視

TODO

• sensor observation service / SOS ???
  
• 測試 台灣 wms list， 找出要改的地方。
• localization

catalog.json

文件

tags: terriajs, cesiumjs