SlideShare a Scribd company logo
1 of 47
Download to read offline
TGOS
TGOS
Maps
「 105年度地理資訊圖資雲服務平台推廣、
營運及功能增修作業」委外服務案
TGOS MAP API推廣應用工作坊-初級班
如何運用TGOS MAP API
主辦單位:內政部資訊中心
承辦單位:財團法人空間及環境科技文教基金會
105年7月
2
一、申請流程
二、使用TGOS MAP API-Lite
三、初始化地圖設定值
四、套疊幾何圖層物件-GeoJSON
五、複合式定位
申請流程
• http://www.tgos.tw/
3
申請流程
4
申請流程
5
選擇Javascript
API
申請流程
6
點擊檢視詳細資
料
申請流程
7
申請流程
• 點擊加入購物車按鈕
8
申請流程
• 按下「服務申請清單」
9
申請流程
• 確認清單無誤,開始進行申請
10
申請流程
• 申請單資訊
11
申請流程
• 填寫申請用途
12
申請流程
• 填寫要介接的應用程式名稱與IP清單
13
申請流程
• 填寫要介接的應用程式資訊
14
申請流程
• 勾選要使用的項目
15
依照帳號的單位
類型有所區分
申請流程
• 顯示更詳細的說明
16
申請流程
• 顯示更詳細的說明
17
申請流程
• 按下確定申請
18
申請流程
19
申請流程
我收到審核信件
進TGOS檢查我的申請單 取用金鑰開始使用API
管理人收到申請通知
管理人確認與審核 發出審核通知信給我
提出申請
我會收到確認信件 發出申請信件給管理人
20
申請流程
• 審核完畢後會收到信件
21
申請流程
• 進入系統[服務申請紀錄]
22
申請流程
• 檢視申請單
23
申請流程
• 取得服務網址
24
申請流程
• 取得APPID APIKEY
25
申請流程
• 前往範例網站檢視範例及使用手冊。
26
27
一、申請流程
二、使用TGOS MAP API-Lite
三、初始化地圖設定值
四、套疊幾何圖層物件-GeoJSON
五、複合式定位
使用TGOS MAP API-Lite
• 不需申請就可使用部分功能:
• 例如地圖初始化設定、單(多)點標記、訊息視窗、
地圖事件等等。
28
使用TGOS MAP API-Lite
• 單點標記
29
使用TGOS MAP API-Lite
情境1:建立一個地圖,並定位到自己設定的位置
範例網站:單點標記
1.開啟記事本貼上範例程式碼
2.修改要顯示的文字與坐標 (查詢坐標)
3.另存成htm檔,編碼使用UTF-8
4.看成果:1_MAP_API推廣版_單點標記.html。
30
使用TGOS MAP API-Lite
• 多點標記
31
使用TGOS MAP API-Lite
情境2:建立一個地圖,並標記多個點
範例網站:多點標記
1.開啟記事本貼上範例程式碼
2.修改要顯示的文字與坐標 (查詢坐標)
3.另存成htm檔,編碼使用UTF-8
4.看成果:2_MAP_API推廣版_多標記點.html。
32
33
一、申請流程
二、使用TGOS MAP API-Lite
三、初始化地圖設定值
四、套疊幾何圖層物件-GeoJSON
五、複合式定位
初始化地圖設定值
• 範例中提供之APPID與APIKEY為不指定IP,有效
期限至2016/7/31
34
初始化地圖設定值
• 範例網站:初始化地圖設定值
35
預設樣式
設定後的精簡
樣式
初始化地圖設定值
• 範例中調整的項目有:
• backgroundColor:地圖背景顏色
• disableDefaultUI:是否關閉使用者控制項
• Scrollwheel:允許使用者對地圖使用滑鼠滾輪
• mapTypeControl:開啟地圖類型控制項
• mapTypeControlOptions:指定地圖類型
• navigationControl:是否開啟縮放控制列
• navigationControlOptions:指定縮放控制列
• scaleControl:是否開啟比例尺控制項
• 看看程式碼:3_初始化地圖設定值.html
36
37
一、申請流程
二、使用TGOS MAP API-Lite
三、初始化地圖設定值
四、套疊幾何圖層物件-GeoJSON
五、複合式定位
套疊幾何圖層物件-GeoJSON
• GeoJSON 是一種專門處理地理資訊 (GIS) 結構的 JSON 標
準格式。 一個 GeoJSON 物件可以用來代表點 (Point),
線 (LineString),多邊形 (Polygon) 等等的幾何結構,以及
特徵 (Feature) 的集合,
或是一系列的特徵 (FeatureCollection)
38
套疊幾何圖層物件-GeoJSON
• 這個範例所使用的json資料
• http://api.tgos.nat.gov.tw/TGOS_API/images/TGOS.json
• 範例網站:套疊幾何圖層物件(GeoJSON)
39
套疊幾何圖層物件-GeoJSON
• 看看程式碼:4_套疊geojson.html
40
41
一、申請流程
二、使用TGOS MAP API-Lite
三、初始化地圖設定值
四、套疊幾何圖層物件-GeoJSON
五、複合式定位
複合式定位
• 範例網站:複合式定位
• 複合式定位功能查詢邏輯是藉由
字串判別、坐標格式判別以及
地址關鍵字判別,進行不同類型之定位。
42
複合式定位
• 回傳資訊
43
本次回傳資料內容 回傳的定位狀況:
OK
TOO_MANY_RESULTS
ERROR
INVALID_REQUEST
OVER_QUERY_LIMIT
REQUEST_DENIED
UNKNOWN_ERROR
ZERO_RESULTS
共130筆,分為5
頁
複合式定位
44
複合式定位
• 圖台初始化
function main() {
//圖台初始化
mapDiv = document.getElementById("TGMap");
map = new TGOS.TGOnlineMap(mapDiv, coordSys);
//準備好定位物件與訊息物件
tgLocate = new TGOS.TGLocate();
info = new TGOS.TGInfoWindow();
}
45
複合式定位
• 建立定位請求
//TGLocate 定位請求的設定
var request = {
geometryInfo: true,
requestText: document.querySelector("#requestText").value,
pageNumber: parseInt(document.querySelector("#page-number").value),
county: document.querySelector("#county").value,
town: document.querySelector("#town").value
}
46
複合式定位
• 建立定位請求
tgLocate.complexLocate(request, coordSys, function(results, status) {
if (status !== TGOS.TGLocatorStatus.OK && status !== TGOS.TGLocatorStatus.TOO_MANY_RESULTS) {
alert(status);
return; }
if (markers) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = []; }
for (var i = 0; i < results.length; i++) {
var re = results[i];
if (re.geometry) {
var marker = new TGOS.TGMarker(map, re.geometry.location);
marker.setTitle(re.name);
marker.annotation = re;
TGOS.TGEvent.addListener(marker, "click", function(e) {
info.setContent(this.annotation.county + this.annotation.town + this.annotation.name + " [" + this.annotation.type + "]");
info.setPosition(this.position);
info.open(map);
})
markers.push(marker); }
}
});
47

