2016輕鬆開發自有網路地圖工作坊 進階班 0701

1. TGOS
TGOS
Maps
「 105年度地理資訊圖資雲服務平台推廣、
營運及功能增修作業」委外服務案
TGOS MAP API推廣應用工作坊-進階
班
TGOS MAP API實機操作
主辦單位:內政部資訊中心
承辦單位:財團法人空間及環境科技文教基金會
105年7月1、8日

2. 簡報大綱
一、TGOS MAP API範例網站進階說明
二、TGOS MAP API實機操作
2

3. TGOS MAP API組成
3
TGOS MAP
API
TGOS MAP API(Web)
TGOS MAP API(Mobile)
TGOS MAP API(Android)
TGOS MAP API(iOS)
TGOS MAP API Lite(Web)
TGOS 3D API(Web)

4. TGOS MAP API特色
4
• 可供WEB及Mobile (含Android、iOS)介接，可以在網頁或行動裝置應
用程式中輕鬆建立地圖平台及各項功能。
• TGOS 3D API採HTML 5技術無需Plugin安裝，將服務提升至可展現或
處理3D圖資之環境。
支援多種系統
• 資料庫內涵豐富的台灣空間資料，使用者可以在圖台上展示、利用各
種資訊。未來增加更多圖資時也方便擴充。
資料豐富
• 允許使用者添加自有圖片或其他網路地圖服務，讓呈現資訊更加多元。
相容性高
• 提供坐標轉換、量測、定位、查詢、路徑規劃、使用者位置(mobile)、
擴增實境(mobile)等功能，使用更加便利。
功能完整

5. • 無須考量底層原始碼或程式工作機制，降低開發成
本及門檻。
• 無須額外建立各項資料及程式碼儲存空間，減少硬
體花費。
• 透過引用介接方式取得各種服務與功能，便於資源
整合與共享。
為什麼要使用API
5

6. TGOS電子地圖 ※ 通用版電子地圖 福衛二號衛星影像
福衛影像混合地圖 地形暈渲混合地圖 地形暈渲圖
※ 擴充大比例尺(一千分之一)底圖服務 – 引用通用版電子地圖。 6
TGOS MAP API(Web)基本圖資

7. 多種圖面標記方式
7
點
標記符號訊息視窗
面線
文字註記

8. 多種定位方式
8
門牌地址 地標名稱
道路名稱 行政區
坐標定位
里程定位
最近門牌
複合式定位
路口定位

9. 9
主題圖資套疊、查詢
都市計畫圖
國土利用調查
非都市計畫圖
避難收容處所搜尋

10. TGOS MAP API服務申請
• Step 1: 進入TGOS官網並註冊一組帳號
http://tgos.nat.gov.tw/tgos/web/tgos_home.aspx
• Step 2: 點擊「網路服務查詢」
10

11. • Step 3: 服務類型選「JavaScript API」並進行查詢。
• Step 4: 點選「TGOS MAP API (Web)」
TGOS MAP API服務申請
11

12. • Step 5: 進入購物車頁面，點選「進行申請」
TGOS MAP API服務申請
12

13. • Step 6: 填寫申請用途、IP、應用程式資訊等內容，
之後送出申請單。等待審核通過後得到可供介接使
用之AppID及APIKey。
TGOS MAP API服務申請
13

14. TGOS MAP API 範例網站進入頁
• 提供四種介接平台範例網站入口
http://api.tgos.nat.gov.tw/TGOS_MAP_API/
14
點選平台圖示按鈕，直接進入範例
網站，並展開該平台範例

15. • 範例網站主頁面
15
TGOS MAP API 範例網站
樹狀階層式架構目
錄便於瀏覽及擴增
可隨時切換不同平
台的API說明頁面
15

16. • 功能簡介
TGOS MAP API (Web) 範例網站
16
功能簡介說明
功能名稱標題

17. • 檢視範例
TGOS MAP API (Web) 範例網站
17

18. TGOS MAP API (Web) 範例網站
• 功能程式碼範例
18
點選”See Result” ，
可實際操作該功能情
境
提供程式碼範例及說明

