terriaJS 介紹

# terriaJS 介紹 --- :::warning ⚠️ 這份文件正在整理中 work in process ::: ## Summary [Terria.js](https://terria.io/) 是一套網頁空間圖資目錄 (Geospatical data catalog) 網頁前端程式函式庫，由澳洲政府的科研機構 CSIRO DATA61 以 [Apache2.0](https://github.com/TerriaJS/terriajs/blob/master/LICENSE.md) 授權釋出。 {%youtube DgWqdjymoTA %} Kevin Ring 主導 TerriaJS 的開發，現為 DATA61 主任軟體工程師。當在 Analytical Graphics, Inc. (AGI) 任職的時候，他協助建立了 Cesium 這個專案，並開發 terrain 串流服務及 imagery engine. [[1](#1)] ## [DEMO](https://map.terria.io/) 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 直接載入到特定視角及資料集設定，如[這個](https://map.terria.io/#share=s-2Ayn6cbpXO3SOGIa7MHjAm08AVF) czml 範例 * [故事書](https://www.youtube.com/watch?v=fbiQawV8IYY)功能，可整理各個視角及資料集自動播放。 * drag-and-drop csv [[3](#3)] # 案例 * [Australia National Map](https://nationalmap.gov.au/) * [Propeller](https://www.propelleraero.com/propeller-platform/) 雪梨公司, 無人機圖資, 土方測量, 4D地表圖資比對 * 官網[專案列表](https://terria.io/projects) # 專案狀態 1. 年資：第五年，看起來仍是相當活躍，持續開發中，前陣子有擴編[開發人員](https://i.imgur.com/A7Z7E44.png)。 3. 最近似乎在調整架構 react-mobx, 與 NSW 政府合作進行 3d/4d 都市計畫專案 [Digital twin](https://medium.com/terria/enabling-australias-national-digital-twin-ecosystem-with-cesium-and-terriajs-536a60458567) 。 4. 中文化/本地化: i18n 還在起步階段，如有興趣貢獻應該是很好的切入點。 5. code for thought: cesium 貢獻者示範如何使用 cesium # 架構 1. 前端套件： * React, CesiumJS, mobx, d3, mapbox, jasmine(test), leaflet(2D fall back) 3. 建置: * npm, webpack, gulp, babel, saucelab 的跨瀏覽器測試服務。 * 使用ES6, scss, webgl, localstorage. 透過建置工具產出支援 IE 的 js 檔。 * husky, prettier 做 git hook js 等檔案格式化 5. 部署: * terriajs-server 是一個 node.js 寫成的 reverse proxy server, 解決 wms geo data server cors 問題。 ## 架設/設置 * 建議直接拿 [Terriamap repo](https://github.com/TerriaJS/terriamap) 做修改。裡面已經設定好 gulp 建置工具，及 reverse proxy 伺服器 [terriajs-server](https://github.com/TerriaJS/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 程式碼架構參考官網[架構文件](https://docs.terria.io/guide/contributing/architecture/) ## Terriamap 客製化 1. 設定資料集修改 terriamap/wwwroot 內 json檔 * catalog.json * 可以設定自己需要的資料集如`tw.json`[gist](https://gist.github.com/owlfox/fa80e0398590d537062322e849163601) * config.json 全站設定 * `initializationUrls`: 帶入寫好的catalog設定如： ```json initializationUrls: [ "tw", "terria" ], ``` 2. 修改外觀，加入自有 react 元件 * 參考 [nationalmap](https://github.com/TerriaJS/nationalmap), official [guide](https://docs.terria.io/guide/customizing/skinning/) * 了解如何操作 `terria` [js(地圖)物件](https://docs.terria.io/guide/contributing/architecture/#major-components-in-models) 3. 如需要修改 terriajs npm 模組 * 使用 [yarn workspace](https://yarnpkg.com/lang/en/docs/workspaces/) 參考[開發指南](https://docs.terria.io/guide/contributing/development-environment/)修改 `config.json` * clone 一份 terriajs 或是其他你想修改的 npm package 到packages 資料夾內 ### 其他 * 可透過 iframe 嵌入到其他網頁中, send message 控制 view ，[說明]( https://docs.terria.io/guide/deploying/controlling-in-an-iframe-or-popup/)、[範例](https://soe.environment.gov.au/theme/land/topic/2016/soil-salinity-and-acidification)。 ## issues * react hot reload 支援？，每次改完要重新整理有點麻煩 `npm run hot` 不是很好用, related [issue](https://github.com/TerriaJS/terriajs/issues/2798) # Ref ###### 1 TerriaJS [介紹影片連結](https://www.youtube.com/watch?v=IsIQbIyINfY) ~ 25 min。 > 該次會議全部[影片連結](https://www.youtube.com/watch?v=0I2VBoMp7gU)。 #### 2 https://github.com/TerriaJS #### 3 csv [format sv-geo-au 1.5](https://github.com/TerriaJS/nationalmap/wiki/csv-geo-au), sample [link](http://services.aremi.data61.io/aemo/v6/csv/all) ## Taiwan Geo/open data 1. [QGIS及Open Geodata資源網@Sinica](http://gis.rchss.sinica.edu.tw/qgis/), [2](http://mixture.iis.sinica.edu.tw/ckan-intro.html) :::info 多數wms get capabilities 讀取得到圖層列表，但載入的時候會拿不到圖檔，估計是 wms server 設定或是圖層名稱沒有按照規範。 ::: :::success 但是直接用 QGIS 開可以（？） ::: 2. ckan [中文介紹](http://mixture.iis.sinica.edu.tw/ckan-intro.html) 新竹市政府 [ckan server](http://opendata.hccg.gov.tw/pages/guide) :::danger datalog json 需要設定 query string，還沒試成功地理相關資料 csv 經緯度格式不一，有的只有地址 ::: ## 範例程式碼 https://map.owlfox.org [環保署空氣測站資料檢視](https://map.owlfox.org/#start=%7B%22version%22%3A%220.0.05%22%2C%22initSources%22%3A%5B%7B%22initFragment%22%3A%22tw%22%7D%2C%7B%22initFragment%22%3A%22terria%22%7D%2C%7B%22catalog%22%3A%5B%7B%22name%22%3A%22User-Added+Data%22%2C%22description%22%3A%22The+group+for+data+that+was+added+by+the+user+via+the+Add+Data+panel.%22%2C%22info%22%3A%5B%5D%2C%22isUserSupplied%22%3Atrue%2C%22isPromoted%22%3Afalse%2C%22isHidden%22%3Afalse%2C%22forceProxy%22%3Afalse%2C%22customProperties%22%3A%7B%7D%2C%22id%22%3A%22Root+Group%2FUser-Added+Data%22%2C%22shortReportSections%22%3A%5B%5D%2C%22isWaitingForDisclaimer%22%3Afalse%2C%22hideSource%22%3Afalse%2C%22nameInCatalog%22%3A%22User-Added+Data%22%2C%22isOpen%22%3Afalse%2C%22items%22%3A%5B%5D%2C%22preserveOrder%22%3Afalse%2C%22type%22%3A%22group%22%2C%22parents%22%3A%5B%5D%7D%5D%7D%2C%7B%22sharedCatalogMembers%22%3A%7B%22Root+Group%2F%E7%AF%84%E4%BE%8B%E8%B3%87%E6%96%99%E9%9B%86%22%3A%7B%22isOpen%22%3Atrue%2C%22type%22%3A%22group%22%2C%22parents%22%3A%5B%5D%7D%2C%22Root+Group%2F%E7%AF%84%E4%BE%8B%E8%B3%87%E6%96%99%E9%9B%86%2F%E7%A9%BA%E6%B0%A3%E5%93%81%E8%B3%AA%22%3A%7B%22name%22%3A%22%E7%A9%BA%E6%B0%A3%E5%93%81%E8%B3%AA%22%2C%22nowViewingIndex%22%3A0%2C%22url%22%3A%22https%3A%2F%2Fmap.owlfox.org%2Faqi%2Fsites%22%2C%22isEnabled%22%3Atrue%2C%22isShown%22%3Atrue%2C%22isLegendVisible%22%3Afalse%2C%22useOwnClock%22%3Afalse%2C%22opacity%22%3A0.8%2C%22keepOnTop%22%3Afalse%2C%22splitDirection%22%3A0%2C%22tableStyle%22%3A%7B%22replaceWithZeroValues%22%3A%5B%5D%2C%22replaceWithNullValues%22%3A%5B%22-%22%5D%2C%22nullColor%22%3A%22rgba%28255%2C255%2C255%2C0.1%29%22%2C%22nullLabel%22%3A%22No+value%22%2C%22scale%22%3A1.5%2C%22scaleByValue%22%3Atrue%2C%22colorBins%22%3A10%2C%22colorBinMethod%22%3A%22auto%22%2C%22colorMap%22%3A%5B%7B%22color%22%3A%22rgb%2894%2C79%2C162%29%22%2C%22offset%22%3A0%7D%2C%7B%22color%22%3A%22rgb%2850%2C136%2C189%29%22%2C%22offset%22%3A0.1111111111111111%7D%2C%7B%22color%22%3A%22rgb%28102%2C194%2C165%29%22%2C%22offset%22%3A0.2222222222222222%7D%2C%7B%22color%22%3A%22rgb%28171%2C221%2C164%29%22%2C%22offset%22%3A0.3333333333333333%7D%2C%7B%22color%22%3A%22rgb%28230%2C245%2C152%29%22%2C%22offset%22%3A0.4444444444444444%7D%2C%7B%22color%22%3A%22rgb%28254%2C224%2C139%29%22%2C%22offset%22%3A0.5555555555555556%7D%2C%7B%22color%22%3A%22rgb%28253%2C174%2C97%29%22%2C%22offset%22%3A0.6666666666666666%7D%2C%7B%22color%22%3A%22rgb%28244%2C109%2C67%29%22%2C%22offset%22%3A0.7777777777777778%7D%2C%7B%22color%22%3A%22rgb%28213%2C62%2C79%29%22%2C%22offset%22%3A0.8888888888888888%7D%2C%7B%22color%22%3A%22rgb%28158%2C1%2C66%29%22%2C%22offset%22%3A1%7D%5D%2C%22legendTicks%22%3A3%2C%22dataVariable%22%3A%22aqi%22%2C%22timeColumn%22%3Anull%2C%22columns%22%3A%7B%22site_id%22%3A%7B%22colorBinMethod%22%3A%22auto%22%2C%22legendTicks%22%3A3%2C%22type%22%3A%22HIDDEN%22%2C%22active%22%3Afalse%7D%2C%22site_name%22%3A%7B%22colorBinMethod%22%3A%22auto%22%2C%22legendTicks%22%3A3%2C%22type%22%3A%22HIDDEN%22%2C%22active%22%3Afalse%7D%2C%22publish_time%22%3A%7B%22colorBinMethod%22%3A%22auto%22%2C%22legendTicks%22%3A3%2C%22type%22%3A%22HIDDEN%22%2C%22active%22%3Afalse%7D%7D%7D%2C%22regenerationOptions%22%3A%7B%7D%2C%22isCsvForCharting%22%3Afalse%2C%22type%22%3A%22csv%22%2C%22parents%22%3A%5B%22Root+Group%2F%E7%AF%84%E4%BE%8B%E8%B3%87%E6%96%99%E9%9B%86%22%5D%7D%2C%22Root+Group%2F%E7%AF%84%E4%BE%8B%E8%B3%87%E6%96%99%E9%9B%86%2FTaichung+3D+city+model+citygml%22%3A%7B%22nowViewingIndex%22%3A1%2C%22isEnabled%22%3Atrue%2C%22isShown%22%3Afalse%2C%22isLegendVisible%22%3Afalse%2C%22useOwnClock%22%3Afalse%2C%22type%22%3A%223d-tiles%22%2C%22parents%22%3A%5B%22Root+Group%2F%E7%AF%84%E4%BE%8B%E8%B3%87%E6%96%99%E9%9B%86%22%5D%7D%7D%7D%2C%7B%22initialCamera%22%3A%7B%22west%22%3A118.36659178216995%2C%22south%22%3A21.549452213627806%2C%22east%22%3A124.95574746534611%2C%22north%22%3A25.514859957877974%2C%22position%22%3A%7B%22x%22%3A-3346617.0869335644%2C%22y%22%3A5426857.900635367%2C%22z%22%3A2764100.6294772406%7D%2C%22direction%22%3A%7B%22x%22%3A0.48107226040661527%2C%22y%22%3A-0.7801044246613508%2C%22z%22%3A-0.40000820852959107%7D%2C%22up%22%3A%7B%22x%22%3A0.20996227674815718%2C%22y%22%3A-0.34047380109750414%2C%22z%22%3A0.916511556451389%7D%7D%2C%22homeCamera%22%3A%7B%22west%22%3A109%2C%22south%22%3A-45%2C%22east%22%3A158%2C%22north%22%3A-8%7D%2C%22baseMapName%22%3A%22Positron+%28Light%29%22%2C%22viewerMode%22%3A%223dSmooth%22%2C%22currentTime%22%3A%7B%22dayNumber%22%3A2458807%2C%22secondsOfDay%22%3A63560.542%7D%2C%22showSplitter%22%3Afalse%2C%22splitPosition%22%3A0.5%7D%2C%7B%22stories%22%3A%5B%5D%7D%5D%7D) ## TODO - [ ] sensor observation service / SOS ??? ![](https://i.imgur.com/DF71mBY.jpg) - [ ] 測試台灣 wms list，找出要改的地方。 - [ ] localization # catalog.json [文件](https://docs.terria.io/guide/connecting-to-data/catalog-type-details/terria-json/) ###### tags: `terriajs`, `cesiumjs`