More Related Content

More from family

105年中央部會重要重要蚊媒傳染病監測及相關策略 重要蚊媒傳染病監測及相關策略線上講義 0628更正
105年中央部會重要重要蚊媒傳染病監測及相關策略 重要蚊媒傳染病監測及相關策略線上講義 0628更正105年中央部會重要重要蚊媒傳染病監測及相關策略 重要蚊媒傳染病監測及相關策略線上講義 0628更正
105年中央部會重要重要蚊媒傳染病監測及相關策略 重要蚊媒傳染病監測及相關策略線上講義 0628更正family
 
C10003881 35549
C10003881 35549C10003881 35549
C10003881 35549family
 
氣候變遷圖解小百科
氣候變遷圖解小百科氣候變遷圖解小百科
氣候變遷圖解小百科family
 
10 bim4.0推動現況黃毓舜
10 bim4.0推動現況黃毓舜10 bim4.0推動現況黃毓舜
10 bim4.0推動現況黃毓舜family
 
09 智慧衛浴─整體衛浴的蛻變與健康照護吳裕偉
09 智慧衛浴─整體衛浴的蛻變與健康照護吳裕偉09 智慧衛浴─整體衛浴的蛻變與健康照護吳裕偉
09 智慧衛浴─整體衛浴的蛻變與健康照護吳裕偉family
 
08 智慧家電─公宅家電的物聯技術張忠棋
08 智慧家電─公宅家電的物聯技術張忠棋08 智慧家電─公宅家電的物聯技術張忠棋
08 智慧家電─公宅家電的物聯技術張忠棋family
 
