客製化地圖元件

使用者可自行建立元件，並將元件放置在地圖上，此外，元件也支援API功能，使用者便可使用具有API功能的元件來對地圖進行更多的操作。以下以設定地圖中心點為範例進行展示。

//客制化控制項

function CenterControl(controlDiv, map) {

//設定中心點座標

var lonlatCenter = new TGOS.TGPoint(120.5, 23.5);

//建立控制項UI

var controlUI = document.createElement('div');

//取得座標系統

var mSRS = map.getCoordSys();

//設定控制項UI樣式(style):

//設定class

controlUI.setAttribute("class", "customControl");

//設定背景顏色

controlUI.style.backgroundColor = '#fff';

//設定邊框粗細風格

controlUI.style.border = '2px solid #fff';

//設定圓角風格

controlUI.style.borderRadius = '3px';

//設定陰影

controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';

//設定滑鼠游標樣式

controlUI.style.cursor = 'pointer';

//設定下邊界

controlUI.style.marginBottom = '22px';

//設定文字置中

controlUI.style.textAlign = 'center';

//設定div Title

controlUI.title = '按下設定中心點';

//將DIV 物件加入圖面

controlDiv.appendChild(controlUI);

//建立控制項UI內容

var controlText = document.createElement('div');

//文字顏色

controlText.style.color = 'rgb(25,25,25)';

//文字字型

controlText.style.fontFamily = 'Roboto,Arial,sans-serif';

//文字大小

controlText.style.fontSize = '16px';

//行高

controlText.style.lineHeight = '38px';

controlText.style.paddingLeft = '5px';

controlText.style.paddingRight = '5px';

//設定顯示文字

controlText.innerHTML = '設定中心點';

//設定控制項UI內容點擊事件

controlUI.addEventListener('click', function () {

var realCenter;

//判斷是否座標轉換

if (mSRS == TGOS.TGCoordSys.EPSG3826) {

var xy = TGOS.WGS84toTWD97(lonlatCenter.x, lonlatCenter.y);

realCenter = new TGOS.TGPoint(xy.x, xy.y);

}

else if (mSRS == TGOS.TGCoordSys.EPSG3825) {

var xy = TGOS.WGS84toTWD67(lonlatCenter.x, lonlatCenter.y);

realCenter = new TGOS.TGPoint(xy.x, xy.y);

}

else

realCenter = lonlatCenter;

map.setCenter(realCenter);

});

//將控制項內容加至UI控制項內

controlUI.appendChild(controlText);

}