2016輕鬆開發自有網路地圖工作坊 進階班 0701
Post on 10-Feb-2017
228 Views
Preview:
TRANSCRIPT
內政部
TGOS
TGOSMaps
「 105 年度地理資訊圖資雲服務平台推廣、營運及功能增修作業」委外服務案TGOS MAP API 推廣應用工作坊 -進階班
TGOS MAP API 實機操作主辦單位 : 內政部資訊中心承辦單位 : 財團法人空間及環境科技文教基金會
105 年 7 月 1 、 8 日
2
簡報大綱一、 TGOS MAP API 範例網站進階說明
二、 TGOS MAP API 實機操作
3
TGOS MAP API 組成
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)
TGOS MAP API 特色
4
• 可供 WEB 及 Mobile ( 含 Android 、 iOS) 介接，可以在網頁或行動裝置應用程式中輕鬆建立地圖平台及各項功能。• TGOS 3D API 採 HTML 5 技術無需 Plugin 安裝，將服務提升至可展現或處理 3D 圖資之環境。
支援多種系統
• 資料庫內涵豐富的台灣空間資料，使用者可以在圖台上展示、利用各種資訊。未來增加更多圖資時也方便擴充。資料豐富
• 允許使用者添加自有圖片或其他網路地圖服務，讓呈現資訊更加多元。相容性高
• 提供坐標轉換、量測、定位、查詢、路徑規劃、使用者位置(mobile) 、擴增實境 (mobile) 等功能，使用更加便利。
功能完整
• 無須考量底層原始碼或程式工作機制，降低開發成本及門檻。
• 無須額外建立各項資料及程式碼儲存空間，減少硬體花費。
• 透過引用介接方式取得各種服務與功能，便於資源整合與共享。
為什麼要使用 API
5
TGOS 電子地圖 ※ 通用版電子地圖 福衛二號衛星影像
福衛影像混合地圖 地形暈渲混合地圖 地形暈渲圖※ 擴充大比例尺 ( 一千分之一 ) 底圖服務 – 引用通用版電子地圖。 6
TGOS MAP API(Web) 基本圖資
7
多種圖面標記方式點
標記符號訊息視窗
面線
文字註記
8
多種定位方式門牌地址 地標名稱
道路名稱 行政區
坐標定位里程定位
最近門牌複合式定位
路口定位
9
主題圖資套疊、查詢都市計畫圖
國土利用調查 非都市計畫圖
避難收容處所搜尋
TGOS MAP API 服務申請• Step 1: 進入 TGOS 官網並註冊一組帳號
http://tgos.nat.gov.tw/tgos/web/tgos_home.aspx• Step 2: 點擊「網路服務查詢」
10
• Step 3: 服務類型選「 JavaScript API 」並進行查詢。
• Step 4: 點選「 TGOS MAP API (Web) 」
TGOS MAP API 服務申請
11
• Step 5: 進入購物車頁面，點選「進行申請」TGOS MAP API 服務申請
12
• Step 6: 填寫申請用途、 IP 、應用程式資訊等內容，之後送出申請單。等待審核通過後得到可供介接使用之 AppID 及 APIKey 。
TGOS MAP API 服務申請
13
TGOS MAP API 範例網站進入頁• 提供四種介接平台範例網站入口
http://api.tgos.nat.gov.tw/TGOS_MAP_API/14
點選平台圖示按鈕，直接進入範例網站，並展開該平台範例
• 範例網站主頁面
15
TGOS MAP API 範例網站
樹狀階層式架構目錄便於瀏覽及擴增
可隨時切換不同平台的 API 說明頁面
15
• 功能簡介TGOS MAP API (Web) 範例網站
16
功能簡介說明功能名稱標題
• 檢視範例TGOS MAP API (Web) 範例網站
17
18
TGOS MAP API (Web) 範例網站• 功能程式碼範例 點選” See
Result” ，可實際操作該功能情境提供程式碼範例及說明
19
TGOS MAP API (Web) 範例網站• 功能程式碼範例 點選” View
Model” ，可切換成全畫面
• 快速使用範例TGOS MAP API (Web) 範例網站
20
情境下建置方式之詳細步驟及說明
此範例之情境描述
範例標題
21
TGOS MAP API (Web) 範例網站• 快速使用範例 點選” See
Result” ，可實際操作該功能情境亦提供程式碼範例及說明
22
TGOS MAP API (Web) 範例網站• TGOS MAP API 參考手冊
提供開發人員指南
API 列表，提供快速搜索
• TGOS CLOUD 圖台• 整合所有 TGOS API 功能
應用範例（ Web ）
23
24
1. 臺中市政府市長信箱應用 TGOS MAP API標示案件發生地點
25
2. 災害潛勢地圖網站• 定位• 基本底圖• 主題圖資套疊• 圖面量測
26
3. 內政部不動產交易實價查詢服務網
27
TGOS MAP API實機操作
28
TGOS MAP API (Web) 功能架構
*黑色粗體為本年度擴充功能相關架構
29
TGOS MAP API 示範說明• 基本功能• 資料結構及疊加標記• 訊息視窗• 外部圖層套疊• 定位功能• 熱區圖
30
0. 基本功能 - 建立地圖• 引用 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. 基本功能 - 建立地圖
32
0. 基本功能 - 建立地圖• 指定初始地圖中心點
• 指定初始地圖層級
• TGOS 提供的基本底圖類型： ---TGOS 電子地圖 --- 福衛二號衛星影像 --- 通用版電子地圖 --- 福衛二號混合地圖 --- 地形暈渲圖 --- 地形暈渲混合地圖
pMap.setZoom(10);
pMap.setCenter(new TGOS.TGPoint(304416, 2767751));
坐標點物件X 坐標 Y 坐標
0. 基本功能 - 地圖控制項
33
• 圖面客製化• 地圖介面控制項 --- 物件“ TGMapOptions”
var mapOptions = { disableDefaultUI: true // 關閉所有地圖控制項};pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826, mapOptions);
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. 基本功能 - 客製化地圖元件UI 功能+ = 客製化地圖元件
36
建立地圖控制 DIV 物件// 建立控制項 UIvar controlUI = document.createElement('div'); controlUI.setAttribute("class", "customControl"); // 設定 classcontrolUI.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);
37
0. 基本功能 - 客製化地圖元件• 初始地圖時
// 建立客制化控制項var centerControlDiv = document.createElement('div');var centerControl = new CenterControl(centerControlDiv, pMap);// 設定網頁顯示層級centerControlDiv.index = 1;
38
練習一• 客製化一個「初始地圖中心」的地圖元件
// 設定控制項 UI 點擊事件controlUI.addEventListener('click', function () {
pMap.setCenter(new TGOS.TGPoint(304416, 2767751));});
39
1. 資料結構及疊加標記• 常用資料結構
--- TGPoint(x, y) 點坐標（定義單點坐標、建立標記點 ... ）--- TGLineString(Array<TGPoint>) 折線--- TGLinearRing(TGLineString) 封閉線--- TGPolygon(Array<TGLinearRing>) 多邊形--- TGEnvelope(left, top, right, bottom) 矩形、定義邊界範圍--- TGCircle() 圓形--- TGSize(width, height) 定義二維物件尺寸--- TGImage() 圖片物件
• 建立標記點 --- TGMarker()
• 點 --- 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
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); // 設定線資料的 pathvar line = new TGOS.TGLine(pMap, LS, { strokeColor: '#0446F9', strokeWeight: 3}); pt1
pt2 pt3
42
1. 資料結構及疊加標記 - 面物件
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. 資料結構及疊加標記 - 點線面物件// 建立點資料結構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. 資料結構及疊加標記 - 點線面物件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• 改變標記點的標題文字• 調整多邊形顏色、透明度、虛線樣式
i = “ 測試點” ; // 標記點的標題文字
var fillOpts = { // 設定多邊形樣式 strokeWeight: 3, // 多邊形外框粗細 strokeDasharray: "- ", // 多邊形外框線樣式 strokeColor: '#0446F9', // 設定外框顏色 strokeOpacity: 1, // 設定外框透明度 fillColor: '#E2EE1C', // 設定填色 fillOpacity: 0.3 // 設定填滿透明度 };
46
2. 訊息視窗• 訊息視窗 --- TGInfoWindow(string content, Point position,
TGInfoWindowOptions opts)
TGPoint()訊息內容 + = TGInfoWindow()
var info = new TGOS.TGInfoWindow(“ 訊息內容” , new TGOS.TGPoint(x,y));info.open(pMap);
47
2. 訊息視窗 - 建立視窗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);
• 滑鼠事件（ click 、 rightclick 、 mouseover...... ）• 地圖內容改變事件（邊界改變、地圖類型改變 ...... ）• 訊息視窗改變事件（關閉訊息視窗、位置改變 ...... ）• 標記點事件（位置改變、圖示改變、標題改變 ...... ）• ......
• 加入監聽器的方式 ---TGOS.TGEvent.addListener(object instance, string eventName, Function handler)
48
2. 訊息視窗 - 事件監聽
監聽對象
事件名稱 執行函式
48
49
2. 訊息視窗 - 事件監聽//監聽標記點滑鼠 click 事件 , 配合開啟訊息視窗TGOS.TGEvent.addListener(pTGMarker, "click", function (pTGMarker, messageBox) { return function () {
messageBox.open(pMap, pTGMarker); }} (pTGMarker, messageBox));
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>'
• 改變監聽事件//監聽標記點滑鼠mouseout 事件 , 配合關閉訊息視窗TGOS.TGEvent.addListener(pTGMarker, “mouseout", function (pTGMarker, messageBox) { return function () {
messageBox.close(pMap, pTGMarker); }} (pTGMarker, messageBox));
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); // 設定要套疊影像的地圖
53
3. 外部圖資套疊 - 影像疊加層// 地圖縮放至影像套疊範圍pMap.fitBounds(IMGOverlay.getBounds());
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
});
55
3. 外部圖資套疊 -WMS 圖層• WMS 圖層物件 --- TGWmsLayer()
WMSLayer = new TGOS.TGWmsLayer(document.getElementById("wms_url").value, {
// 建立 WMS 物件 , 加入 WMS連結 , 並指定相關屬性map: pMap,preserveViewport: true,wsVisible: true
});
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);
57
3. 外部圖資套疊 -WMTS 圖層• Info 參數可以使用 WMTS 服務的 GetCapabilities 方法取得。• http://api.tgos.nat.gov.tw/TGOS_WMTS/TWD97/
SimpleWMTS_LANDUSE3826.aspx??SERVICE=WMTS&REQUEST=GetCapabilities&VERSION=1.0.0
58
3. 外部圖資套疊 -GeoJSON 圖層• GeoJSON 資料結構 ---TGData ()• 使用符號標記資料— TGSymbol()
• sFORWARD_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 六芒星形
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,{idPropertyName:"GEOJSON"},function(graphic){
GeoJSONLayer.setMap(pMap); // 設定呈現幾何圖層物件的地圖物});
60
練習四• 將影像疊加圖層的連結改為
http://www.digital.ntu.edu.tw/images/NTU-Campus-Map2.jpg
自行設定適合的邊界坐標，進行影像疊加圖層套疊• TGSymbol 支援 SVG 圖示，請開啟 sample3.js ，拿掉 //
• 調整 GeoJSON 的符號樣式
var pTGSymbo = new TGOS.TGSymbol(); // 建立標記圖示物件pTGSymbo.symbolStyle = 'M -2,0 0,-2 2,0 0,2 z'; // 設定標記圖示SVG格式樣式
• 定位服務• 坐標定位• 地址定位• 地標關鍵字定位• 道路定位• 行政區定位 • 里程定位• 坐標查詢最近鄰地址• 使用定位服務 ---
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)
var locator = new TGOS.TGLocateService();
例：臺北市松江路 469巷 4 號
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); } );}
64
4. 定位功能 - 行政區定位• 宣告使用定位服務• 定位參數 : district• 回傳結果為 97 坐標並用繪出行政區範圍
• locateTWD97• TGOS.TGFill
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); } );}
66
4. 定位功能 - 地標定位• 宣告使用定位服務• 定位參數 : poi• 回傳結果為 97 坐標並用標記點標示定位位置
• locateTWD97• TGOS.TGMarker
var locator = new TGOS.TGLocateService();
例：新北市政府
67
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); } );}
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))
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 // 第二條道路所在縣市。}
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
練習五• 請於開發示範網站上使用定位功能• 請輸入欲定位的地址、地標或是行政區
72
5. 熱區圖• TGHeatmapLayer
• 請利用 TGOS 圖台上的「資料展點」• 切換至「點位資料」• 上傳附件的「資料點 .csv 」
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);}return data;
}
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~
top related