你的地圖會說話？WebGIS 與 JavaScript 的情感交織（iT邦幫忙鐵人賽系列書）

廖炳閎 Perry Liao

畢業於台大地理系，現於知名球鞋電商 AREA 02 擔任前端工程師，擁有近四年軟體工程開發經驗。熟悉多家WebGIS地圖服務開發，並擅長結合JQuery、React 等前端框架。

2018年至今，曾參與過十多個WebGIS的系統規劃及程式開發，並於2020年iT邦第12屆鐵人賽以《你的地圖會說話？WebGIS與JavaScript的情感交織》系列文章榮獲佳作。

PART I 初學者的試煉

Chapter01 地圖 API 的選擇？
1.1 與 WebGIS 的邂逅
1.1.1 GIS 是什麼？
1.1.2 初始化地圖的四步驟
1.1.3 常見的地圖屬性設置
1.2 大眾化的 Google Map API
1.2.1 申請 Google Map API Key
1.2.2 初始化地圖（Google Map API）
1.3 導航豐富的 Here Maps API
1.3.1 申請 Here Maps API Key
1.3.2 初始化地圖（Here Maps API）
1.4 GIS 界老字號 ArcGIS API for JavaScript
1.4.1 初始化地圖（ArcGIS API for JavaScript）
1.5 台灣ㄟ雄厚 TGOS Map API
1.5.1 申請 TGOS Map API Key
1.5.2 初始化地圖（TGOS Map API）
1.6 輕量化的世代 Leaflet API
1.6.1 初始化地圖（Leaflet API）

PART II GIS 資料格式

Chapter02 向量資料格式
2.1 網格與向量
2.2 點資料圖徵
2.2.1 點資料圖徵（Google Map API）
2.2.2 點資料圖徵（Here Maps API）
2.2.3 點資料圖徵（ArcGIS API for JavaScript）
2.2.4 點資料圖徵（TGOS Map API）
2.2.5 點資料圖徵（Leaflet API）
2.3 線資料圖徵
2.3.1 線資料圖徵（Google Map API）
2.3.2 線資料圖徵（Here Maps API）
2.3.3 線資料圖徵（ArcGIS API for JavaScript）
2.3.4 線資料圖徵（TGOS Map API）
2.3.5 線資料圖徵（Leaflet API）
2.4 面資料圖徵
2.4.1 面資料圖徵（Google Map API）
2.4.2 面資料圖徵（Here Maps API）
2.4.3 面資料圖徵（ArcGIS API for JavaScript）
2.4.4 面資料圖徵（TGOS Map API）
2.4.5 面資料圖徵（Leaflet API）

Chapter03 網格資料格式
3.1 OGC 規範
3.2 WMS 圖層套疊
3.2.1 WMS 圖層套疊（Google Map API）
3.2.2 WMS 圖層套疊（Here Maps API）
3.2.3 WMS 圖層套疊（ArcGIS API for JavaScript）
3.2.4 WMS 圖層套疊（TGOS Map API）
3.2.5 WMS 圖層套疊（Leaflet API）
3.3 WMTS 圖層套疊
3.3.1 WMTS 圖層套疊（Google Map API）
3.3.2 WMTS 圖層套疊（Here Maps API）
3.3.3 WMTS 圖層套疊（ArcGIS API for JavaScript）
3.3.4 WMTS 圖層套疊（TGOS Map API）
3.3.5 WMTS 圖層套疊（Leaflet API）

Chapter04 複合型資料
4.1 複合型資料的優勢
4.2 KML 圖層套疊
4.2.1 Google Earth 製作KML
4.2.2 KmlLayer 與 Geoxml3（Google Map API）
4.2.3 KML 圖層套疊（Here Maps API）
4.2.4 KML 圖層套疊（ArcGIS API for JavaScript）
4.2.5 KML 圖層套疊（TGOS Map API）
4.2.6 KML 圖層套疊（Leaflet API）
4.3 GeoJSON 圖層套疊
4.3.1 JSON 再進化 >> GeoJSON
4.3.2 GeoJSON 圖層套疊（Google Map API）
4.3.3 GeoJSON 圖層套疊（Here Maps API）
4.3.4 GeoJSON 圖層套疊（ArcGIS API for JavaScript）
4.3.5 GeoJSON 圖層套疊（TGOS Map API）
4.3.6 GeoJSON 圖層套疊（Leaflet API）

PART III GIS 查詢功能

Chapter05 定位查詢
5.1 瀏覽器定位
5.1.1 navigator
5.1.2 地理位置定位（Geolocation Web API）
5.1.3 定位及標記點
5.2 坐標定位
5.2.1 坐標系統
5.2.2 坐標系統轉換
5.2.3 坐標定位及滑鼠事件
5.3 地址定位
5.3.1 Leaflet 地址定位
5.3.2 Google Map Geocoding API
5.3.3 全國門牌地址定位服務
5.4 行政區定位
5.4.1 TGOS Map API 行政區定位
5.4.2 透過 GeoJSON 載入行政區

Chapter06 展點與環域
6.1 展點
6.1.1 上傳 GeoJSON
6.1.2 上傳 Excel
6.1.3 呼叫 API 並展點
6.2 環域
6.2.1 圓形環域
6.2.2 面環域
6.3 繪圖事件
6.3.1 Leaflet Draw 繪圖工具
6.3.2 繪圖結合圓形環域
6.3.3 繪圖結合面環域
6.3.4 繪圖結合矩形環域

PART IV 高手雲集的殿堂

Chapter07 SQL Spatial
7.1 MSSQL 環境安裝
7.2 空間資料格式
7.2.1 WKT(Well-known text)
7.2.2 WKB(Well-known binary)
7.2.3 平面與球體
7.2.4 點線面與資料集合
7.3 幾何運算
7.3.1 距離
7.3.2 長度
7.3.3 面積
7.4 空間查詢
7.4.1 包含（Contain）
7.4.2 重疊（Within）
7.4.3 交集（Intersect）
7.5 常見錯誤
7.5.1 頭尾不相連
7.5.2 方向錯誤

Chapter08 進階視覺化功能
8.1 群聚
8.1.1 亂數產生點
8.1.2 群聚（Leaflet MarkerCluster）
8.1.3 客製化 Icon
8.1.4 事件
8.1.5 群聚蜘蛛網
8.2 熱區
8.2.1 熱區（heatmap.js）
8.2.2 熱區圖設定及滑鼠事件
8.2.3 熱區地圖（leaflet-heatmap.js）
8.3 讓 Marker 動起來
8.3.1 會跳動的Marker（bouncemarker）
8.3.2 會移動的Marker（MovingMarker）