勞動部勞發署 產業人才投資方案 ～ 委辦職訓課程規劃草案
電子地圖 Google Maps 及 OpenStreetMap 網頁應用程式開發實務班
訓練班別計畫表
🔸 訓練需求概述
- 當行動通信與智慧型手機填滿在我們生活中的每一天後，電子地圖應用也如影隨行跟著我們。舉凡 Google/Apple 行車導航、相簿地圖、跑步/騎單車運動虛擬教練、Uber叫車/Line計程車、美食外送、YouBike查詢、以及公車路線圖等，都是我們日常所使用的手機 App。
- 再舉一個官民合作的成功案例～「口罩地圖」，這是由政府提供 Open Data，而由民間來開發「線上地圖應用服務」程式。在疫情初期的緊張時刻，及時解決了口罩流通性的問題。
- 電子地圖應用開發套件，同樣是發展成熟、功能齊備、百家爭鳴。無論是企業或是政府機關，只要論及智慧城市、智慧交通、智慧物流、行動生活、物聯網等主題應用，電子地圖必定是這些資訊系統中最基本的組成要件。
- 瞭解其實際人才需求應具備之專業技能所規劃之課程，聘請專業且具實務經驗之師資授課，規劃理論與實務兼具之授課內容、以密集訓練方式，加強培訓其專業知識，期使學員結業後，能在最短時間內應用於職場上。
🔸 訓練目標
1. 單位核心能力介紹：
- 在此波數位變革引領下，整體環境隨之驟變，影響學校發展之重大因素，如何營造符合大趨勢變革之教育環境；由各院所專業發展掌握大數據、智慧家居、物聯網、智慧化、移動化、雲端運算及互動技術等外界環境變化，使教與學能與產業需求有更緊密結合，達到養成具國際觀之高競爭力人才之目標。
2. 知識：
- Google Maps 及 OpenStreetMap 電子地圖網頁應用程式開發
- MongoDB 文件型資料庫系統 開發應用
- HTML5 動態網頁開發、JavaSript 模組套件應用、RWD 響應式網頁設計
- SPA 單一頁面應用程式設計、AJAX API 設計
3. 技能：
- 政府資料開放平臺 Open Data 資料格式 解析處理轉換
- 使用 Node.js 在伺服器端運行 Web Server
- 開發 JavaScript 程式，執行在 Web Client 前端及 Web Server 後端
- MongoDB 文件型資料庫系統應用、管理工具操作、MQL 資料庫操作語法
- 應用 OpenStreetMap 開源地圖 以及 OpenLayers 開源地圖應用程式開發套件，開發各種網頁地圖應用程式
- 應用 Google Cloud Platform 提供之 Google Maps Platform 及 Firebase Cloud Firestore 服務
- 應用 Google Maps Platform 提供之各類 API，開發各種網頁地圖應用程式
4. 學習成效：
- 能使用 OpenStreetMap 開放街圖 及 OpenLayers 開源地圖應用程式開發套件，開發相關地圖應用系統。
- 能將即時的 Open Data 植入電子地圖中，例如：
- 繪製 YouBike 公共自行車 各站點可借車輛數
- 繪製 指定公車路線的 所有站牌
- 測速 (相機) 執法設置點
- 能截取 Open Data，並存入 MongoDB，供地圖應用程式篩選查閱，例如：
- 將 新北市垃圾車所在位置 存入 MongoDB
- 從 MongoDB 中篩選某段期間的資料，並在地圖上繪製成移動軌跡
🔸 學員資格
- 學歷：高中/職(含)以上
- 資格條件：
- 具備電腦基本操作能力，且對電子地圖/程式設計/網頁技術/智慧交通/物聯網/App有興趣者。
- 對 HTML、CSS、JavaScipt 網頁程式設計具有基本概念。
課程大綱
總時數： 
小時
課程講義目錄
🔸 網頁地圖應用簡介
- 各類電子地圖、開發工具之應用與比較
- JSON 結構化資料表記法
- 政府資料開放平臺 Open Data / Open API 簡介 (GIS 相關)
- 臺北市 YouBike 公共自行車 即時資訊
- Data.Taipei 公車路線、站牌資訊
- Data.Taipei 公車定時車機 (即時經緯度) 動態資訊
- PTX 服務平台～公車API：取得指定路線的公車動態定時資料
- 測速 (相機) 執法設置點
- 新北市 垃圾車所在位置
- 環保署 空氣品質指標 (AQI)
🔸 動態網頁開發環境準備
- HTML5 動態網頁開發
- JavaSript 模組套件應用
- RWD 響應式網頁設計
- 使用 Node.js 在伺服器端運行 JavaScript
- Node.js 安裝、簡介
- Node.js 範例程式練習
- AJAX 原理與應用
- 使用 Node.js 開發讀取 Open Data 的應用程式
- 擷取 結構化 JSON 資料
- MongoDB 文件型資料庫系統簡介
- MongoDB 安裝、設定
- Compass 管理工具操作
- MQL 資料庫操作常用語法
- 範例程式 ～ 使用 Node.js 存取 MongoDB
🔸 OpenStreetMap ＋ OpenLayers 網頁地圖整合應用
- OpenStreetMap 開放地圖 簡介
- OpenLayers 網頁地圖開發套件入門
- OpenLayers 官方範例
- OpenLayers 應用程式開發 (單一圖層)
- OpenLayers 應用程式開發 (多重圖層)
- OpenLayers API ＆ Object 簡介
- 將 地理資訊或圖層 套疊在地圖上展示
- 繪製 Icon, Point, Line, Polygon
- 繪製 客製化的 POI 地標
- 套疊 KML 外部圖層
- 繪製 行政區界圖
- 擷取 Open Data 即時資訊 更新在地圖上
- 繪製 YouBike 公共自行車 所有站點位置 及 可借車輛數
- 繪製 指定公車路線的 所有站牌 及 所有行駛班車的位置
- 繪製 測速 (相機) 執法設置點
- 截取 Open Data，並存入 MongoDB，供地圖應用程式篩選查閱
- 將指定追蹤的 新北市垃圾車 即時座標 存入 MongoDB
- 從 MongoDB 中篩選指定期間的資料，並在地圖上繪製車輛移動的軌跡
🔸 Google Maps Platform 簡介
- 圖層 Layers 總覽
- 資料 Data layer
- 熱視圖 Heatmap layer
- KML and GeoRSS layer
- 路況 Traffic layer
- 大眾運輸 Transit layer
- 單車 Bicycling layer
- 與地圖互動
- Controls 控制項:
- Events 事件
- 控制縮放及平移 (Zoom and Pan)
- 服務 Services
- 路線 Directions
- 距離矩陣 Distance Matrix
- 海拔 Elevation
- 地址與經緯度轉換 Geocoding
- Maximum Zoom Imagery
- Street View
- 程式庫 Libraries
- 總覽 Overview
- 繪圖圖層 Drawing Library
- 幾何圖形 Geometry Library
- 地點 Places Library
- 視覺化 Visualization Library
🔸 註冊 Google Maps Platform 使用權
- 申請 Google Maps API 金鑰
- 啟用 Google Maps API 服務？
- Google 地圖平台抵免額度及限制設定
- 如何綁定信用卡帳戶？ (※ 目前需強迫綁定信用卡帳戶才可以使用)
🔸 網頁型 Google Maps 應用程式開發
- 在地圖上新增 Marker 標記
- 在地圖上顯示大量的 Clustering Markers 分群標記
- 使用 Firebase 應用程式平台建立互動式 Heatmap 熱視圖
(即時協作對應 Real-Time Collaborative Mapping) - 應用瀏覽器的 HTML5 Geolocation 地理位置功能以及 Maps JavaScript API，來顯示使用者裝置目前所在位置
- 從檔案匯入 KML 資料，並在地圖上顯示。
- 從本機或遠端來源匯入 GeoJSON 資料，並在地圖上顯示。
- 在地圖上以視覺化方式呈現自己的 JSON 資料來源。
- 合併多個 JSON 資料來源，並於地圖上顯示。
- 透過 React.js 來操作 Google 地圖和 Marker 標記。