iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
1
Modern Web

《你的地圖會說話? WebGIS與JavaScript的情感交織》系列 第 1

《你的地圖會說話? WebGIS與JavaScript的情感交織》寫在開頭

初衷

從踏入IT產業後,從菜逼八Junior工程師,到現在有微薄兩年多的資歷。
IT邦幫忙幾乎是我每天都會造訪的網站,每每在上面看到許多前輩大神們一些很厲害的文章,
獲益良多,那時我就立志,希望有一天自己也能為IT社群有所貢獻。
苦於2019年時學藝未精,尚沒有勇氣挑戰,
今年即便所學很有限,還是想跨出這道坎挑戰今年的鐵人賽。

關於WebGIS

身為地理系畢業,那時的我在學時期除了計概以外沒有半堂程式的課,遑論WebGIS,進了業界後,才發現這個領域的人並不多。

對地理人而言,我們只會GIS的觀念、操作ArcGIS、QGIS等軟體繪圖,再厲害一些的加入空間統計進行分析,並用python進行資料處理,可依舊跟Web沾不太上邊;
對資工、資管的人來說,又不具備地理的 domain knowhow ,如果不是公司有用到,也不太會接觸到這個領域。

還記得今年初因為疫情的關係,許多IT人響應製作口罩地圖,
也讓大家體會到WebGIS的實用性以及它的生活化。
打鐵趁熱,因此,身為擁有地理背景的工程師,有責任將所學推廣。

內容大綱

※ 本系列文章將以兩篇為一組:
第一篇會以功能導向為目標,以地圖API範例實作;
第二篇則是講解JavaScript的中階觀念,解決第一篇所碰到的問題,優化程式結構。

WebGIS:

  • 地圖API (TGOS X Google X ArcGIS X Leaflet X OpenLayer 挑幾個局部講)
  • 點、線、面資料圖徵
  • 環域查詢(Buffer、Intersect)
  • 展點、群聚
  • WMS、WMTS、KML、Geojson等
  • 3D地圖API (如果有空的話XD)

JavaScript:

  • 簡介幾種設計模式(factory、adapter)
  • Function X Arguments的應用
  • IIFE(立即函式)、Scope Chain、Closure
  • ajax、fetch、axios
  • CallBack X Promise
  • prototype 建構子與繼承
  • require.js 與 AMD(非同步模組化)
  • ES5與ES6用法的差異

會視情況調整內容,畢竟下班時間有限XD,
第一次參加鐵人賽,如有錯誤,還請諸多前輩不吝賜教,感激不盡!

適合對象

  1. 懂GIS基本觀念,想要進一步了解WebGIS用法的人
  2. 初學JavaScript,想要深入了解JS原理及技巧的人
  3. 資深前輩,不吝嗇提出錯誤及可以精進的方向的人
  4. 無聊不小心點進來的人XD

究竟靜態的地圖如何到Web變成了動態的?
究竟GIS能與JS擦出什麼樣的火花?

那就敬請期待吧~ /images/emoticon/emoticon58.gif


下一篇
[1-1] 該選哪種地圖API?小孩子才做選擇。
系列文
《你的地圖會說話? WebGIS與JavaScript的情感交織》30

1 則留言

我要留言

立即登入留言