open:mol:emap

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

Both sides previous revision 前次修改
下次修改 		前次修改
open:mol:emap [2022/11/10 13:55]
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 響應式網頁設計
   * SPA 單一頁面應用程式設計、AJAX API 設計   * SPA 單一頁面應用程式設計、AJAX API 設計
行 41: 行 42:
 \\ \\
 === 　3. 技能： === === 　3. 技能： ===
-  * 使用 Node.js 在伺服器端運行 Web Server 架設 ​ 
-  * 開發 JavaScript 程式，執行在 Web Client 前端及 Web Server 後端 
-  * OpenLayers 地圖應用程式開發套件：API 簡介、官方範例程式 操作練習、在地圖上繪製 Icon, Point, Line, Polygon、套疊 KML 外部圖層 
   * 政府資料開放平臺 Open Data 資料格式 解析處理轉換   * 政府資料開放平臺 Open Data 資料格式 解析處理轉換
-  * MongoDB Atlas 雲端資料庫系統應用、Compass ​管理工具安裝設定、MongoDB ​資料庫操作語法+  * 使用 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. 學習成效： === === 　4. 學習成效： ===
-  * 能使用 開放街圖 ​OpenStreetMap ​及 OpenLayers 地圖應用程式開發套件 ​來開發相關地圖應用系統。例如： +  * 能使用 ​OpenStreetMap ​開放街圖 及 OpenLayers ​開源地圖應用程式開發套件，開發相關地圖應用系統。 
-    ​- ​將 Open Data 植入電子地圖中，如：測速執法設置點、新北市垃圾車所在位置、YouBike即時資訊、空氣品質指標(AQI) + 
-    - 將所追蹤的垃圾車軌跡座標存入 MongoDB +  * 能將即時的 ​Open Data 植入電子地圖中，例如： 
-    ​- 從 MongoDB 中篩選某一期間的 ​GPS 座標點，並在地圖上繪製成移動軌跡+    * 繪製 YouBike 公共自行車 各站點可借車輛數 
 +    * 繪製 指定公車路線的 所有站牌 
 +    * 測速 ​(相機) ​執法設置點 
 + 
 +  * 能截取 Open Data，並存入 MongoDB，供地圖應用程式篩選查閱，例如： 
 +    * 將 新北市垃圾車所在位置 存入 MongoDB 
 +    ​* 從 MongoDB 中篩選某段期間的資料，並在地圖上繪製成移動軌跡
  
  
行 70: 行 79:
 總時數： :?: 小時 總時數： :?: 小時
  
----- +</panel>
-🔹 網頁地圖應用簡介 +
-  * 各類電子地圖、開發工具及應用 +
-  * 結構化 JSON 資料 +
-  * 政府開放資料 Open Data / Open API+
  
  
 +\\
 ---- ----
-🔹 OpenStreetMap ​ +===== 課程講義目錄 ===== 
-  * OpenStreetMap ​電子地圖簡介、地圖應用程式開發套件比較 +<panel type="​success">​ 
-  * HTML5 動態網頁開發、JavaSript 模組套件應用、RWD 響應式網頁設計 + 
-  * 使用 Node.js 在伺服器端運行 JavaScript：Node.js 安裝、簡介、範例程式練習 +== 🔸 網頁地圖應用簡介 == 
-  * OpenLayers 地圖應用程式開發套件：API 簡介、官方範例程式 操作練習、在地圖上繪製 Icon, Point, Line, Polygon、套疊 KML 外部圖層 +  * 各類電子地圖、開發工具之應用與比較 
-  * 政府資料開放平臺 Open Data 簡介、資料格式 JSON/​XML/​CSV 解析處理轉換。使用 Node.js 開發讀取 Open Data 的應用程式 +  * JSON 結構化資料表記法 
-  * 將 Open Data 植入電子地圖中，如：測速執法設置點、新北市垃圾車所在位置、YouBike即時資訊、空氣品質指標(AQI) + 
-  * MongoDB 資料庫系統簡介、Atlas 雲端帳號建立、Compass 管理工具安裝設定、資料庫操作常用語法 +  * 政府資料開放平臺 Open Data / Open API 簡介 ​(GIS 相關) 
-  * 使用 Node.js 開發 MongoDB 應用程式：將所追蹤的垃圾車軌跡座標存入 MongoDB +    * 臺北市 YouBike 公共自行車 即時資訊 
-  * SPA 單一頁面應用程式設計、AJAX API 設計 ~ 先選擇日期/​時間範圍，再從 MongoDB 中篩選 GPS 座標點，並繪製在地圖上。 +    * Data.Taipei 公車路線、站牌資訊 
-  * 系統整合暨專題製作： 電子地圖應用開發 分組實作、展示、討論+    * Data.Taipei 公車定時車機 (即時經緯度) 動態資訊 
 +    * PTX 服務平台～公車API：取得指定路線的公車動態定時資料 
 +    * 測速 ​(相機) ​執法設置點 
 +    * 新北市 垃圾車所在位置 
 +    * 環保署 ​空氣品質指標 (AQI)
  
  
 \\ \\
