自訂幾何選取範圍

自訂幾何選取範圍

 

本範例示範如何搭配TGOS MAP API直接手繪繪製矩形圖徵，進而對於統計資料進行空間篩選功
能，並搭配統計地圖之面量圖進行繪製，您可以直接將本範例複製至您的網站伺服器，再修改使
用統計資料項目或統計地圖/圖表類型即可快速建立一個頁面。

 

版型設定部分：

所有進階範例的版型皆以CSS文件(sample.css)進行設定，其詳細說明可參考進階範例「自應用
資料庫繪製地圖及圖表」中的「使用資料服務平台統計資料」。使用者可透過修改此檔案來更改
範例版型中各個區塊的樣式設定。

 

程式設計部分：

為了能在網頁中使用TGOS MAP API之服務，  使用者需在開始建立網頁使用之前，設定引用
TGOS服務的權限，申請流程可參考TGOS MAP API範例網站之「申請說明」。當申請通過後，
會得到一組APPID與APIKey授權碼。請將字串中的將YourID 及YourKey置換為申請取得的授
權碼，即可完成引用權限的設定。

 

<script type="text/javascript"src="http://api.tgos.nat.gov.tw/TGOS_API/tgos?ver=2&
AppID=yourID&APIKey=yourKey" charset="utf-8"></script>

 

引用完成TGOS MAP API之權限設定後，使用者需在網頁中宣告TGOnlineMap()物件，並設置
繪圖管理器，選擇繪製類型為矩形，將繪出之矩形邊框範圍匯入之後的繪圖參數設定中。

 

tgosMap = newTGOS.TGOnlineMap(document.getElementById("mapView"),
                        TGOS.TGCoordSys.EPSG3826);                     //宣告TGOnlineMap地圖物件並設定坐標系統

tgosMap.setCenter(new Point(327096.51, 2730926.05));

tgosMap.setZoom(8);

 

var dm = new TGOS.TGDrawing();    

dm.setOptions({

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

             drawingControlOptions: {

                        position: TGOS.TGControlPosition.BOTTOM_RIGHT,

                        drawingModes: [TGOS.TGOverlayType.ENVELOPE]

             },           

               envelopeOptions: {                      //設定繪製矩形的樣式

                           fillColor: "#EE6363",

                           fillOpacity: 0.2,

                           strokeWeight: 3,

                           strokeColor: "#1E90FF",

                           strokeOpacity: 0.4

               }

           });

           dm.setMap(tgosMap);

 

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

                       if (tmpTGFill == null)

                           tmpTGFill = e.overlay;

                       else {

                           tmpTGFill.setMap(null);

                            tmpTGFill = e.overlay;

                        }

                       document.getElementById("pLeft").value = tmpTGFill.getBounds().left;

                     document.getElementById("pTop").value = tmpTGFill.getBounds().top;

                     document.getElementById("pRight").value = tmpTGFill.getBounds().right;

                     document.getElementById("pBottom").value = tmpTGFill.getBounds().bottom;

    });              //取得目前地圖展示之邊框範圍

 

當網頁使用者點擊「繪製統計地圖」按鈕時，程式端即進入function drawStatMap( )內進行一
系列的動作，包含從網頁介面取得各種資料設定、繪圖參數設定等等，再將所有設定套入統計地
圖物件設定內容後進行統計地圖繪製作業，最後將互動式介面輸出至網頁的展示區域內，並寫出
所需的統計資訊。

 

function drawStatMap() {                            //統計圖繪製

                     setStatData(myMap.getStatData());              //設定統計資料

var mapOpts = myMap.getMapOptions();             //取得統計地圖參數設定

mapOpts.pChoropleth.classifyMethod = document.getElementById("pClassify").value;

//重新設定分級方式

mapOpts.pChoropleth.classes = parseInt(document.getElementById("pClassesCount").value);

//重新設定分級數

if (document.getElementById("pClassify").value == ClassifyMethod.USER_DEFINED) {

                                if(document.getElementById("pClassesCount_Self").value == "") {

                                     alert("自訂區間必須填入值");

                                     return;

                              } else {

                                     mapOpts.pChoropleth.userLevels = document.getElementById 
                                           ("pClassesCount_Self").value.split(",");

                             }

}

                     mapOpts.pChoropleth.statTime = document.getElementById("sTime").value;

                     mapOpts.pChoropleth.color = {                                      //重新設定面量圖配色

                                maxColor: document.getElementById("maxColor").value,

                              minColor: document.getElementById("minColor").value,

                              defaultColor: document.getElementById("defaultColor").value

};

                     myMap.drawMap(function (result) {                 //繪製統計地圖

                                if (result.status === ServiceStatus.OK)

                                     putInfomation(result);                          //寫出統計資訊及圖例資訊

                     });

           }                      

           function setStatData(dataObj) {                      //重新設定統計資料

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

                    dataObj.option.timeOpts.time = [time];                     //取得統計時間設定

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

                    dataObj.select.spatialOpts = null;

                    dataObj.select.spatialOpts = {

                         envelope: {

                                left: parseFloat(document.getElementById("pLeft").value),

                                top: parseFloat(document.getElementById("pTop").value),

                                right: parseFloat(document.getElementById("pRight").value),

                                bottom: parseFloat(document.getElementById("pBottom").value)

                         }

                     }               

           }