07 預鑄工法─營建4.0的未來趨勢曹昌盛
07 預鑄工法─營建4.0的未來趨勢曹昌盛07 預鑄工法─營建4.0的未來趨勢曹昌盛
07 預鑄工法─營建4.0的未來趨勢曹昌盛family
 
06 桃園市政府公營住宅發展現況邱奕聖 1
06 桃園市政府公營住宅發展現況邱奕聖 106 桃園市政府公營住宅發展現況邱奕聖 1
06 桃園市政府公營住宅發展現況邱奕聖 1family
 
04 智慧公宅標準規範之建立與應用李章裕
04 智慧公宅標準規範之建立與應用李章裕04 智慧公宅標準規範之建立與應用李章裕
04 智慧公宅標準規範之建立與應用李章裕family
 
03 臺北市政府智慧公宅智慧化執行策略張裕隆
03 臺北市政府智慧公宅智慧化執行策略張裕隆03 臺北市政府智慧公宅智慧化執行策略張裕隆
03 臺北市政府智慧公宅智慧化執行策略張裕隆family
 
02 智慧公宅資料交換標準之推動現況林祺政
02 智慧公宅資料交換標準之推動現況林祺政02 智慧公宅資料交換標準之推動現況林祺政
02 智慧公宅資料交換標準之推動現況林祺政family
 
預鑄建築工法技術推廣手冊
  預鑄建築工法技術推廣手冊  預鑄建築工法技術推廣手冊
預鑄建築工法技術推廣手冊family
 
CRISPR/ Cas9||鸡3种组织中热应激相关基因的表达谱芯片分析
CRISPR/ Cas9||鸡3种组织中热应激相关基因的表达谱芯片分析CRISPR/ Cas9||鸡3种组织中热应激相关基因的表达谱芯片分析
CRISPR/ Cas9||鸡3种组织中热应激相关基因的表达谱芯片分析family
 
Univj.18 2.02
Univj.18 2.02Univj.18 2.02
Univj.18 2.02family
 
一位令人敬仰的醫壇耆宿+王耀東教授
一位令人敬仰的醫壇耆宿+王耀東教授一位令人敬仰的醫壇耆宿+王耀東教授
一位令人敬仰的醫壇耆宿+王耀東教授family
 
新生座談會 10-劉春初
新生座談會 10-劉春初新生座談會 10-劉春初
新生座談會 10-劉春初family
 
20171011 月旦法學知識庫
20171011 月旦法學知識庫20171011 月旦法學知識庫
20171011 月旦法學知識庫family
 
央行年報.66台北市政府公告 a
央行年報.66台北市政府公告 a央行年報.66台北市政府公告 a
央行年報.66台北市政府公告 afamily
 
20171011 法源法律網
20171011 法源法律網20171011 法源法律網
20171011 法源法律網family
 
20171011 easy test線上學習服務網
20171011 easy test線上學習服務網20171011 easy test線上學習服務網
20171011 easy test線上學習服務網family
 

More from family (20)

105年中央部會重要重要蚊媒傳染病監測及相關策略 重要蚊媒傳染病監測及相關策略線上講義 0628更正
105年中央部會重要重要蚊媒傳染病監測及相關策略 重要蚊媒傳染病監測及相關策略線上講義 0628更正105年中央部會重要重要蚊媒傳染病監測及相關策略 重要蚊媒傳染病監測及相關策略線上講義 0628更正
105年中央部會重要重要蚊媒傳染病監測及相關策略 重要蚊媒傳染病監測及相關策略線上講義 0628更正
 
C10003881 35549
C10003881 35549C10003881 35549
C10003881 35549
 
氣候變遷圖解小百科
氣候變遷圖解小百科氣候變遷圖解小百科
氣候變遷圖解小百科
 
10 bim4.0推動現況黃毓舜
10 bim4.0推動現況黃毓舜10 bim4.0推動現況黃毓舜
10 bim4.0推動現況黃毓舜
 
09 智慧衛浴─整體衛浴的蛻變與健康照護吳裕偉
09 智慧衛浴─整體衛浴的蛻變與健康照護吳裕偉09 智慧衛浴─整體衛浴的蛻變與健康照護吳裕偉
09 智慧衛浴─整體衛浴的蛻變與健康照護吳裕偉
 
08 智慧家電─公宅家電的物聯技術張忠棋
08 智慧家電─公宅家電的物聯技術張忠棋08 智慧家電─公宅家電的物聯技術張忠棋
08 智慧家電─公宅家電的物聯技術張忠棋
 