19. TGOS MAP API (Web) 範例網站
• 功能程式碼範例
19
點選”View Model” ，
可切換成全畫面

20. • 快速使用範例
TGOS MAP API (Web) 範例網站
20
情境下建置方式之
詳細步驟及說明
此範例之情境描述
範例標題

21. TGOS MAP API (Web) 範例網站
• 快速使用範例
21
點選”See Result” ，可
實際操作該功能情境亦提供程式碼範例及說明

22. TGOS MAP API (Web) 範例網站
• TGOS MAP API參考手冊
22
提供開發人員
指南
API列表，提
供快速搜索

23. • TGOS CLOUD圖台
• 整合所有TGOS API功能
應用範例（Web）
23

24. 1.臺中市政府市長信箱
24
應用TGOS MAP API
標示案件發生地點

25. 2. 災害潛勢地圖網站
25
• 定位
• 基本底圖
• 主題圖資套疊
• 圖面量測

26. 3.內政部不動產交易實價查詢服務網
26

27. TGOS MAP API
實機操作
27

28. TGOS MAP API (Web) 功能架構
28
*黑色粗體為本年度擴充功能相關架構

29. TGOS MAP API 示範說明
29
• 基本功能
• 資料結構及疊加標記
• 訊息視窗
• 外部圖層套疊
• 定位功能
• 熱區圖

30. 0.基本功能-建立地圖
30
• 引用TGOS MAP API
• 建立地圖
var pOMap = document.getElementById("map_div");
pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826);
<script type="text/javascript"
src=“http://api.tgos.nat.gov.tw/TGOS_API/tgos?ver=2&AppID=您申請
的APPID&APIKey=您申請的APIKey" charset="utf-8"></script>
放置地圖的DIV ID
地圖物件 坐標系統
EPSG:3825---97坐標系統(119)
EPSG:3826--- 97坐標系統(121)
EPSG:3857---經緯度

31. 0.基本功能-建立地圖
31

32. 0.基本功能-建立地圖
32
• 指定初始地圖中心點
• 指定初始地圖層級
• TGOS提供的基本底圖類型：
---TGOS電子地圖 ---福衛二號衛星影像
---通用版電子地圖 ---福衛二號混合地圖
---地形暈渲圖 ---地形暈渲混合地圖
pMap.setZoom(10);
pMap.setCenter(new TGOS.TGPoint(304416, 2767751));
坐標點物件
X坐標 Y坐標

33. 0.基本功能-地圖控制項
33
• 圖面客製化
• 地圖介面控制項 --- 物件“TGMapOptions”
var mapOptions = {
disableDefaultUI: true //關閉所有地圖控制項
};
pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826,
mapOptions);

34. 34
var mapOptions = {
mapTypeControlOptions: {
mapTypeIds: [TGOS.TGMapTypeId.TGOSMAP,
TGOS.TGMapTypeId.F2IMAGE],
controlPosition: TGOS.TGControlPosition. RIGHT_TOP,
mapTypeControlStyle: TGOS.TGMapTypeControlStyle.DROPDOWN_MENU
},
navigationControlOptions: {
controlPosition: TGOS.TGControlPosition. RIGHT_CENTER,
navigationControlStyle: TGOS.TGNavigationControlStyle.SMALL
}
};
34

35. 0.基本功能-客製化地圖元件
35
UI 功能+ =
客製化地圖
元件

36. 建立地圖控制DIV物件
//建立控制項UI
var controlUI = document.createElement('div');
controlUI.setAttribute("class", "customControl"); //設定class
controlUI.style.backgroundColor = '#fff'; //設定背景顏色
……..
//建立控制項UI內容
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)'; //文字顏色
…….
//設定控制項UI點擊事件
controlUI.addEventListener('click', function () {
pMap.setZoom(10);
});
//將控制項內容加至UI控制項內
controlUI.appendChild(controlText);
36

37. 0.基本功能-客製化地圖元件
• 初始地圖時
37
//建立客制化控制項
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, pMap);
//設定網頁顯示層級
centerControlDiv.index = 1;

