差異處
這裏顯示兩個版本的差異處。
| Both sides previous revision 前次修改 下次修改 | 前次修改 | ||
|
open:mol:emap [2022/11/10 15:04] wenchin |
open:mol:emap [2023/05/26 10:41] (目前版本) wenchin |
||
|---|---|---|---|
| 行 1: | 行 1: | ||
| - | [[.: | 勞動部勞發署 產業人才投資方案 ～ 委辦職訓課程規劃草案]] | + | <text type="warning">勞動部勞發署 產業人才投資方案 ～ 委辦職訓課程規劃草案</text> |
| - | ====== 電子地圖 Google Maps 及 OpenStreetMap 應用程式開發實務班 ====== | + | ====== 電子地圖 Google Maps 及 OpenStreetMap 網頁應用程式開發實務班 ====== |
| \\ | \\ | ||
| ---- | ---- | ||
| ===== 訓練班別計畫表 ===== | ===== 訓練班別計畫表 ===== | ||
| + | <hidden> | ||
| ==== 🔸 訓練需求調查 ==== | ==== 🔸 訓練需求調查 ==== | ||
| === 1. 產業人力需求調查： === | === 1. 產業人力需求調查： === | ||
| 行 16: | 行 17: | ||
| * 人力需求領域主要以資料(Data)為核心，透過各種科技工具之規劃與應用，將資料附加價值最大化，以提供各種產品與服務，包括資料提供、資料處理、資料分析／應用、商業策略／顧問諮詢與完整解決方案服務(系統整合)等各類服務業者。 | * 人力需求領域主要以資料(Data)為核心，透過各種科技工具之規劃與應用，將資料附加價值最大化，以提供各種產品與服務，包括資料提供、資料處理、資料分析／應用、商業策略／顧問諮詢與完整解決方案服務(系統整合)等各類服務業者。 | ||
| + | </hidden> | ||
| - | \\ | + | ==== 🔸 訓練需求概述 ==== |
| - | === 3. 訓練需求概述： === | + | |
| * 當行動通信與智慧型手機填滿在我們生活中的每一天後，電子地圖應用也如影隨行跟著我們。舉凡 Google/Apple 行車導航、相簿地圖、跑步/騎單車運動虛擬教練、Uber叫車/Line計程車、美食外送、YouBike查詢、以及公車路線圖等，都是我們日常所使用的手機 App。 | * 當行動通信與智慧型手機填滿在我們生活中的每一天後，電子地圖應用也如影隨行跟著我們。舉凡 Google/Apple 行車導航、相簿地圖、跑步/騎單車運動虛擬教練、Uber叫車/Line計程車、美食外送、YouBike查詢、以及公車路線圖等，都是我們日常所使用的手機 App。 | ||
| * 再舉一個官民合作的成功案例～「口罩地圖」，這是由政府提供 Open Data，而由民間來開發「線上地圖應用服務」程式。在疫情初期的緊張時刻，及時解決了口罩流通性的問題。 | * 再舉一個官民合作的成功案例～「口罩地圖」，這是由政府提供 Open Data，而由民間來開發「線上地圖應用服務」程式。在疫情初期的緊張時刻，及時解決了口罩流通性的問題。 | ||
| 行 33: | 行 34: | ||
| \\ | \\ | ||
| === 2. 知識： === | === 2. 知識： === | ||
| - | * 電子地圖網頁應用程式開發 | + | * Google Maps 及 OpenStreetMap 電子地圖網頁應用程式開發 |
| * MongoDB 文件型資料庫系統 開發應用 | * MongoDB 文件型資料庫系統 開發應用 | ||
| * HTML5 動態網頁開發、JavaSript 模組套件應用、RWD 響應式網頁設計 | * HTML5 動態網頁開發、JavaSript 模組套件應用、RWD 響應式網頁設計 | ||
| 行 41: | 行 42: | ||
| \\ | \\ | ||
| === 3. 技能： === | === 3. 技能： === | ||
| + | * 政府資料開放平臺 Open Data 資料格式 解析處理轉換 | ||
| * 使用 Node.js 在伺服器端運行 Web Server | * 使用 Node.js 在伺服器端運行 Web Server | ||
| * 開發 JavaScript 程式，執行在 Web Client 前端及 Web Server 後端 | * 開發 JavaScript 程式，執行在 Web Client 前端及 Web Server 後端 | ||
| - | * OpenLayers 地圖應用程式開發套件：API 簡介、官方範例程式 操作練習、在地圖上繪製 Icon, Point, Line, Polygon、套疊 KML 外部圖層 | + | * MongoDB 文件型資料庫系統應用、管理工具操作、MQL 資料庫操作語法 |
| - | * 政府資料開放平臺 Open Data 資料格式 解析處理轉換 | + | * 應用 OpenStreetMap 開源地圖 以及 OpenLayers 開源地圖應用程式開發套件，開發各種網頁地圖應用程式 |
| - | * MongoDB Atlas 雲端資料庫系統應用、Compass 管理工具安裝設定、MongoDB 資料庫操作語法 | + | * 應用 Google Cloud Platform 提供之 Google Maps Platform 及 Firebase Cloud Firestore 服務 |
| + | * 應用 Google Maps Platform 提供之各類 API，開發各種網頁地圖應用程式 | ||
| \\ | \\ | ||
| === 4. 學習成效： === | === 4. 學習成效： === | ||
| - | * 能使用 開放街圖 OpenStreetMap 及 OpenLayers 地圖應用程式開發套件 來開發相關地圖應用系統。例如： | + | * 能使用 OpenStreetMap 開放街圖 及 OpenLayers 開源地圖應用程式開發套件，開發相關地圖應用系統。 |
| - | - 將 Open Data 植入電子地圖中，如：測速執法設置點、新北市垃圾車所在位置、YouBike即時資訊、空氣品質指標(AQI) | + | |
| - | - 將所追蹤的垃圾車軌跡座標存入 MongoDB | + | * 能將即時的 Open Data 植入電子地圖中，例如： |
| - | - 從 MongoDB 中篩選某一期間的 GPS 座標點，並在地圖上繪製成移動軌跡 | + | * 繪製 YouBike 公共自行車 各站點可借車輛數 |
| + | * 繪製 指定公車路線的 所有站牌 | ||
| + | * 測速 (相機) 執法設置點 | ||
| + | |||
| + | * 能截取 Open Data，並存入 MongoDB，供地圖應用程式篩選查閱，例如： | ||
| + | * 將 新北市垃圾車所在位置 存入 MongoDB | ||
| + | * 從 MongoDB 中篩選某段期間的資料，並在地圖上繪製成移動軌跡 | ||
| 行 66: | 行 75: | ||
| \\ | \\ | ||
| ---- | ---- | ||
| - | <hidden> | ||
| ===== 課程大綱 ===== | ===== 課程大綱 ===== | ||
| - | <panel type="primary"> | + | <panel type="warning"> |
| + | 總時數： :?: 小時 | ||
| </panel> | </panel> | ||
| - | </hidden> | ||
| 行 77: | 行 85: | ||
| ---- | ---- | ||
| ===== 課程講義目錄 ===== | ===== 課程講義目錄 ===== | ||
| - | <panel type="warning"> | + | <panel type="success"> |
| - | 總時數： :?: 小時 | + | |
| - | === 🔹 網頁地圖應用簡介 === | + | == 🔸 網頁地圖應用簡介 == |
| * 各類電子地圖、開發工具之應用與比較 | * 各類電子地圖、開發工具之應用與比較 | ||
| * JSON 結構化資料表記法 | * JSON 結構化資料表記法 | ||
| - | * 政府開放資料 Open Data / Open API 簡介 | + | |
| + | * 政府資料開放平臺 Open Data / Open API 簡介 (GIS 相關) | ||
| * 臺北市 YouBike 公共自行車 即時資訊 | * 臺北市 YouBike 公共自行車 即時資訊 | ||
| - | * Data.Taipei 公車路線 資訊 | + | * Data.Taipei 公車路線、站牌資訊 |
| - | * Data.Taipei 公車站牌 資訊 | + | |
| * Data.Taipei 公車定時車機 (即時經緯度) 動態資訊 | * Data.Taipei 公車定時車機 (即時經緯度) 動態資訊 | ||
| * PTX 服務平台～公車API：取得指定路線的公車動態定時資料 | * 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 === | + | == 🔸 OpenStreetMap ＋ OpenLayers 網頁地圖整合應用 == |
| - | * OpenStreetMap 電子地圖簡介、 | + | * OpenStreetMap 開放地圖 簡介 |
| - | * HTML5 動態網頁開發、JavaSript 模組套件應用、RWD 響應式網頁設計 | + | |
| - | * 使用 Node.js 在伺服器端運行 JavaScript：Node.js 安裝、簡介、範例程式練習 | + | * OpenLayers 網頁地圖開發套件入門 |
| - | * OpenLayers 地圖應用程式開發套件：API 簡介、官方範例程式 操作練習、在地圖上繪製 Icon, Point, Line, Polygon、套疊 KML 外部圖層 | + | * OpenLayers 官方範例 |
| - | * 政府資料開放平臺 Open Data 簡介、資料格式 JSON/XML/CSV 解析處理轉換。使用 Node.js 開發讀取 Open Data 的應用程式 | + | * OpenLayers 應用程式開發 (單一圖層) |
| - | * 將 Open Data 植入電子地圖中，如：測速執法設置點、新北市垃圾車所在位置、YouBike即時資訊、空氣品質指標(AQI) | + | * OpenLayers 應用程式開發 (多重圖層) |
| - | * MongoDB 資料庫系統簡介、Atlas 雲端帳號建立、Compass 管理工具安裝設定、資料庫操作常用語法 | + | * OpenLayers API ＆ Object 簡介 |
| - | * 使用 Node.js 開發 MongoDB 應用程式：將所追蹤的垃圾車軌跡座標存入 MongoDB | + | |
| - | * SPA 單一頁面應用程式設計、AJAX API 設計 ~ 先選擇日期/時間範圍，再從 MongoDB 中篩選 GPS 座標點，並繪製在地圖上。 | + | * 將 地理資訊或圖層 套疊在地圖上展示 |
| - | * 系統整合暨專題製作： 電子地圖應用開發 分組實作、展示、討論 | + | * 繪製 Icon, Point, Line, Polygon |
| + | * 繪製 客製化的 POI 地標 | ||
| + | * 套疊 KML 外部圖層 | ||
| + | * 繪製 行政區界圖 | ||
| + | |||
| + | * 擷取 Open Data 即時資訊 更新在地圖上 | ||
| + | * 繪製 YouBike 公共自行車 所有站點位置 及 可借車輛數 | ||
| + | * 繪製 指定公車路線的 所有站牌 及 所有行駛班車的位置 | ||
| + | * 繪製 測速 (相機) 執法設置點 | ||
| + | |||
| + | * 截取 Open Data，並存入 MongoDB，供地圖應用程式篩選查閱 | ||
| + | * 將指定追蹤的 新北市垃圾車 即時座標 存入 MongoDB | ||
| + | * 從 MongoDB 中篩選指定期間的資料，並在地圖上繪製車輛移動的軌跡 | ||
| \\ | \\ | ||
| ---- | ---- | ||
| - | === 🔹 Google Maps Platform 簡介 === | + | == 🔸 Google Maps Platform 簡介 == |
| - | * 各式圖層 Layers | + | * 圖層 Layers 總覽 |
| * 資料 Data layer | * 資料 Data layer | ||
| * 熱視圖 Heatmap layer | * 熱視圖 Heatmap layer | ||
| 行 119: | 行 163: | ||
| * 與地圖互動 | * 與地圖互動 | ||
| * Controls 控制項: | * Controls 控制項: | ||
| - | * Zoom Control | ||
| - | * Map Type Control | ||
| - | * Street View Control | ||
| - | * Rotate Control | ||
| - | * Scale Control | ||
| - | * Fullscreen Control | ||
| - | * Keyboard Shortcuts Control | ||
| * Events 事件 | * Events 事件 | ||
| - | * User Interface Events | ||
| - | * UI Events | ||
| - | * 'click' | ||
| - | * 'dblclick' | ||
| - | * 'mouseup' | ||
| - | * 'mousedown' | ||
| - | * 'mouseover' | ||
| - | * 'mouseout' | ||
| - | * MVC State Change | ||
| - | * Handling Events | ||
| * 控制縮放及平移 (Zoom and Pan) | * 控制縮放及平移 (Zoom and Pan) | ||
| * 服務 Services | * 服務 Services | ||
| - | * Directions | + | * 路線 Directions |
| - | * Distance Matrix | + | * 距離矩陣 Distance Matrix |
| - | * Elevation | + | * 海拔 Elevation |
| - | * Geocoding | + | * 地址與經緯度轉換 Geocoding |
| * Maximum Zoom Imagery | * Maximum Zoom Imagery | ||
| * Street View | * Street View | ||
| 行 155: | 行 182: | ||
| - | 在地圖上新增 Marker 標記 | + | \\ |
| + | == 🔸 註冊 Google Maps Platform 使用權 == | ||
| + | * 申請 Google Maps API 金鑰 | ||
| + | * 啟用 Google Maps API 服務？ | ||
| + | * Google 地圖平台抵免額度及限制設定 | ||
| + | * 如何綁定信用卡帳戶？ (※ 目前需強迫綁定信用卡帳戶才可以使用) | ||
| - | 在地圖上顯示大量的 Clustering Markers 分群標記 | ||
| - | |||
| - | 使用 Firebase 應用程式平台建立互動式 Heatmap 熱視圖 (即時協作對應 Real-Time Collaborative Mapping) | ||
| - | |||
| - | 應用瀏覽器的 HTML5 Geolocation 地理位置功能以及 Maps JavaScript API，來顯示使用者裝置目前所在位置 | ||
| - | |||
| - | 從檔案匯入 KML 資料，並在地圖上顯示。 | ||
| - | |||
| - | 從本機或遠端來源匯入 GeoJSON 資料，並在地圖上顯示。 | ||
| - | |||
| - | 在地圖上以視覺化方式呈現自己的 JSON 資料來源。 | ||
| - | |||
| - | 合併多個 JSON 資料來源，並於地圖上顯示。 | ||
| - | |||
| - | 透過 React.js 來操作 Google 地圖和 Marker 標記。 | ||
| - | |||
| - | |||
| - | |||
| - | 在地圖上繪圖 | ||
| - | |||
| - | |||
| - | |||
| - | * 載入地圖 | ||
| - | * 將地圖當地語系化 | ||
| - | * 新增標記、聚合線條和多邊形。 | ||
| - | * 在快顯或資訊視窗中顯示資訊 | ||
| - | * 載入和顯示 KML 和 GeoJSON 資料 | ||
| - | * 叢集標記 | ||
| - | * 覆蓋地圖底圖圖層 | ||
| - | * 顯示流量資料 | ||
| - | * 新增地面覆蓋 | ||
| - | * (道路地圖底圖| 衛星地圖底圖) | ||
| - | |||
| - | |||
| - | * 標記 ✓ | ||
| - | * 標記群集 ✓ | ||
| - | * 聚合線條和多邊形 ✓ | ||
| - | * 資料圖層 ✓ | ||
| - | * 地面覆蓋 ✓ | ||
| - | * 熱度圖 ✓ | ||
| - | * 地圖底圖圖層 ✓ | ||
| - | * KML 圖層 ✓ | ||
| - | * 繪圖工具 ✓ | ||
| - | * Geocoder 服務 ✓ | ||
| - | * 路線服務 ✓ | ||
| - | * 距離矩陣服務 ✓ | ||
| - | * 海拔服務 ✓ | ||
| - | |||
| - | |||
| - | 如何申請Google Maps API金鑰？ | ||
| - | - 進入Google Cloud Console網址 | ||
| - | - 登入您的gmail帳號 | ||
| - | - 新增/選取專案（API Project） | ||
| - | - 建立API憑證 | ||
| - | - 限制憑證使用（避免被盜用） | ||
| - | |||
| - | 如何啟用Google Maps API服務？ | ||
| - | - 點選資訊主頁中的「啟用API和服務」 | ||
| - | - 在「地圖」列表中點選「查看全部」 | ||
| - | - 選擇您要啟用的服務「Map JavaScript API」 | ||
| - | |||
| - | |||
| - | 如何綁定信用卡帳戶？ | ||
| - | ※ 目前需強迫綁定信用卡帳戶才可以使用 | ||
| - | - 從主選單中選取帳單 | ||
| - | - 點選連結至帳單帳戶，建立帳單帳戶 | ||
| - | - 填寫基本資料 | ||
| - | - 點選預算與快訊，設定預算 | ||
| - | - 設定預算名稱 | ||
| - | - 依照自己的需求選定預算分配 | ||
| + | \\ | ||
| + | == 🔸 網頁型 Google Maps 應用程式開發 == | ||
| + | * 在地圖上新增 Marker 標記 | ||
| + | * 在地圖上顯示大量的 Clustering Markers 分群標記 | ||
| + | * 使用 Firebase 應用程式平台建立互動式 Heatmap 熱視圖 \\ (即時協作對應 Real-Time Collaborative Mapping) | ||
| + | * 應用瀏覽器的 HTML5 Geolocation 地理位置功能以及 Maps JavaScript API，來顯示使用者裝置目前所在位置 | ||
| + | * 從檔案匯入 KML 資料，並在地圖上顯示。 | ||
| + | * 從本機或遠端來源匯入 GeoJSON 資料，並在地圖上顯示。 | ||
| + | * 在地圖上以視覺化方式呈現自己的 JSON 資料來源。 | ||
| + | * 合併多個 JSON 資料來源，並於地圖上顯示。 | ||
| + | * 透過 React.js 來操作 Google 地圖和 Marker 標記。 | ||
| </panel> | </panel> | ||