環域選取範圍

環域選取範圍

在本範例中，我們將使用環域的方式來進行統計資料篩選，再使用篩選出的統計資料來繪製統計
地圖。

環域範圍定義：

統計地圖API支援的環域方式包含點環域、線環域以及面環域三種類型。無論使用何種環域類
型，皆需要設定兩項參數：環域中心幾何圖形及半徑。環域中心幾何圖形需要使用WKT字串定
義，如下面範例所示：

點：POINT(294764 2784543)

折線：LINESTRING(294764 2784543, 295558 2783882, 295677 2783604)

面：POLYGON(294764 2784543, 295558 2783882, 295677 2783604, 294764 2784543)

以幾何中心搭配單位為公尺的半徑進行設定，即可定義一個環域範圍。如setStatData ()函式所
示：

function setStatData(dataObj) {

     var time = document.getElementById("sTime").value;

     dataObj.option.timeOpts.time = [time];

     dataObj.dataSet[0].fieldsId = getMultiOpts(document.getElementById("sField"));

     var ptList = document.getElementById("pWKT").value.split("@");      //取得環域中心幾何WKT字串

     var pts = [];  //建立空陣列

     for (var i = 0; i < ptList.length; i++) {

          pts.push(ptList[i]);  //將環域中心幾何WKT字串匯入陣列中

     }

     dataObj.select.bufferOpts = null;

     dataObj.select.bufferOpts = {

          wkts: pts,          //設定環域幾何中心

          radius: parseFloat(document.getElementById("radius").value)      //設定環域半徑

     }

}

設定環域中心圖形：

本範例是以TGOS MAP API所提供的線段繪製工具，將使用者自行手會得到的線段轉換成WKT
字串後，再將該字串作為統計地圖API的環域中心幾何圖形使用。首先要先建立TGOS的繪圖管
理器，並指定繪圖樣式為線段。

var dm = new TGOS.TGDrawing();        //宣告繪圖管理器物件

dm.setOptions({

     drawingControl: true,  //顯示繪圖管理器

     drawingControlOptions: {

          position: TGOS.TGControlPosition.BOTTOM_RIGHT,

          drawingModes: [TGOS.TGOverlayType.LINESTRING]      //啟用線段繪圖方式

     },

     polylineOptions: {               //設定線段顯示樣式

          strokeWeight: 3,

          strokeColor: '#00aaaa',

          strokeOpacity: 0.7

     }

});

dm.setMap(tgosMap);    //建立繪圖管理器

接著於TGOS MAP介面上建立一事件監聽器，監聽線段繪製完成的事件，並在線段繪製完成時
執行下列程式碼，將線段的幾何特徵寫為WKT格式，供後續統計地圖API設定環域範圍時使
用。

TGOS.TGEvent.addListener(dm, "linestring_complete",function (e) {

     if (tmpTGLine == null)

          tmpTGLine = e.overlay;

     else {

          tmpTGLine.setMap(null);

          tmpTGLine = e.overlay;

     }

     var lineStr = "LINESTRING ("

     for (var i = 0; i < tmpTGLine.getPath().path.length; i++) {

          lineStr += tmpTGLine.getPath().path[i].x + " " + tmpTGLine.getPath().path[i].y;

          if (i < (tmpTGLine.getPath().path.length - 1))

               lineStr += ",";

     }

     lineStr += ")";

     document.getElementById("pWKT").value = lineStr;

});