檢舉內容
WebGIS 學習筆記

2022/08/18閱讀時間約 5 分鐘
工作上常常會用到地圖套件,以前都沒有好好理解硬套設計,如果知道多一點原理,也許能設計出更棒的地圖體驗。
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 的話,可以先到這個網站學習。
贊助創作者百元,就抽 $8,888 紅包與好禮!
Neil
Neil
一位熱愛通用設計、追求 win-win 的 UI/UX designer。 擅長 UI Design、UX Design、Vue/Nuxt 切版、無障礙網頁設計、資料視覺化與設計管理。現在主要致力於在網頁設計實現 "Design for All" 的通用設計理念。
如果要發表留言,請先登入註冊會員
享受沈浸的閱讀體驗
徜徉在不受干擾的簡約介面,瀏覽數百萬篇原創內容。
領取見面禮
只要設定追蹤作者,即可享有 48小時
Premium 閱讀權限