WebGIS

工作上常常會用到地圖套件，以前都沒有好好理解硬套設計，如果知道多一點原理，也許能設計出更棒的地圖體驗。

WebGIS 學習筆記

本篇文章主要是作為自己閱讀「你的地圖會說話？WebGIS 與 Javascript 的情感交織」一書的目錄精簡筆記輔以一些我自己的評論和網路上的資料，大家有興趣的話推薦可以直接購買書籍，在閱讀上會較易理解。可以先參考作者在第 12 屆 ithome 30 天鐵人賽發表 WebGIS 入門學習系列文章，內容 WebGIS 與 Javascript 並重，而本書是較注重在前者的觀念、實戰。

什麼是 WebGIS

全名為 Geographic Information System，地理資訊系統。前面加上 Web 應該不難理解這是在網頁上的 GIS 系統。開發 WebGIS 通常透過第三方的應用程式介面(Application Program Interface, 簡稱 API)，較常見的有：

1. Google Map API

2. Here Maps API

3. ArcGIS API for Javascript

4. TGOS Map API

5. Leaflet API

書中提到的內容，都有這五種第三方 API 實作的範例，對新手非常友善。

我個人認為如果要練習的話，建議先把上述五種 API 比較一下彼此的優缺點、收費方式等，確定出一個適合自己的做深入研究，之後如果需要使用其他種方式，心裡也有個底在。

初始化地圖四步驟

1. 載入地圖

2. 新增容器

3. 設定容器大小

4. 初始化各項設定，例如座標、縮放、中心點等

資料格式

1. 向量：在地圖上通常是指點、線、面資料。

2. 網格：一格一格的正方形，通常用在底圖。 OGC(Open Geospatial Consortum) 制定標準，統一各式方便分享使用。 常見規範有 GML、KML、WFS、WMS、WMTS。

3. 複合型：使用 KML(Keyhole Markup Language)、 GeoJson(使用 WGS84 坐標系統)。

定位查詢

1. 瀏覽器定位： Geolocation Web API，目前主流瀏覽器應該都可以使用。

2. 坐標定位： 例如前面提到的 WGS84 就是一種坐標系統，提供坐標取得定位點。台灣常用的話有TWD67、TWD97、WGS84，可參考這個網站。所以有時候可能需要借助坐標系統轉換工具使用。 這邊插一下別的話題，以前我時常搞不懂應該是「坐標」還是「座標」 根據「地圖新鮮事」的調查，其實兩者通用，但是在測量領域，通常都還是會用「坐標」喔～

3. 地址定位： 透過 Geocoding API 轉換成坐標即可達成有些 API 有內建，有些則需要尋求第三方擴充。

4. 行政區定位 是一種面的行政區邊界資料，例如可以使用政府開放資料的「鄉鎮市區界線(TWD97經緯度)」資料集，我自己練習時曾經先把 .shp 檔轉成 GeoJSON，然後使用瀏覽器定位取得坐標，判斷我是不是在這個行政區內，然後再抓天氣資訊。不過我畢竟不是工程師，所以 code 寫很爛能用就好…

展點與環域

展點：很多點資料顯示在地圖上，例如我們常用 Google map 找”UBike”，就會顯示很多 Youbike 的站點。

Google map 找”UBike”，就會顯示很多 Youbike 的站點。

在現實情境中，有時候還會需要將 Excel 或其他檔案上傳轉成 JSON 格式，這時候可能需要第三方來幫忙達成這個目的。

環域：可以當成在篩選資料，也就是指縣市某一個區域內的點、線、面資料的區域。

台北市松山區中崙里

另外也很常見的應用是距離使用者半徑 XX 公里的餐廳，像這種就是將環域搭配定位點的應用。

繪圖事件：又有些時候，可能有一些功能是想要讓使用者自行圈出某一個區域，這種時候就叫做繪圖事件。有些 API 也有提供這些工具列。

SQL Spatial 空間查詢

第七章在講 SQL，建議有需要的人把這章當作工具書就好，有需要用到的時候再來翻一翻。大意就是說從最源頭去篩選資料，這樣使用 API 取資料時，就不用耗費大量時間跟資源。

進階視覺化功能

很快的來到了最後一章，資料視覺化從大數據時代開始時也一起蓬勃發展。

好的資料呈現方式，可以讓讀者更容易掌握到重點，當然在地圖上也是可行的！現在就來看看一些來自 tableau 官網收集的地圖資料視覺化案例：

The invisible heartbeat of New York City

U.S. electricity sources

Country-to-country net migration

當然這些是比較進階的視覺化方式，現在回歸到書中提到的幾種常見方式：

群聚： 當某一個區域有太多點資料時，通常我們會使用群聚功能，直接顯示數量有多少的方式，當我們點擊後就會將地圖拉近，顯示點資料，如下所示：

591 租屋網：租屋群聚效果

客製化 icon：可以將點資料、群聚效果等換成自己設計的圖標。例如：

樂居：實價登錄地圖

熱區：將資料以層級的方式顯示，使用顏色的變化來凸顯資料，如下：

Marker 的動畫：有些 API 甚至可以辦到讓 Marker 跟著設定好的路線移動或是彈跳。

目錄精簡筆記到此結束，書本內容有大量的教學，再次推薦大家可以買來讀，當工具書也可以，雖然網路上有很多資料都可以查得到，但書本的好處是會幫你梳理思考邏輯，這樣才不會看一看資料就忘光光。寫到這邊我才想起以前曾經看過 oxxo studio 的 Google Map API 教學，如果你是想用這個 API 的話，可以先到這個網站學習。