主題地圖

主題地圖

為因應防救災、便利民眾獲得資訊，API也提供多項主題資料以地圖方式呈現於圖台上。使用者可以開關這些資訊的顯示與否，且API也提供部分資訊的查詢服務。

每一項主題地圖都以專案檔發布服務，並給予服務代碼(TGMapServiceId)，而服務中會由一個或多個服務圖層組成；為區隔每個服務圖層，也給予服務圖層代碼(TGMapId)。在取得主題地圖資料時，必須同時給定服務代碼及服務圖層代碼，才能正確地加入指定的圖層資料，並呈現出來。

傳回的主題地圖為一底色透明、含有圖徵的圖片影像檔，在範例中可直接檢視單一主題圖(避難收容處所)的呈現效果。要將影像檔案套疊到圖台上，需使用API中TGGroundOverlay 套疊圖片影像檔的方法。

主題地圖圖例與主題地圖則是兩個不同的物件，可選擇是否顯示，內容包含標題、圖例圖片與圖例名稱。

var ThemeLayer = null;

function AddThemeLayer() {

ThemeLayer = new TGOS.TGThemeLayer();  //宣告一個新的主題地圖物件                       

var req = {

      left: 176488,                     //設定需要的主題地圖邊界值

      right: 176911,

      top: 2502663,

      bottom: 2502981,

      height: 480,                     //設定取出主題圖的寬度、高度大小

      width: 640

};

ThemeLayer.getThemePic(TGOS.TGMapServiceId.SHELTERS, TGOS.TGMapId.SHELTERS, req, function(url,status, legend) {

//取得主題地圖, 第一個及第二個參數為服務名稱及服務圖層的代碼, 第三個參數為查詢範圍

//function(url)內的url則是取得伺服器回傳圖片的網址

      var str = '<input type="image" src="' + url + '">';    //取出回傳主題圖的網址後, 組合成html語法的字串並成為一個圖片物件

      var EmptyDiv = document.getElementById("EmptyDiv");               //透過id取得網頁上的空白DIV

      EmptyDiv.innerHTML = str;                                                                      //將組合後的html字串餵入空白DIV, 顯示主題地圖的影像

      var LegendBoxDiv = document.getElementById("divLgdBox");    //取得圖例框架

      var str1 = "";                                                                                                //欲顯示之圖例

      for(var i=0; i < legend.length; i++) {

              str1 += '<input type="image" src="' + legend[i].iconUrl + '"width="24" height="24">' + legend[i].symbolName + '<br>';

              //legend[i].iconUrl：圖例來源

              //legend[i].symbolName：圖例名稱

      }

      LegendBoxDiv.innerHTML = '主題地圖圖例<br>' + str1;

});                  

}

function showlgdWindow() {

var LegendBoxDiv = document.getElementById("divLgdBox");            //取得圖例框架

var lgdWindow = document.getElementById('LegendBox');                         

if(lgdWindow.checked) {                                                                           //設定是否顯示圖例

LegendBoxDiv.style.display = "";

} else  {

      LegendBoxDiv.style.display = "none";

}

}

以下為提供的主題地圖服務、圖層代碼：