PowerPoint 簡報

Size: px

Start display at page:

Download "PowerPoint 簡報"

玺璋胡
5 years ago
Views:

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

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

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

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

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

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

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

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

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

TGOS MAP API 服務申請 Step 1: 進入 TGOS 官網並註冊一組帳號 http://tgos.

10 TGOS MAP API 服務申請 Step 1: 進入 TGOS 官網並註冊一組帳號 Step 2: 點擊網路服務查詢 10

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

12 TGOS MAP API 服務申請 Step 5: 進入購物車頁面, 點選進行申請 12

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

14 TGOS MAP API 範例網站進入頁提供四種介接平台範例網站入口點選平台圖示按鈕, 直接進入範例網站, 並展開該平台範例 14

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

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

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

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

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

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

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

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

23 應用範例 (Web) TGOS CLOUD 圖台整合所有 TGOS API 功能 23

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

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

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

27 TGOS MAP API 實機操作 27

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

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

30 0. 基本功能 - 建立地圖引用 TGOS MAP API <script type="text/javascript" src= 您申請的 APPID&APIKey= 您申請的 APIKey" charset="utf-8"></script> 建立地圖 var pomap = document.getelementbyid("map_div"); pmap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826); 地圖物件放置地圖的 DIV ID 坐標系統 EPSG: 坐標系統 (119) EPSG: 坐標系統 (121) EPSG: 經緯度 30

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

0. 基本功能 - 建立地圖指定初始地圖中心點 pmap.setcenter(new TGOS.TGPoint(304416, 2767751)); 指定初始地圖層級 pmap.

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

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

$var mapoptions = { maptypecontroloptions: { maptypeids: [TGOS.TGMapTypeId.TGOSMAP, TGOS.TGMapTypeId.F2IMAGE], controlposition: TGOS.TGControlPosition. RIGHT_TOP, maptypecontrolstyle: TGOS.$

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 34

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

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. 基本功能 - 客製化地圖元件初始地圖時 // 建立客制化控制項 var centercontroldiv = document.createelement('div'); var centercontrol = new CenterControl(centerControlDiv, pmap); // 設定網頁顯示層級 centercontroldiv.index = 1; 37

38 練習一客製化一個初始地圖中心的地圖元件 // 設定控制項 UI 點擊事件 controlui.addeventlistener('click', function () { pmap.setcenter(new TGOS.TGPoint(304416, )); }); 38

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

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

1. 資料結構及疊加標記 - 線物件折線 --- TGLine(TGOnlineMap map, TGLineString path, TGLineOptions opts) TGPoint() TGPoint() TGPoint() TGPoint() TGLineString() TGLine() var path1 = [pt1, pt2,

41 1. 資料結構及疊加標記 - 線物件折線 --- TGLine(TGOnlineMap map, TGLineString path, TGLineOptions opts) TGPoint() TGPoint() TGPoint() TGPoint() TGLineString() TGLine() 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 41 pt2 pt3 41

1. 資料結構及疊加標記 - 面物件多邊形 --- TGFill(TGOnlineMap map, TGPolygon path, TGFillOptions opts) TGLinearRing() TGPolygon() TGLineString() TGPoint() TGPoint() TGPoint() TGPoint()

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

43 1. 資料結構及疊加標記 - 點線面物件 // 建立點資料結構 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 43

1. 資料結構及疊加標記 - 點線面物件 ptlist.push(ptlist[0]); // 將點陣列中的第一筆資料取出作為最後一筆資料 closeline = new TGOS.TGLineString(ptList); // 建立線資料結構 boarder = new TGOS.TGLinearRing(closeLine); // 建立封閉線資料結構 pgn = new TGOS.

44 1. 資料結構及疊加標記 - 點線面物件 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); 44

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

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

2. 訊息視窗 - 建立視窗 var infotext = [ <B> 臺中市政府 ']; // 訊息視窗的內容, var imgurl ='https://pixabay.com/static/uploads/photo/2014/04/02/10/45/location- 304467_960_720.

47 2. 訊息視窗 - 建立視窗 var infotext = [ <B> 臺中市政府 ']; // 訊息視窗的內容, var imgurl =' _960_720.png'; // 標記點圖示來源 // 建立點資料結構 var markerpoint = new TGOS.TGPoint(214192, ); // 填入地標坐標位置 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); 47

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

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

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

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

52 3. 外部圖資套疊 - 影像疊加層影像資料結構 ---TGImage() 影像疊加層 ---TGGroundOverlay() 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); // 設定要套疊影像的地圖 52

53 3. 外部圖資套疊 - 影像疊加層 // 地圖縮放至影像套疊範圍 pmap.fitbounds(imgoverlay.getbounds()); 53

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

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

56 3. 外部圖資套疊 -WMTS 圖層 WMTS 圖層物件 --- TGWmtsLayer() 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); 56

57 3. 外部圖資套疊 -WMTS 圖層 Info 參數可以使用 WMTS 服務的 GetCapabilities 方法取得 26.aspx??SERVICE=WMTS&REQUEST=GetCapabilities&VERSION=

3. 外部圖資套疊 -GeoJSON 圖層 GeoJSON 資料結構 ---TGData () 使用符號標記資料 TGSymbol() s FORWARD_CLOSED_ARROW FORWARD_OPEN_ARROW BACKWARD_CLOSED_ARROW BACKWARD_OPEN_ARROW CIRCLE

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

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").value,{id PropertyName:"GEOJSON"},function(graphic){ GeoJSONLayer.setMap(pMap); // 設定呈現幾何圖層物件的地圖物 59

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

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

62 4. 定位功能 - 地址定位宣告使用定位服務 var locator = new TGOS.TGLocateService(); 定位參數 : 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) 例 : 臺北市松江路 469 巷 4 號 62

63 4. 定位功能 - 地址定位 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); } ); } 63

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

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. 定位功能 - 道路定位宣告使用定位服務 var locator = new TGOS.TGLocateService(); 定位參數 : roadlocation 回傳結果為 97 坐標並用標記點標示定位位置 locatetwd97 TGOS.TGMarker 例 : 松江路 66

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

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

69 4. 定位功能 - 地標定位 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); } ); } 69

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

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

72 heatmap = new TGOS.TGHeatmapLayer({ data: createdata(), // 指定繪製熱區圖之資料 map: pmap // 指定要繪製熱區圖的地圖物件 }); var createdata = function () { // 本範例將隨機生成資料 var count = 500; var data = [ ]; while (count -- ) { var xy = BoxMullerPolar(23.480, , , ); 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); } return data; 72

heatmap.setoptions({ radius: document.getelementbyid("radius").

73 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 }); } 73

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

Microsoft Word - PHP7Ch01.docx

Microsoft Word - PHP7Ch01.docx PHP 01 1-6 PHP PHP HTML HTML PHP CSSJavaScript PHP PHP 1-6-1 PHP HTML PHP HTML 1. Notepad++ \ch01\hello.php 01: 02: 03: 04: 05: PHP 06: