terriaJS 介紹
⚠️ 這份文件正在整理中 work in process
Summary
Terria.js 是一套網頁 空間圖資目錄 (Geospatical data catalog) 網頁前端程式函式庫,由澳洲政府的科研機構 CSIRO DATA61 以 Apache2.0 授權釋出。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Kevin Ring 主導 TerriaJS 的開發,現為 DATA61 主任軟體工程師。 當在 Analytical Graphics, Inc. (AGI) 任職的時候,他協助建立了 Cesium 這個專案,並開發 terrain 串流服務及 imagery engine. [1]
特色
- 原生支援 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]
案例
專案狀態
- 年資:第五年,看起來仍是相當活躍,持續開發中,前陣子有擴編開發人員。
- 最近似乎在調整架構 react-mobx, 與 NSW 政府合作進行 3d/4d 都市計畫專案 Digital twin 。
- 中文化/本地化: i18n 還在起步階段,如有興趣貢獻應該是很好的切入點。
- code for thought: cesium 貢獻者示範如何使用 cesium
架構
- 前端套件:
- React, CesiumJS, mobx, d3, mapbox, jasmine(test), leaflet(2D fall back)
- 建置:
- npm, webpack, gulp, babel, saucelab 的跨瀏覽器測試服務。
- 使用ES6, scss, webgl, localstorage. 透過建置工具產出支援 IE 的 js 檔。
- husky, prettier 做 git hook js 等檔案格式化
- 部署:
- terriajs-server 是一個 node.js 寫成的 reverse proxy server, 解決 wms geo data server cors 問題。
架設/設置
Terriamap 客製化
- 設定資料集
修改 terriamap/wwwroot 內 json檔
- catalog.json
- config.json 全站設定
initializationUrls
: 帶入寫好的catalog設定如:
- 修改外觀,加入自有 react 元件
- 如需要修改 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。
該次會議全部影片連結。
3
csv format sv-geo-au 1.5, sample link
Taiwan Geo/open data
- QGIS及Open Geodata資源網@Sinica, 2
多數wms get capabilities 讀取得到圖層列表,但載入的時候會拿不到圖檔,估計是 wms server 設定或是圖層名稱沒有按照規範。
- ckan 中文介紹
新竹市政府 ckan server
datalog json 需要設定 query string,還沒試成功
地理相關資料 csv 經緯度格式不一,有的只有地址
範例程式碼
https://map.owlfox.org
環保署空氣測站資料檢視
TODO
catalog.json
文件