以符號標記點資料

以符號標記點資料

除了影像檔外,TGOS MAP API也提供了部分基本圖形,可做為標記點的圖示,讓沒有適當圖檔可利用的使用者可以順利的將標記點套疊在圖面上。TGOS MAP API共提供了16種圖示,請參考本頁下方的說明。圖示就如同,可以調整填色顏色、透明度、邊框顏色、透明度及寬度,另外,也提供旋轉角度、高度、寬度的屬性設置,可以客製化出豐富的標記點樣式。

var pTGSymbo = new TGOS.TGSymbol();               //建立幾何物件

pTGSymbo.symbolStyle = TGOS.TGSymbolStyle.TRIANGLE;           //設定標記的符號

pTGSymbo.xPixel = 64;                                        //設定標記寬度

pTGSymbo.yPixel = 64;                                        //設定標記高度

pTGSymbo.fillColor = "#aa2222";                     //設定填入顏色

pTGSymbo.fillOpacity = 0.7;                               //設定透明度

pTGSymbo.strokeWeight = 2;                           //設定框線寬度

pTGSymbo.strokeOpacity = 0.4;                       //設定框線透明度

pTGSymbo.strokeColor = "#000000";              //設定框線顏色

pTGSymbo.anchor.x = 32;                                  //設定錨點x座標

pTGSymbo.anchor.y = 32;                                  //設定錨點y座標

pTGSymbo.rotation = 0;                                      //設定符號旋轉方向

 

pTGMarker = new TGOS.TGMarker(pMap, markerPoint,'',pTGSymbo);  //用幾何圖形建立標記點

pTGMarker.setFlat(true);                                               //設定標記陰影不出現

 

function AddSymbo() {

var pSymbo = new TGOS.TGSymbol();

var rot;

rot = document.getElementById('rotat').value;

pSymbo.rotation = rot;                                        //設定符號旋轉方向

var fcol;

fcol = document.getElementById('fillcol').value;

pSymbo.fillColor = fcol;                                       //設定填入顏色

var fopa;

fopa = document.getElementById('fillopa').value;

pSymbo.fillOpacity = fopa;                                 //設定透明度

var scol;

scol = document.getElementById('strokecol').value;

pSymbo.strokeColor = scol;                               //設定框線顏色

var sopa;

sopa = document.getElementById('strokeopa').value;

pSymbo.strokeOpacity = sopa;                         //設定框線透明度

var swt;

swt = document.getElementById('strokwght').value;

pSymbo.strokeWeight = swt;                             //設定框線寬度

var stl;

stl = document.getElementById('symbol').value;                 //設定標記的符號

var syb;

switch(stl) {

case "FORWARD_CLOSED_ARROW":

syb = TGOS.TGSymbolStyle.FORWARD_CLOSED_ARROW;

break;

case "DOUBLE_CIRCLE":

syb = TGOS.TGSymbolStyle.DOUBLE_CIRCLE;

break;

case "TRIANGLE":

syb = TGOS.TGSymbolStyle.TRIANGLE;

break;

case "PENTAGON":

syb = TGOS.TGSymbolStyle.PENTAGON;

break;

case "OCTAGON":

syb = TGOS.TGSymbolStyle.OCTAGON;

break;

default:

syb = TGOS.TGSymbolStyle.HEXASTAR;

}

pSymbo.symbolStyle = syb;

pSymbo.xPixel = 64;

pSymbo.yPixel = 64;

pSymbo.anchor.x = 32;

pSymbo.anchor.y = 32;

 

pTGMarker.setIcon(pSymbo);

}

可供選擇的圖案樣式如下所列:

封閉箭頭符號:FORWARD_CLOSED_ARROW

開放箭頭符號:FORWARD_OPEN_ARROW

反向封閉箭頭符號:BACKWARD_CLOSED_ARROW

反向開放箭頭符號:BACKWARD_OPEN_ARROW

圓形:CIRCLE

雙同心圓:DOUBLE_CIRCLE

三同心圓:TRIPLE_CIRCLE

圓內一點:CIRCLE_SPOT

正三角形:TRIANGLE

倒三角形:INVERT_TRIANGLE

四方形:SQUARE

五角形:PENTAGON

六角形:HEXAGON

八角形:OCTAGON

五芒星形:PENTASTAR

六芒星形:HEXASTAR

回到上方