38. 練習一
• 客製化一個「初始地圖中心」的地圖元件
38
//設定控制項UI點擊事件
controlUI.addEventListener('click', function () {
pMap.setCenter(new TGOS.TGPoint(304416, 2767751));
});

39. 1.資料結構及疊加標記
39
• 常用資料結構
--- TGPoint(x, y) 點坐標（定義單點坐標、建立標記點...）
--- TGLineString(Array<TGPoint>) 折線
--- TGLinearRing(TGLineString) 封閉線
--- TGPolygon(Array<TGLinearRing>) 多邊形
--- TGEnvelope(left, top, right, bottom) 矩形、定義邊界範圍
--- TGCircle() 圓形
--- TGSize(width, height) 定義二維物件尺寸
--- TGImage() 圖片物件
• 建立標記點
--- TGMarker()

40. • 點 --- TGPoint(x,y)
• 標記點 --- TGMarker(TGOnlnieMap map, TGPoint position, String
title, TGImage icon, TGMarkerOptions opts?)
40
TGPoint( ) TGImage( )+ = TGMarker( )
1.資料結構及疊加標記-點物件
var marker = new TGOS.TGMarker(pMap, new TGOS.TGPoint(303890, 2773244),
‘測試點');
40

41. 1.資料結構及疊加標記-線物件
41
• 折線 --- TGLine(TGOnlineMap map, TGLineString path,
TGLineOptions opts)
41
TGPoint()
TGLineString() TGLine()TGPoint()TGPoint()TGPoint()
var path1 = [pt1, pt2, pt3]; //設定path節點順序
var LS = new TGOS.TGLineString(path1); //設定線資料的path
var line = new TGOS.TGLine(pMap, LS, {
strokeColor: '#0446F9',
strokeWeight: 3
}); pt1
pt2 pt3

42. 1.資料結構及疊加標記-面物件
42
var env = new TGOS.TGEnvelope(303933, 2773213, 303984, 2773179);
var pgn = new TGOS.TGFill(pMap, env, {
fillColor: '#E2EE1C‘,
fillOpacity:0.5
});
42
TGPoint()
TGLinearRing()
TGFill()
TGPoint()TGPoint()TGPoint()
TGPolygon()
TGCircle()
TGEnvelope()
TGLineString()
• 多邊形 --- TGFill(TGOnlineMap map, TGPolygon path,
TGFillOptions opts)

43. 1.資料結構及疊加標記-點線面物件
43
//建立點資料結構
pt = new TGOS.TGPoint(event.point.x, event.point.y);
ptList.push(pt); //將點資料加入陣列中存放
//建立標記點
marker = new TGOS.TGMarker(pMap, pt, i); //標記點物件
i = i + 1; //標記點的標題文字
markers.push(marker); //將標記點資料加入陣列中存放
//建立LineString資料結構
lineString = new TGOS.TGLineString(ptList);
var lineOpts = { //設定折線樣式
strokeColor: "#0446F9",
strokeWeight: 3,
strokeDasharray: "- “
};
//建立折線疊加層
line = new TGOS.TGLine(pMap, lineString, lineOpts);
43

44. 1.資料結構及疊加標記-點線面物件
44
ptList.push(ptList[0]); //將點陣列中的第一筆資料取出作為最後一筆資料
closeLine = new TGOS.TGLineString(ptList); //建立線資料結構
boarder = new TGOS.TGLinearRing(closeLine); //建立封閉線資料結構
pgn = new TGOS.TGPolygon([boarder]); //建立多邊形資料結構
var fillOpts = { //設定多邊形樣式
strokeWeight: 3, // 多邊形外框粗細
strokeDasharray: "- ", // 多邊形外框線樣式
strokeColor: '#0446F9', // 設定外框顏色
strokeOpacity: 1, // 設定外框透明度
fillColor: '#E2EE1C', // 設定填色
fillOpacity: 0.3 //設定填滿透明度
};
//建立多邊形疊加層
fill = new TGOS.TGFill(pMap, pgn, fillOpts);

45. 練習二
• 請於開發示範網站上建立標記點、折線、多邊形
• 請開啟sample1.js
• 改變標記點的標題文字
• 調整多邊形顏色、透明度、虛線樣式
45
i = “測試點”; //標記點的標題文字
var fillOpts = { //設定多邊形樣式
strokeWeight: 3, // 多邊形外框粗細
strokeDasharray: "- ", // 多邊形外框線樣式
strokeColor: '#0446F9', // 設定外框顏色
strokeOpacity: 1, // 設定外框透明度
fillColor: '#E2EE1C', // 設定填色
fillOpacity: 0.3 //設定填滿透明度
};

46. 2.訊息視窗
46
• 訊息視窗 --- TGInfoWindow(string content, Point position,
TGInfoWindowOptions opts)
TGPoint()訊息內容 + = TGInfoWindow()
var info = new TGOS.TGInfoWindow(“訊息內容”, new TGOS.TGPoint(x,y));
info.open(pMap);

47. 2.訊息視窗-建立視窗
47
var infotext = [‘<B>臺中市政府']; //訊息視窗的內容,
var imgUrl ='https://pixabay.com/static/uploads/photo/2014/04/02/10/45/location-
304467_960_720.png'; //標記點圖示來源
//建立點資料結構
var markerPoint = new TGOS.TGPoint(214192, 2673102) ; //填入地標坐標位
置
var markerImg = new TGOS.TGImage(imgUrl, new TGOS.TGSize(33, 38), new
TGOS.TGPoint(0, 0), new TGOS.TGPoint(10, 33)); //標記點圖片及尺寸大小
//建立標記點
var pTGMarker = new TGOS.TGMarker(pMap, markerPoint,'',markerImg);
//設定訊息視窗
var InfoWindowOptions = {
maxWidth:4000, //訊息視窗的最大寬度
opacity:0.8, //訊息視窗的透明度
pixelOffset: new TGOS.TGSize(5, -30)//訊息視窗錨點平移量
};
//建立訊息視窗
messageBox= new TGOS.TGInfoWindow(infotext, markerPoint,
InfoWindowOptions);

48. • 滑鼠事件（click、rightclick、mouseover......）
• 地圖內容改變事件（邊界改變、地圖類型改變......）
• 訊息視窗改變事件（關閉訊息視窗、位置改變......）
• 標記點事件（位置改變、圖示改變、標題改變......）
• ......
• 加入監聽器的方式---
TGOS.TGEvent.addListener(object instance, string
eventName, Function handler)
48
2.訊息視窗-事件監聽
監聽對象
事件名稱 執行函式
48

49. 2.訊息視窗-事件監聽
49
//監聽標記點滑鼠click事件, 配合開啟訊息視窗
TGOS.TGEvent.addListener(pTGMarker, "click", function (pTGMarker,
messageBox) {
return function () {
messageBox.open(pMap, pTGMarker);
}
} (pTGMarker, messageBox));

50. 50
//地圖類型改變
TGOS.TGEvent.addListener(pMap, 'maptypeid_changed', function(){alert('地圖類型改
變');});
//縮放層級改變
TGOS.TGEvent.addListener(pMap, 'zoom_changed', function(){alert('縮放層級改變')});
2.訊息視窗-事件監聽
50

51. 練習三
• 開啟sample2.js
• InfoWindow內容支援HTML語法，
• 請於訊息內容輸入'<a href="http://www.taichung.gov.tw/"
target="_blank"><B><font color="blue">臺中市政府
</font></a>'
• 改變監聽事件
51
//監聽標記點滑鼠mouseout事件, 配合關閉訊息視窗
TGOS.TGEvent.addListener(pTGMarker, “mouseout", function
(pTGMarker, messageBox) {
return function () {
messageBox.close(pMap, pTGMarker);
}
} (pTGMarker, messageBox));

52. 3.外部圖資套疊-影像疊加層
• 影像資料結構---TGImage()
• 影像疊加層---TGGroundOverlay()
52
IMG = new TGOS.TGImage(); //建立影像資料結構
IMG.setUrl(document.getElementById("img_url").value); //加入影像連結
IMGOverlay = new TGOS.TGGroundOverlay(); //建立影像疊加物件
IMGOverlay.setImage(IMG); //加入影像
//設定影像套疊邊界
IMGOverlay.setBounds(new TGOS.TGEnvelope(pLeft, pTop, pRight, pBottom));
IMGOverlay.setOpacity(0.7)); //設定透明度
IMGOverlay.setMap(pMap); //設定要套疊影像的地圖

53. 53
3.外部圖資套疊-影像疊加層
//地圖縮放至影像套疊範圍
pMap.fitBounds(IMGOverlay.getBounds());

54. 3.外部圖資套疊-KML圖層
• KML圖層物件--- TGKmlLayer()
54
KMLLayer = new TGOS.TGKmlLayer(document.getElementById("kml_url").value,
{
//加入KML圖層到地圖
map: pMap,
suppressInfoWindows: false, //是否不觸發訊息視窗
preserveViewport: true //是否縮放畫面至KML圖層範圍
}, function() {
var meta = KMLLayer.getMetadata(); //取出KML Metadata
});

55. 3.外部圖資套疊-WMS圖層
• WMS圖層物件--- TGWmsLayer()
55
WMSLayer = new
TGOS.TGWmsLayer(document.getElementById("wms_url").value, {
//建立WMS物件, 加入WMS連結, 並指定相關屬性
map: pMap,
preserveViewport: true,
wsVisible: true
});

56. 3.外部圖資套疊-WMTS圖層
• WMTS圖層物件--- TGWmtsLayer()
56
var info = {
matrixSet: 'TGOSMAP.cfg ‘,//設定MatrixSet，為必要參數
layer: 'Map', //設定WMTS圖層名稱
format: "image/png “, //設定WMTS格式
style: "default" //設定WMTS格式，大多數的WMTS服務皆設為default
};
var req = {
wmtsVisible: true, //設定WMTS圖層是否顯示
opacity: 0.65 //設定WMTS圖層透明度
};
WMTSLayer = new TGOS.TGWmtsLayer(wmts_url, pMap, info, req);

57. 3.外部圖資套疊-WMTS圖層
• Info參數可以使用WMTS服務的GetCapabilities方法
取得。
• http://api.tgos.nat.gov.tw/TGOS_WMTS/TWD97/SimpleWMTS_LANDUSE38
26.aspx??SERVICE=WMTS&REQUEST=GetCapabilities&VERSION=1.0.0
57

58. 3.外部圖資套疊-GeoJSON圖層
• GeoJSON資料結構---TGData ()
• 使用符號標記資料—TGSymbol()
• s
58
FORWARD_CLOSED_ARRO
W
封閉箭頭
FORWARD_OPEN_ARROW 開放箭頭
BACKWARD_CLOSED_ARR
OW
反向封閉箭頭
BACKWARD_OPEN_ARROW 反向開放箭頭
CIRCLE 圓形
DOUBLE_CIRCLE 雙同心圓
TRIPLE_CIRCLE 三同心圓
CIRCLE_SPOT 圓內一點
TRIANGLE 正三角形
INVERT_TRIANGLE 倒三角形
SQUARE 四方形
PENTAGON 五角形
HEXAGON 六角形
OCTAGON 八角形
PENTASTAR 五芒星形

59. 59
var pTGSymbo = new TGOS.TGSymbol(); //建立標記圖示物件
pTGSymbo.symbolStyle = TGOS.TGSymbolStyle.HEXASTAR; //設定標記
的符號
pTGSymbo.xPixel = 32; //設定標記寬度
pTGSymbo.yPixel = 32; //設定標記高度
pTGSymbo.fillColor = "#E5420C"; //設定填入顏色
pTGSymbo.fillOpacity = 0.7; //設定透明度
pTGSymbo.strokeWeight = 2; //設定框線寬度
pTGSymbo.strokeOpacity = 0.4; //設定框線透明度
pTGSymbo.strokeColor = "#E5420C";
pTGSymbo.anchor.x = 32; //設定錨點x座標
pTGSymbo.anchor.y = 32; //設定錨點y座標
pTGSymbo.rotation = 10; //旋轉角度
//建立幾何圖層物件
GeoJSONLayer = new TGOS.TGData({
map: pMap,
style: {
icon: icon:pTGSymbo //使用標記符號
}
});
//指定GeoJSON來源
GeoJSONLayer.loadGeoJson(document.getElementById("geoJSON_url").v
alue,{idPropertyName:"GEOJSON"},function(graphic){

60. 練習四
• 將影像疊加圖層的連結改為
http://www.digital.ntu.edu.tw/images/NTU-Campus-
Map2.jpg
自行設定適合的邊界坐標，進行影像疊加圖層套疊
• TGSymbol支援SVG圖示，請開啟sample3.js，拿掉//
• 調整GeoJSON的符號樣式
60
var pTGSymbo = new TGOS.TGSymbol(); //建立標記圖示物件
pTGSymbo.symbolStyle = 'M -2,0 0,-2 2,0 0,2 z'; //設定標記圖示SVG格式
樣式

61. • 定位服務
• 坐標定位
• 地址定位
• 地標關鍵字定位
• 道路定位
• 行政區定位
• 里程定位
• 坐標查詢最近鄰地址
• 使用定位服務---
TGOS.TGLocate()
TGOS.TGLocateService()
• locateWGS84( )---回傳結果為經緯度
• locateTWD97( )---回傳結果為97(121)坐標
• locateTWD97_119( )---回傳結果為97(119)坐標
61
4.定位功能
61

62. 4.定位功能-地址定位
• 宣告使用定位服務
• 定位參數: address
• 回傳結果為97坐標並用標記點標示定位位置
• locateTWD97(TGLocatorRequest request, Function callback(Array results,
TGLocatorStatus status, number items, number pages))
• TGOS.TGMarker(TGOnlnieMap map, TGPoint position, string title, TGImage icon,
TGMarkerOptions opts)
62
var locator = new TGOS.TGLocateService();
例：臺北市松江路469巷4號

63. 4.定位功能-地址定位
63
var locator = new TGOS.TGLocateService(); //宣告定位物件
Function locate()
{
locator.locateTWD97({
address: document.getElementById("address").value //定位參數使用address,
並帶入欲定位的地址
}, function(event, status) {
if (status != TGOS.TGLocatorStatus.OK) {
alert('定位失敗!');
return;
}
//使用標記點註明定位位置
loc_marker = new TGOS.TGMarker(pMap, event[0].geometry.location,
event[0].formattedAddress);
//地圖縮放至適合位置
pMap.fitBounds(event[0].geometry.viewport);
}
);
}

64. 4.定位功能-行政區定位
• 宣告使用定位服務
• 定位參數: district
• 回傳結果為97坐標並用繪出行政區範圍
• locateTWD97
• TGOS.TGFill
64
var locator = new TGOS.TGLocateService();
例：臺北市中山區新喜里

65. Function locate()
{
locator.locateTWD97({
district: document.getElementById(“admin”).value //定位參數使用district, 並
帶入欲定位的行政區名稱
}, function(event, status) {
if (status != TGOS.TGLocatorStatus.OK) {
alert('定位失敗!');
return;
}
//繪出行政區範圍
loc_pgn = event[0].geometry.geometry;
loc_fill = new TGOS.TGFill(pMap, loc_pgn, {
fillColor: '#00AAAA',
fillOpacity: 0.2,
strokeColor: '#009090',
strokeWeight: 5,
strokeOpacity: 1
});
pMap.fitBounds(event[0].geometry.viewport);
}
);
} 65

66. 4.定位功能-地標定位
• 宣告使用定位服務
• 定位參數: poi
• 回傳結果為97坐標並用標記點標示定位位置
• locateTWD97
• TGOS.TGMarker
66
var locator = new TGOS.TGLocateService();
例：新北市政府

67. 4.定位功能-地標定位
67
var locator = new TGOS.TGLocateService(); //宣告定位物件
Function locate()
{
locator.locateTWD97({
poi : document.getElementById(“poi”).value //定位參數使用poi, 並帶入欲
定位的地址
}, function(event, status) {
if (status == TGOS.TGLocatorStatus. NO_RESULTS) {
alert('定位失敗!');
return;
}
//使用標記點註明定位位置
loc_marker = new TGOS.TGMarker(pMap, event[0].geometry.location,
event[0]. poiName);
//地圖縮放至適合位置
pMap.fitBounds(event[0].geometry.viewport);
}
);
}

68. 4.定位功能-路口定位
• 宣告使用定位服務
• 定位參數: roadCross
• 回傳結果為97坐標
並用標記點標示定位位置
• TGOS.TGCoordSys.EPSG3826
• TGOS.TGMarker
68
var tgLocate = new TGOS.TGLocate();
roadCross(TGRoadCrossRequest request, TGCoordSys coordSys, Function
callback(Array<TGCrossResult> result, TGLocatorStatus status, number items, number pages))

69. 4.定位功能-路口定位
69
var tgLocate = new TGOS.TGLocate();
Function locate () {
var request = {
geometryInfo: document.querySelector("#geometryInfo").checked, //查詢結
果是否回傳Geometry空間資訊，預設為true。
firstRoad: document.getElementById("cross-road1").value, //第一條道路名
稱。為必要參數。
secondRoad: document.getElementById("cross-road2").value, //第二條道路
名稱。為必要參數。
pageNumber: '1', //查詢結果之頁數(30筆一頁)，預設為第1頁。
firstCounty: document.getElementById("cross-county1").value, //第一條道路
所在縣市。
secondCounty: document.getElementById(“cross-county2”).value //第二條
道路所在縣市。
}

70. 4.定位功能-路口定位
70
tgLocate.roadCross(request, TGOS.TGCoordSys.EPSG3826, function
(event, status, items, pages) {
console.log(arguments);
//roadCross 回傳狀態
if (status !== TGOS.TGLocatorStatus.OK && status !==
TGOS.TGLocatorStatus.TOO_MANY_RESULTS) {
//console.log(status);
return;
}
//取得回傳物件
event.filter(function (r) {
return r.geometry;
}).forEach(function (r) {
loc_marker = new TGOS.TGMarker(pMap,
r.geometry.location, r.firstRoad + “|” + r.secondRoad); // ,設定Marker
loc_markers.push(loc_marker);
});
});
}

71. 練習五
• 請於開發示範網站上使用定位功能
• 請輸入欲定位的地址、地標或是行政區
71

72. 5.熱區圖
• TGHeatmapLayer
• 請利用TGOS圖台上的「資料展點」
• 切換至「點位資料」
• 上傳附件的「資料點.csv」
72

73. 73
heatmap = new TGOS.TGHeatmapLayer({
data: createData(), //指定繪製熱區圖之資料
map: pMap //指定要繪製熱區圖的地圖物件
});
var createData = function () { //本範例將隨機生成資料
var count = 500;
var data = [ ];
while (count -- ) {
var xy = BoxMullerPolar(23.480, 23.485, 120.450, 120.455);
var y = xy.x;
var x = xy.y;
if (isNaN(x) || isNaN(y))
continue;
var pt;
if (coordSys == TGOS.TGCoordSys.EPSG3826) {
var twd97 = TGOS.WGS84toTWD97(x, y);
pt = new TGOS.TGPoint(twd97.x, twd97.y); //建立點資
料
}
else
pt = new TGOS.TGPoint(x, y);
data.push(pt);
}

74. 74
var setData = function () {
heatmap.setOptions({
data: createData()
});
}
var changeRadius = function () {
heatmap.setOptions({
radius: document.getElementById("radius").value
});
}
var changeOpacity = function () {
heatmap.setOptions({
opacity: document.getElementById("opacity").value
});
}

75. 問題討論
~歡迎申請使用 TGOS MAP API~
75