tgos map api 推廣應用工作坊 初級班3
Post on 23-Jan-2018
540 Views
Preview:
TRANSCRIPT
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
top related