Neil
一位熱愛通用設計、追求 win-win 的 UI/UX designer。
擅長 UI Design、UX Design、Vue/Nuxt 切版、無障礙網頁設計、資料視覺化與設計管理。現在主要致力於在網頁設計實現 "Design for All" 的通用設計理念。
檢舉內容WebGIS 學習筆記
檢舉內容
2022/08/18閱讀時間約 5 分鐘
工作上常常會用到地圖套件，以前都沒有好好理解硬套設計，如果知道多一點原理，也許能設計出更棒的地圖體驗。
本篇文章主要是作為自己閱讀「你的地圖會說話？WebGIS 與 Javascript 的情感交織」一書的目錄精簡筆記輔以一些我自己的評論和網路上的資料，大家有興趣的話推薦可以直接購買書籍，在閱讀上會較易理解。可以先參考作者在第 12 屆 ithome 30 天鐵人賽發表 WebGIS 入門學習系列文章，內容 WebGIS 與 Javascript 並重，而本書是較注重在前者的觀念、實戰。
什麼是 WebGIS
全名為 Geographic Information System，地理資訊系統。前面加上 Web 應該不難理解這是在網頁上的 GIS 系統。開發 WebGIS 通常透過第三方的應用程式介面(Application Program Interface, 簡稱 API)，較常見的有：
書中提到的內容，都有這五種第三方 API 實作的範例，對新手非常友善。
我個人認為如果要練習的話，建議先把上述五種 API 比較一下彼此的優缺點、收費方式等，確定出一個適合自己的做深入研究，之後如果需要使用其他種方式，心裡也有個底在。
初始化地圖四步驟
- 載入地圖
- 新增容器
- 設定容器大小
- 初始化各項設定，例如座標、縮放、中心點等
資料格式
- 向量：在地圖上通常是指點、線、面資料。
- 網格：一格一格的正方形，通常用在底圖。
OGC(Open Geospatial Consortum) 制定標準，統一各式方便分享使用。
常見規範有 GML、KML、WFS、WMS、WMTS。 - 複合型：使用 KML(Keyhole Markup Language)、
GeoJson(使用 WGS84 坐標系統)。
定位查詢
- 瀏覽器定位：
Geolocation Web API，目前主流瀏覽器應該都可以使用。 - 坐標定位：
例如前面提到的 WGS84 就是一種坐標系統，提供坐標取得定位點。台灣常用的話有TWD67、TWD97、WGS84，可參考這個網站。所以有時候可能需要借助坐標系統轉換工具使用。
這邊插一下別的話題，以前我時常搞不懂應該是「坐標」還是「座標」
根據「地圖新鮮事」的調查，其實兩者通用，但是在測量領域，通常都還是會用「坐標」喔～ - 地址定位：
透過 Geocoding API 轉換成坐標即可達成有些 API 有內建，有些則需要尋求第三方擴充。 - 行政區定位
是一種面的行政區邊界資料，例如可以使用政府開放資料的「鄉鎮市區界線(TWD97經緯度)」資料集，我自己練習時曾經先把 .shp 檔轉成 GeoJSON，然後使用瀏覽器定位取得坐標，判斷我是不是在這個行政區內，然後再抓天氣資訊。不過我畢竟不是工程師，所以 code 寫很爛能用就好…
查詢定位點天氣練習
展點與環域
展點：很多點資料顯示在地圖上，例如我們常用 Google map 找”UBike”，就會顯示很多 Youbike 的站點。
在現實情境中，有時候還會需要將 Excel 或其他檔案上傳轉成 JSON 格式，這時候可能需要第三方來幫忙達成這個目的。
環域：可以當成在篩選資料，也就是指縣市某一個區域內的點、線、面資料的區域。
另外也很常見的應用是距離使用者半徑 XX 公里的餐廳，像這種就是將環域搭配定位點的應用。
繪圖事件：又有些時候，可能有一些功能是想要讓使用者自行圈出某一個區域，這種時候就叫做繪圖事件。有些 API 也有提供這些工具列。
SQL Spatial 空間查詢
第七張在講 SQL，建議有需要的人把這章當作工具書就好，有需要用到的時候再來翻一翻。大意就是說從最源頭去篩選資料，這樣使用 API 取資料時，就不用耗費大量時間跟資源。
進階視覺化功能
很快的來到了最後一章，資料視覺化從大數據時代開始時也一起蓬勃發展。
好的資料呈現方式，可以讓讀者更容易掌握到重點，當然在地圖上也是可行的！現在就來看看一些來自 tableau 官網收集的地圖資料視覺化案例：
當然這些是比較進階的視覺化方式，現在回歸到書中提到的幾種常見方式：
群聚：
當某一個區域有太多點資料時，通常我們會使用群聚功能，直接顯示數量有多少的方式，當我們點擊後就會將地圖拉近，顯示點資料，如下所示：
當某一個區域有太多點資料時，通常我們會使用群聚功能，直接顯示數量有多少的方式，當我們點擊後就會將地圖拉近，顯示點資料，如下所示：
客製化 icon：可以將點資料、群聚效果等換成自己設計的圖標。例如：
熱區：將資料以層級的方式顯示，使用顏色的變化來凸顯資料，如下：
Marker 的動畫：有些 API 甚至可以辦到讓 Marker 跟著設定好的路線移動或是彈跳。
目錄精簡筆記到此結束，書本內容有大量的教學，再次推薦大家可以買來讀，當工具書也可以，雖然網路上有很多資料都可以查得到，但書本的好處是會幫你梳理思考邏輯，這樣才不會看一看資料就忘光光。寫到這邊我才想起以前曾經看過 oxxo studio 的 Google Map API 教學，如果你是想用這個 API 的話，可以先到這個網站學習。
贊助創作者百元，就抽 $8,888 紅包與好禮！
如果要發表留言，請先登入或註冊會員。
領取見面禮
只要設定追蹤作者，即可享有 48小時
Premium 閱讀權限
Premium 閱讀權限