主題資料檢索
API使用範例：主題資料檢索
情境假設：
此範例以下拉式選單的方式，讓使用者可以逐層級篩選欲查詢的行政區範圍，並配合自訂的關鍵字來查詢符合條件的主題圖資。之後建立清單與查詢結果進行互動式瀏覽。
TGOS MAP API建置方式：
1. 建立雙層下拉式選單
本範例首先使用雙層連動式的下拉選單，來讓使用者選擇欲查詢的直轄市，以及該直轄市內的次級行政區。雙層連動式的下拉選單的建立方式有相當多種，也可以配合資料庫進行資料篩選。本範例提供的建立方式為事先建立一份次級行政區清單，當第一層下拉選單動作時，即取出第一層選單的選取結果，並透過清單比對的方式即時透過清單來建立第二層的選單。
首先先在網頁上建立兩個下拉選單物件，並指定第一個選單的內容，以及該選單變動時所執行的函式「CityList」，然後將選單所選到的項目名稱帶入該函式；第二個選單則暫時只存入一個選項「全選」。除了兩個下拉選單之外，也一併在此建立關鍵字的輸入框（ID為「keyword」）以及執行查詢動作的按鈕（按下後執行函式「AttriQuery()」）---
<form name="CodeForm">
<select id="CityName" name=type size=1onChange="CityList(this.options
[this.options.selectedIndex].value);">
<option value="0">請選擇...</option>
<option value="1">臺北市</option>
<option value="2">新北市</option>
<option value="3">臺中市</option>
<option value="4">臺南市</option>
<option value="5">高雄市</option>
</select>
<select id="DistName" name=subtypesize=1>
<option value="0">全選</option>
</select>
關鍵字：<input type="text" id="keyword"size=5/>
<input type="button" value="查詢"onclick="AttriQuery();"/>
</form>
第一層選單經過選取後所執行的函式「CityList」，我們寫在另一支獨立的Javascript檔案內（city.js），該檔案包含了第二級行政區的所有清單項目，並針對代入該函式的直轄市名稱來篩選建立第二層下拉選單的選項。
2. 屬性查詢
2.1 建立屬性查詢函式：
在使用者透過雙層下拉選單及關鍵字輸入框來指定行政區及關鍵字之後，我們就可以依照這些條件來執行屬性查詢。首先我們先來取得下拉選單中的行政區名稱。
var city = document.getElementById("CityName"); //取得直轄市下拉選單物件
var dist = document.getElementById("DistName"); //取得行政區下拉選單物件
var CN = city.options[city.selectedIndex].text; //取得使用者選取的直轄市名稱
var DN = dist.options[dist.selectedIndex].text; //取得使用者選取的行政區名稱
var KW = document.getElementById("keyword").value; //取得使用者輸入的關鍵字
接著利用這三項資訊來設定屬性查詢所需使用的參數---
var queryRequst = { //設定屬性查詢參數
county: CN,
town: DN,
keyword: KW
};
接下來即可進行查詢，範例中事先以經在函式外建立好一個屬性查詢服務物件---
var Query = new TGOS.TGAttriQuery(); //建立TGAttriQuery物件, 準備執行屬性查詢使用
所以在這邊只需要使用方法「identify」即可執行屬性查詢的動作。此方法的第一項及第二項參數分別必須輸入欲查詢的地圖服務代碼及地圖圖層代碼，本範例所查詢的主題圖層為「全國警察局」，因此在這兩項參數內就必須分別填入「TGOS.TGMapServiceId.POLICEDEPARTMENT」和「TGOS.TGMapId.POLICEDEPARTMENT」。
方法「identify」內的第三項參數為屬性查詢的條件參數，也就是先前我們所建立的參數「queryRequst」；第四項參數為坐標系統設定；第五項參數為屬性查詢後所回傳的函式，回傳函式內包含了查詢結果「result」和查詢狀態「status」。
Query.identify(TGOS.TGMapServiceId.POLICEDEPARTMENT, TGOS.TGMapId.
POLICEDEPARTMENT, queryRequst, TGOS.TGCoordSys.EPSG3826, function(result,
status){
2.2 展示查詢結果：
假設屬性查詢是成功的，我們就可以透過回傳函式內的參數「result」來取出查詢結果。其中又可透過「result」的屬性「position」及「fieldAttr」來分別取出查詢結果的坐標點位及屬性資料，這兩項屬性皆為陣列性質，以便於存放多筆查詢結果使用。
var locations = result.position; //取得圖徵坐標陣列
var attris = result.fieldAttr; //取得圖徵屬性陣列
有了點位及屬性資料，我們就可以用標記點的方式在地圖上表示這些查詢結果。首先建立一個迴圈，迴圈大小設定為查詢結果陣列的長度，在迴圈內利用建立「TGMarker( )」物件的方式來加入標記點，其中各個標記點的標題我們使用屬性資料中的第一筆資訊（警察局名稱）來進行設定，之後將所有標記點存入陣列「markers」中備用。
for (var i = 0; i < locations.length; i++) {
var marker = new TGOS.TGMarker(pMap, locations[i], attris[i][0], img);
//將查詢結果作成標記點顯示在圖面上
markers.push(marker);
另外為了後續的需求，在迴圈內我們也個別取出每一筆查詢結果的第四項屬性（警局電話）及第五項屬性（警局地址），分別存放在不同的陣列中備用。
var phone = attris[i][3]; //取得標記點的電話號碼並存入陣列
PhoneNums.push(phone);
var add = attris[i][4]; //取得標記點的地址並存入陣列
Adds.push(add);
最後我們在網頁的右側的清單內將查詢後得到的警局名稱條列出來。在迴圈外先取得網頁右側的查詢結果清單物件，再於迴圈內將警局名稱逐一加入清單內。
//----迴圈外----
var list = document.getElementById("ResultList"); //取得右側查詢結果清單物件
//----迴圈內---
list.options[i] =new Option(attris[i][0],"");
//將查詢後的單位名稱寫入網頁右側的結果清單內
3. 建立標記點ßà結果清單連動規則
3.1 建立標記點à結果清單連動規則：
接下來的範例中，我們將示範如何在使用者點擊圖面上的標記點的同時，讓右側查詢結果清單內的對應項目呈現被選取（反白）的狀態。第一步先於繪製查詢結果的迴圈內建立一個滑鼠點擊事件監聽器，並將事件監聽器綁定在標記點物件上，使得透過迴圈所建立的每一個標記點都具有獨立的滑鼠點擊事件監聽物件。
在這裡使用「TGOS.TGEvent.addListener」來建立事件監聽器，其中的第一項參數為設定被監聽的對象物件；第二項參數為指定事件，在這裡設定為滑鼠的點擊事件（click）；第三項參數為指定對象發生事件時所要執行的函式，後續的動作及程式都會在此函式內進行運作。
TGOS.TGEvent.addListener(marker, "click",function (event) {
事件發生後，我們可以透過函式內的參數「event」來取得事件相關的參數，其中的「target」屬性則可以取得該事件發生時監聽器所綁定的物件，也就是標記點本身。利用這個屬性我們即可取得被點擊的標記點名稱。
var MarkerTitle = event.target.getTitle();
取得被點擊的標記點名稱之後，我們利用迴圈來取得網頁右側查詢結果清單內的所有項目，來和標記點名稱進行比對。當比對成功之後，就將該項目反白，達到標記點點擊與右側結果清單同步的目的。
for (var j = 0; j < list.options.length; j++) {
//使用迴圈比對被點擊的標記點的標題名稱與右側列表的所有點位名稱
if (list.options[j].text == MarkerTitle) { //若比對一致, 則反白右側選單內的該項目
list.options[j].selected = true;
除了和右側清單進行同步比對之外，範例中另外增加了一個訊息視窗，展示被點擊的標記點資訊，其中包含了先前我們另外存到陣列內的電話及地址資訊。
//-----------------------開啟訊息視窗-----------------------
var infoOptions = {
position: event.target.getPosition(),
maxWidth: 250,
pixelOffset: new TGOS.TGSize(5, -30)
};
infoWindow.setOptions(infoOptions);
infoWindow.setContent(MarkerTitle + '<br>電話: '+ PhoneNums[j] + '<br>地址: '
+ Adds[j]);
infoWindow.open(pMap);
break;
3.2 建立結果清單à標記點連動規則：
除了建立標記點點擊至結果清單反白的連動規則之外，範例中也建立了反向的連動事件。也就是當使用者從結果清單中選取其中一個項目的同時，圖面上也會同步將圖面移至對應的標記點，同時將訊息視窗開啟。
首先我們必須在初始的網頁設計中，在建立右側結果清單物件的同時就先指定清單內的項目被選取時的執行函式（onchange="Select();"）---
<select id="ResultList" size="15"style="position:absolute; height:480px; width:180px;
top:0px; left:645px;"onchange="Select();"></select>
接著設計函式「Select( )」內執行的動作。第一步先取得使用者選取的項目文字內容---
var list = document.getElementById("ResultList"); //取得右側查詢結果清單物件
var SelectText = list.options[list.selectedIndex].text; //取得選取項目的文字字串
取得文字內容後，建立一個迴圈來讀取標記點陣列中的所有標記點物件（TGMarker），再逐條比對每個標記點的標題以及結果清單內被選取的選項名稱，當兩者相同時就取得該標記點的位置並進行地圖平移縮放，將畫面以該標記點為中心進行即時切換。
for (i = 0; i < markers.length; i++) {
if (markers[i].getTitle() == SelectText) { //以選取的文字和每個標記點的title做比對
pMap.setCenter(markers[i].getPosition());
//若文字一致則以該標記點進行地圖平移縮放
pMap.setZoom(13);
最後同樣取得該標記點的電話地址資訊，使用訊息視窗進行展示---
//-----------------------開啟訊息視窗-----------------------
var infoOptions = {
position: markers[i].getPosition(),
maxWidth: 250,
pixelOffset: new TGOS.TGSize(5, -30)
};
infoWindow.setOptions(infoOptions);
infoWindow.setContent(markers[i].getTitle() + '<br>電話: ' + PhoneNums[i]
+ '<br>地址: ' + Adds[i]);
infoWindow.open(pMap);
break;
