本系列文章已出版實體書籍：
「你的地圖會說話？WebGIS 與 JavaScript 的情感交織」（博碩文化）
WebGIS啟蒙首選✖五家地圖API✖近百個程式範例✖實用簡易口訣✖學習難度分級✖補充ES6小知識

一路走來

不知不覺已到了Day30了，這一天說長不長說短不短。
其實大概從Day5開始，就已經覺得很累很痛苦很想放棄了。
但凡事皆要有始有終，不到萬不得已絕不輕言放棄。

　　參加鐵人賽的日子裡，放棄了很多東西。朋友聚會一概拒絕，更不用說是出遠門郊遊踏青。中午吃飯不再跟同事吃，每每是看著鐵人賽的程式配著便當。下班不再是與三五好友揪日料團，而是準時衝回家趕稿。中秋連假、國慶連假，連續兩個連假都在家裡寫鐵人賽的文章。

　　即便如此，在這30天裡依舊學到很多東西。每天趕稿的壓力，逼我在短時間內想題材、看文件、寫程式、截圖、趕文章，每篇文章從寫程式到PO文大約花五個小時，少數沒碰過的題材則要花更久。然而，每天六點半準時下班，以最快的速度回到家，買好便當，能夠開始坐在電腦桌前時大概已經快8點，到12點前趕完當天的文章後，洗完澡緊接著開始寫隔天的程式，寫到兩三點直到累到去睡。每到假日可以稍微放鬆，就這樣持續30天的挑戰。

　　很多人說鐵人賽要花很長的時間準備，也有人說最好先寫好三十天的程式再開賽，過來人的我，說真的一點也不反對。每天想題材到寫完程式到完成PO文，每一天都是身心極大的考驗。碰到bug最好10分鐘內debug完，如果debug花個一兩個小時，大概文章也不用PO了。在開賽前的我，一篇文章一行程式都沒寫的我，就這樣子勇敢地開賽了，也因為如此，才能體驗到什麼是真正的鐵人賽精髓，百鍊成鋼的精神。

回顧30天

《你的地圖會說話？ WebGIS與JavaScript的情感交織》當初會取這個主題，除了因為WebGIS系列文章很少，想要跟大家分享以外，順便跟大家講講我學JavaScript一路以來的心路歷程。

做為一個地理系(非資訊本科系)的工程師，在入職前資策會的短期訓練，以及入職後假日去飛肯的短暫補習。在基礎十分不穩的時候，隨即上工寫一堆WebGIS程式，因此也走了不少冤枉路。在寫了一堆WebGIS的功能後，慢慢一點一滴的才讓我認識JavaScript這個博大精深的程式語言。因此，這一系列文章，往往都會用之1、之2來區別，往往是前面的文章遇到問題，在後面的文章利用JS的觀念及技巧予以解決。

系列大綱

1. 地圖API介紹： [1-1] 該選哪種地圖API？小孩子才做選擇。 簡介了TGOS Map API、Google Map API、Here Maps API、ArcGIS API for JavaScript、Leaflet API、OpenLayers API，WebGIS百家爭鳴。如果同時想要使用多種API，可以把它們進行封裝，用[1-2] 地圖的工廠 - 以 簡單工廠模式 Simple Factory Design Pattern 產出地圖，也介紹了設計模式中最初階卻也最常用的工廠模式。
2. 開始介紹向量資料： [2-1] 點資料圖徵 X 瀏覽器定位 X 地址定位 介紹了點資料圖徵，並且簡單使用了HTML5瀏覽器定位及TGOS全國門牌地址定位服務做地址定位，開始研究別人的API及function，於是在 [2-2] JS 的 Function X Arguments 與 ES6寫法介紹，介紹了Function、arguments、parameter、預設值，以及ES5與ES6的寫法差異。
3. 展點： 介紹完點資料圖徵後，介紹多個點同時呈現，稱為展點。[3-1] 打造你的美食地圖！用Here Maps API 秀出Google API餐廳資訊，實作展點。在展點的資訊視窗可能會出現for迴圈當下值沒有被保存的問題。因此有了[3-2] Scope Chain & IIFE 問題與解法 - 以Here Maps API展點為例。
4. 繼續介紹線、面資料圖徵：[4-1] 線、面資料圖徵 - 以行政區定位及導航為例，用Here Maps API Routing做導航功能，以及TGOS實現行政區定位功能，發現了線資料及面資料都有共通的部分，可以建立共用的抽象類別，並且用繼承去共用方法，而有 [4-2] prototype chain 原型鏈、建構子與繼承 - 以Here Maps API為例。
5. 環域查詢： Geoprocessing中最常見的環域查詢， [5-1] 環域與繪圖工具 － 以Leaflet Draw實現，介紹了繪圖，並繼續講解繪圖完成時的回調函式，以及ES6 Promise，[5-2] Callback & Promise － 解決request非同步的四種解法；當json、TGOS物件、Leaflet物件彼此介面不相容時，可以用 [5-3] 點線面的接口 － 以配接器模式 Adapter Design Pattern 重構，最後用了桃園旅遊OpenData資料完成了環域查詢，[5-4] 環域查詢 － 完結篇。
6. 網格資料： [6-1] 圖層套疊 － WMS & WMTS、[6-2] KML & GeoJSON － 以Leaflet KML layer plugin實現 分別介紹了WMS、WMTS、KML、GeoJSON。
7. ArcGIS API： [7-1] 3D地圖初探 － ArcGIS API for JavaScript 初次介紹了3D地圖，並且因為ArcGIS使用了dojo框架，順便從reauire.js介紹到AMD及CommonJS規範，以及ES6 Import/Export，而有 [7-2] 實現AMD的require.js 與 ES6 Import/Export 大比拚。
8. Leaflet擴充功能： [8-1] 展點多到爆？那就試試看 Leaflet MarkerCluster吧！、[8-2] heatmap.js 熱區－ 以Leaflet地圖實作、[8-3] 讓Marker動起來！ 實作Leaflet.MovingMarker與bouncemarker。
9. Leaflet結合vue.js： WebGIS竟然也能結合前端三大框架？！[Vue2Leaflet系列一] 從vue-cli安裝到建置地圖，教你從vue-cli安裝到上手；[Vue2Leaflet系列二] Leaflet Plugins with Vue，則在vue.js中使用Leaflet擴充功能。
10. 3D地圖－CesiumJS系列： 簡介CesiumJS的初始化，[3D地圖－CesiumJS系列]　一、快速上手，以及飛航軌跡應用 [3D地圖－CesiumJS系列]　二、建立飛航軌跡及動畫、車輛廢氣排放應用 [3D地圖－CesiumJS系列]　三、車輛廢氣排放地圖 － 以粒子系統(Particle system)實作。

番外篇

[番外篇] MSSQL Spatial 地理空間資訊查詢

[番外篇] 從npm安裝到活用Webpack Babel － 十分鐘就上手

request的方式？ ajax & fetch & axios

還在ES6？那你有聽過ES7、ES8嗎？

完賽

在這30天精實的日子裡，
讓我正視自己的不足，理解到很多東西很想學卻時間有限。
30天已結束，但做為持續學習的工程師之路才剛剛開始。
未來會持續精進自己的技術能力，
也希望多方大神能蒞臨指導。

總之，終於完賽啦！！！

12th鐵人賽 下台一鞠躬。
各位，後會有期，江湖再見。

結束，才是真正的開始。

共勉之~

Perry Liao
2020/10/15