----- +== 🔸 動態網頁開發環境準備 == 
-🔹 Google Maps+  * HTML5 動態網頁開發 
 +    * JavaSript 模組套件應用 
 +    * RWD 響應式網頁設計
  
-  * 載入地圖 +  * 使用 Node.js 在伺服器端運行 JavaScript 
-  * 將地圖當地語系化 +    * Node.js 安裝、簡介 
-  * 新增標記、聚合線條和多邊形。 +    * Node.js 範例程式練習 
-  * 在快顯或資訊視窗中顯示資訊 +    * AJAX 原理與應用 
-  * 載入和顯示 KML 和 GeoJSON 資料 +    * 使用 Node.js 開發讀取 Open Data 的應用程式 
-  * 叢集標記 +    * 擷取 結構化 JSON 資料
-  * 覆蓋地圖底圖圖層 +
-  * 顯示流量資料 +
-  * 新增地面覆蓋 +
-  *  (道路地圖底圖| 衛星地圖底圖)+
  
 +  * MongoDB 文件型資料庫系統簡介
 +    * MongoDB 安裝、設定
 +    * Compass 管理工具操作
 +    * MQL 資料庫操作常用語法
  
-  * 標記 ✓ +  * 範例程式 ～ 使用 Node.js 存取 MongoDB ​
-  * 標記群集 ✓ +
-  * 聚合線條和多邊形 ✓ +
-  * 資料圖層 ✓ +
-  * 地面覆蓋 ✓ +
-  * 熱度圖 ✓ +
-  * 地圖底圖圖層 ✓ +
-  * KML 圖層 ✓ +
-  * 繪圖工具 ✓ +
-  * Geocoder 服務 ✓ +
-  * 路線服務 ✓ +
-  * 距離矩陣服務 ✓ +
-  * 海拔服務 ✓+
  
  
-如何申請Google Maps API金鑰？ +\\ 
-  - 進入Google Cloud Console網址 +---- 
-  ​- 登入您的gmail帳號 +== 🔸 OpenStreetMap ＋ OpenLayers 網頁地圖整合應用 == 
-  ​- 新增/​選取專案（API Project） +  ​* OpenStreetMap 開放地圖 簡介
-  ​- 建立API憑證 +
-  ​- 限制憑證使用（避免被盜用）+
  
-如何啟用Google Maps API服務？ +  * OpenLayers 網頁地圖開發套件入門 
-  - 點選資訊主頁中的「啟用API和服務」 +    * OpenLayers 官方範例 
-  - 在「地圖」列表中點選「查看全部」 +    * OpenLayers 應用程式開發 (單一圖層) 
-  - 選擇您要啟用的服務「Map JavaScript ​API」+    * OpenLayers 應用程式開發 (多重圖層) 
 +    * OpenLayers ​API ＆ Object 簡介
  
 +  * 將 地理資訊或圖層 套疊在地圖上展示
 +    * 繪製 Icon, Point, Line, Polygon
 +    * 繪製 客製化的 POI 地標
 +    * 套疊 KML 外部圖層
 +    * 繪製 行政區界圖
  
-如何綁定信用卡帳戶？ +  * 擷取 Open Data 即時資訊 更新在地圖上 
-※ 目前需強迫綁定信用卡帳戶才可以使用 +    * 繪製 YouBike 公共自行車 所有站點位置 及 可借車輛數 
-  - 從主選單中選取帳單 +    * 繪製 指定公車路線的 所有站牌 及 所有行駛班車的位置 
-  ​- ​點選連結至帳單帳戶，建立帳單帳戶 +    * 繪製 測速 (相機) 執法設置點
-  - 填寫基本資料 +
-  - 點選預算與快訊，設定預算 +
-  ​- ​設定預算名稱 +
-  - 依照自己的需求選定預算分配+
  
 +  * 截取 Open Data，並存入 MongoDB，供地圖應用程式篩選查閱
 +    * 將指定追蹤的 新北市垃圾車 即時座標 存入 MongoDB
 +    * 從 MongoDB 中篩選指定期間的資料，並在地圖上繪製車輛移動的軌跡
  
-</​panel>​ 
  
  
 \\ \\
 ---- ----
-<​hidden>​ +== 🔸 Google Maps Platform 簡介 ​== 
-===== 課程講義目錄 ===== +  * 圖層 Layers 總覽 
-<panel type="​primary">​+    * 資料 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 標記。
  
 </​panel>​ </​panel>​
-</​hidden>​+
  
  • open/mol/emap.1668059706.txt.gz
  • 上一次變更: 2022/11/10 13:55
  • 由 wenchin