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

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

•不需申請就可使用部分功能:

•例如地圖初始化設定、單(多)點標記、訊息視窗、地圖事件等等。

28


•單點標記

29


情境1：建立一個地圖，並定位到自己設定的位置

範例網站：單點標記

1.開啟記事本貼上範例程式碼

2.修改要顯示的文字與坐標（查詢坐標）

3.另存成htm檔，編碼使用UTF-8

4.看成果:1_MAP_API推廣版_單點標記.html。

30


•多點標記

31


情境2：建立一個地圖，並標記多個點

範例網站：多點標記

1.開啟記事本貼上範例程式碼

2.修改要顯示的文字與坐標（查詢坐標）

3.另存成htm檔，編碼使用UTF-8

4.看成果:2_MAP_API推廣版_多標記點.html。

32

33

一、申請流程





初始化地圖設定值

• 範例中提供之APPID與APIKEY為不指定IP，有效

期限至2016/7/31

34


•範例網站：初始化地圖設定值

35

預設樣式

設定後的精簡樣式


•範例中調整的項目有：

• backgroundColor：地圖背景顏色

• disableDefaultUI：是否關閉使用者控制項

• Scrollwheel：允許使用者對地圖使用滑鼠滾輪

• mapTypeControl：開啟地圖類型控制項

• mapTypeControlOptions：指定地圖類型

• navigationControl：是否開啟縮放控制列

• navigationControlOptions：指定縮放控制列

• scaleControl：是否開啟比例尺控制項

• 看看程式碼：3_初始化地圖設定值.html

36

37

一、申請流程





套疊幾何圖層物件-GeoJSON

• GeoJSON 是一種專門處理地理資訊 (GIS) 結構的 JSON 標準格式。一個 GeoJSON 物件可以用來代表點 (Point)，線 (LineString)，多邊形 (Polygon) 等等的幾何結構，以及特徵 (Feature) 的集合，

或是一系列的特徵 (FeatureCollection)

38


• 這個範例所使用的json資料

• http://api.tgos.nat.gov.tw/TGOS_API/images/TGOS.json

• 範例網站：套疊幾何圖層物件(GeoJSON)

39


•看看程式碼：4_套疊geojson.html

40

41

一、申請流程





複合式定位

•範例網站：複合式定位

•複合式定位功能查詢邏輯是藉由

字串判別、坐標格式判別以及

地址關鍵字判別，進行不同類型之定位。

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

Education

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

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