TGOS MAP API 推廣應用工作坊 初級班3
0 likes717 views
该文档介绍了tgos地图API的推广应用，包括申请流程、初始化地图设置、几何图层对象的叠加以及复合式定位。用户可以使用tgos map api-lite的一部分功能，无需申请，并通过示例代码学习如何标记单点或多点的位置。文档详细讲解了如何通过JSON格式的geojson处理地理信息，并提供了相关的示例链接和代码。
![申請流程
• 進入系統[服務申請紀錄]
22](https://image.slidesharecdn.com/powerpoint3-160704013145/85/TGOS-MAP-API-3-22-320.jpg)
![複合式定位
• 建立定位請求
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](https://image.slidesharecdn.com/powerpoint3-160704013145/85/TGOS-MAP-API-3-47-320.jpg)
TGOS MAP API 推廣應用工作坊 初級班3
- 1. TGOS TGOS Maps 「 105年度地理資訊圖資雲服務平台推廣、 營運及功能增修作業」委外服務案 TGOS MAP API推廣應用工作坊-初級班 如何運用TGOS MAP API 主辦單位:內政部資訊中心 承辦單位:財團法人空間及環境科技文教基金會 105年7月
- 4. 申請流程 4
- 7. 申請流程 7
- 11. 申請流程 • 申請單資訊 11
- 12. 申請流程 • 填寫申請用途 12
- 18. 申請流程 • 按下確定申請 18
- 19. 申請流程 19
- 23. 申請流程 • 檢視申請單 23
- 24. 申請流程 • 取得服務網址 24
- 28. 使用TGOS MAP API-Lite • 不需申請就可使用部分功能: • 例如地圖初始化設定、單(多)點標記、訊息視窗、 地圖事件等等。 28
- 29. 使用TGOS MAP API-Lite • 單點標記 29
- 30. 使用TGOS MAP API-Lite 情境1：建立一個地圖，並定位到自己設定的位置 範例網站：單點標記 1.開啟記事本貼上範例程式碼 2.修改要顯示的文字與坐標 （查詢坐標） 3.另存成htm檔，編碼使用UTF-8 4.看成果:1_MAP_API推廣版_單點標記.html。 30
- 31. 使用TGOS MAP API-Lite • 多點標記 31
- 32. 使用TGOS MAP API-Lite 情境2：建立一個地圖，並標記多個點 範例網站：多點標記 1.開啟記事本貼上範例程式碼 2.修改要顯示的文字與坐標 （查詢坐標） 3.另存成htm檔，編碼使用UTF-8 4.看成果:2_MAP_API推廣版_多標記點.html。 32
- 36. 初始化地圖設定值 • 範例中調整的項目有： • backgroundColor：地圖背景顏色 • disableDefaultUI：是否關閉使用者控制項 • Scrollwheel：允許使用者對地圖使用滑鼠滾輪 • mapTypeControl：開啟地圖類型控制項 • mapTypeControlOptions：指定地圖類型 • navigationControl：是否開啟縮放控制列 • navigationControlOptions：指定縮放控制列 • scaleControl：是否開啟比例尺控制項 • 看看程式碼：3_初始化地圖設定值.html 36
- 38. 套疊幾何圖層物件-GeoJSON • GeoJSON 是一種專門處理地理資訊 (GIS) 結構的 JSON 標 準格式。 一個 GeoJSON 物件可以用來代表點 (Point)， 線 (LineString)，多邊形 (Polygon) 等等的幾何結構，以及 特徵 (Feature) 的集合， 或是一系列的特徵 (FeatureCollection) 38
- 39. 套疊幾何圖層物件-GeoJSON • 這個範例所使用的json資料 • http://api.tgos.nat.gov.tw/TGOS_API/images/TGOS.json • 範例網站：套疊幾何圖層物件(GeoJSON) 39
- 44. 複合式定位 44
- 45. 複合式定位 • 圖台初始化 function main() { //圖台初始化 mapDiv = document.getElementById("TGMap"); map = new TGOS.TGOnlineMap(mapDiv, coordSys); //準備好定位物件與訊息物件 tgLocate = new TGOS.TGLocate(); info = new TGOS.TGInfoWindow(); } 45
- 46. 複合式定位 • 建立定位請求 //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
- 47. 複合式定位 • 建立定位請求 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