地標分類圖層套疊
地標分類圖層套疊
TGOS擁有相當豐富的在地化資料，其中地標資料由國土測繪中心所提供，資料範圍包含全台灣，並加以分類。由於地標在空間判斷與分析上，是相當重要的參考資訊，地圖應用時也是使用者經常查詢、想要知道其屬性的資料，因此TGOS 3D API也將地標資訊發布至前端，讓使用者可以取得地標的詳細屬性資料，甚至可以變更地標的圖示樣式。
地標圖層藉由TGOS.TEPoiLayer ()物件開啟，並設定要套疊的地標類別，顯示畫面範圍內的地標。
API建置步驟
1. 初始化圖台
function InitWnd() {
var pOMap = document.getElementById("TGMap");
pMap = new TGOS.TEOnlineMap(pOMap,null,function(){
AddPoiLayer();
TGOS.TEEvent.addListener(pMap, "dragend", function () {
AddPoiLayer();
});
TGOS.TEEvent.addListener(pMap, "zoom_changed", function () {
AddPoiLayer();
});
});
}
2. 取得地標資訊與加入圖層
function AddPoiLayer() { //增加主題地圖的function
if (markers.length > 0) { //假設地圖上已存在查詢後得到的標記點, 則先行移除
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
var Bounds = pMap.getBounds(); //取得目前地圖的邊界值
var req = { //依照目前圖面的邊界來取得主題地圖
map: pMap,
left: Bounds.getLeft(),
right: Bounds.getRight(),
top: Bounds.getTop(),
bottom: Bounds.getBottom()
};
//取得主題地圖, 第一個及第二個參數為服務名稱及服務圖層的代碼, function handler()內的url則是取得伺服器回傳圖片的網址
PoiLayer.getPoiLayer(TGOS.KindInfo.POI991, req, TGOS.TECoordSys.EPSG3857, function (result, status) {
if (status == "OK") { //若查詢產生結果, 則執行以下函式
var attris = result.fieldAttr; //取得圖徵屬性
var pts = result.position; //取得圖徵點位
for (var i = 0; i < pts.length; i++) {
var str = '名稱: ' + attris[i][0] + '<br>地址: ' + attris[i][1] + '<br>電話: ' + attris[i][2];
//建立迴圈後, 以字串方式組合屬性結果, attris[0]為查詢到的第一個圖徵, attris[0][0]為第一個圖徵的第一個屬性, 依此類推
var marker = new TGOS.TEMarker(pMap, pts[i], "", img2); //在迴圈內建立TGMarker物件, 將查詢到的所有主題圖徵繪出
markers.push(marker); //將標記點加入到markers陣列
//-----------------建立訊息視窗--------------------
var InfoWindowOptions = {
maxWidth:350, //訊息視窗的最大寬度
pixelOffset: new TGOS.TESize(0,0), //訊息視窗的位移量(pixel)
zIndex:0 //視窗堆疊順序
};
messageBox = new TGOS.TEInfoWindow(str, pts[i], InfoWindowOptions); //建立訊息視窗
TGOS.TEEvent.addListener(marker, "mouseover", function (pTGMarker, messageBox) {
return function () {
messageBox.open(pMap, marker);
}
} (marker, messageBox));//滑鼠監聽事件--開啟訊息視窗
TGOS.TEEvent.addListener(marker, "mouseout", function (messageBox) {
return function () {
messageBox.close();
}
} (messageBox));
}
}
else
{ //判斷查詢結果是否為查無結果
//alert('此範圍查無結果');
return;
}
});
}
