建立地圖控制DIV物件

API使用範例：建立地圖控制DIV物件

情境假設：

使用者可自行建立支援API功能之客製化控制項並放置在地圖畫面上任意位置，來對地圖進行更多的操作。使用者自行建立地圖中心點以及設定地圖層級等客製化控制項。

TGOS MAP API建置方式：

1. 初始化地圖：
首先宣告一個TGOnlineMap( )物件，在網頁上建立一個地圖，並選擇座標系統。
var mapDiv, map;

var coordSys = TGOS.TGCoordSys.EPSG3826;
function onload() {

mapDiv = document.getElementById("mapDiv");

map = new TGOS.TGOnlineMap(mapDiv, coordSys);

}

2. 建立與設定DIV物件

2.1 建立地圖控制DIV物件

建立圖台後，新增二項DIV物件至地圖畫面，並指定擺放位置。

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

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

var centerControl = newCenterControl(centerControlDiv, map);

var zoomControl = newZoomControl(ZoomControlDiv, map);

//設定網頁顯示層級

centerControlDiv.index = 1;

zoomControl.index = 1;

//將控制項放到TOP_CENTER

map.controls[TGOS.TGControlPosition.TOP_CENTER].push(centerControlDiv);

//將控制項放到Bottom_CENTER

map.controls[TGOS.TGControlPosition.BOTTOM_CENTER].push(ZoomControlDiv);

2.2 設置中心點

透過設定中心點功能，使用者可指定某一座標作為其中心點，並使用DIV物件進行控制。

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);