《你的地图会说话？ WebGIS与JavaScript的情感交织》结束，才是真正的开始。

一路走来

不知不觉已到了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