07 預鑄工法─營建4.0的未來趨勢曹昌盛
07 預鑄工法─營建4.0的未來趨勢曹昌盛07 預鑄工法─營建4.0的未來趨勢曹昌盛
07 預鑄工法─營建4.0的未來趨勢曹昌盛
 
06 桃園市政府公營住宅發展現況邱奕聖 1
06 桃園市政府公營住宅發展現況邱奕聖 106 桃園市政府公營住宅發展現況邱奕聖 1
06 桃園市政府公營住宅發展現況邱奕聖 1
 
04 智慧公宅標準規範之建立與應用李章裕
04 智慧公宅標準規範之建立與應用李章裕04 智慧公宅標準規範之建立與應用李章裕
04 智慧公宅標準規範之建立與應用李章裕
 
03 臺北市政府智慧公宅智慧化執行策略張裕隆
03 臺北市政府智慧公宅智慧化執行策略張裕隆03 臺北市政府智慧公宅智慧化執行策略張裕隆
03 臺北市政府智慧公宅智慧化執行策略張裕隆
 
02 智慧公宅資料交換標準之推動現況林祺政
02 智慧公宅資料交換標準之推動現況林祺政02 智慧公宅資料交換標準之推動現況林祺政
02 智慧公宅資料交換標準之推動現況林祺政
 
預鑄建築工法技術推廣手冊
  預鑄建築工法技術推廣手冊  預鑄建築工法技術推廣手冊
預鑄建築工法技術推廣手冊
 
CRISPR/ Cas9||鸡3种组织中热应激相关基因的表达谱芯片分析
CRISPR/ Cas9||鸡3种组织中热应激相关基因的表达谱芯片分析CRISPR/ Cas9||鸡3种组织中热应激相关基因的表达谱芯片分析
CRISPR/ Cas9||鸡3种组织中热应激相关基因的表达谱芯片分析
 
Univj.18 2.02
Univj.18 2.02Univj.18 2.02
Univj.18 2.02
 
一位令人敬仰的醫壇耆宿+王耀東教授
一位令人敬仰的醫壇耆宿+王耀東教授一位令人敬仰的醫壇耆宿+王耀東教授
一位令人敬仰的醫壇耆宿+王耀東教授
 
新生座談會 10-劉春初
新生座談會 10-劉春初新生座談會 10-劉春初
新生座談會 10-劉春初
 
20171011 月旦法學知識庫
20171011 月旦法學知識庫20171011 月旦法學知識庫
20171011 月旦法學知識庫
 
央行年報.66台北市政府公告 a
央行年報.66台北市政府公告 a央行年報.66台北市政府公告 a
央行年報.66台北市政府公告 a
 
20171011 法源法律網
20171011 法源法律網20171011 法源法律網
20171011 法源法律網
 
20171011 easy test線上學習服務網
20171011 easy test線上學習服務網20171011 easy test線上學習服務網
20171011 easy test線上學習服務網
 

Recently uploaded

KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptx
KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptxKAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptx
KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptxg07294746
 
20230513taibif-datapaper-tutorial_zh.pdf
20230513taibif-datapaper-tutorial_zh.pdf20230513taibif-datapaper-tutorial_zh.pdf
20230513taibif-datapaper-tutorial_zh.pdfjhujyunjhang
 
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】黑客 接单【TG/微信qoqoqdqd】
 
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】andiback97
 
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】黑客 接单【TG/微信qoqoqdqd】
 
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學ssuser29f076
 
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdf
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdfLos derechos de los animales - Hector Hidalgo (2xhoja36).pdf
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdfyenifferdenisseoband1
 
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026WONGYUZHIKPMGuru
 
KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.
KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.
KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.Ang Xiao Yean
 

Recently uploaded (9)

KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptx
KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptxKAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptx
KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptx
 
20230513taibif-datapaper-tutorial_zh.pdf
20230513taibif-datapaper-tutorial_zh.pdf20230513taibif-datapaper-tutorial_zh.pdf
20230513taibif-datapaper-tutorial_zh.pdf
 
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】
 
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】
 
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】
 
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學
 
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdf
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdfLos derechos de los animales - Hector Hidalgo (2xhoja36).pdf
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdf
 
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026
 
KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.
KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.
KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.
 

TGOS MAP API 推廣應用工作坊 初級班3