繪圖管理器製作GeoJSON空間資料簡易工具

API使用範例：繪圖管理器製作GeoJSON空間資料簡易工具

情境假設：

　　本範例示範如何利用TGOS MAP API所提供的元件方法來建立出繪圖管理器，讓使用者能透過簡易的工具繪製出點、線、面圖徵及設定基本的屬性內容，並產製出相對應的GeoJSON空間資料提供交換使用。

TGOS MAP API建置方式：

1.以TGOS.TGOnlineMap()方法建立初始化地圖圖台介面，並透過TGOS.TGDrawing()方法建立圖形繪製操作工具。

    function InitWnd() {

                var pOMap = document.getElementById("OMap");

                pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826);

          pDrawingManager = new TGOS.TGDrawing();

          pDrawingManager.setMap(pMap);    

        }

2.為了讓使用者得以針對各個繪製出的圖徵進行屬性編輯，因此透過TGOS.TGEvent的addListener()方法建立一個監聽事件來偵測點擊這個事件，當於圖台上點擊已存在的繪圖後，顯示出可輸入圖徵屬性的輸入元素及更新函式。

                var cnt = 0;

                TGOS.TGEvent.addListener(pDrawingManager, 'overlay_complete', function (e) {

                 TGOS.TGEvent.addListener(e.overlay, 'click', function () {

                                        document.getElementById("pro").style.display = "";

                                        document.getElementById("res").innerHTML = "";

                                          document.getElementById("f_input").innerHTML = "";

                                        createElem("屬性名稱");

                                        createElem("屬性內容");

                      var btn_cjson = document.createElement("button");

                      var bt = document.createTextNode("送出");

                       btn_cjson.appendChild(bt);

                      btn_cjson.id = "btn_cjson" + cnt;

                      btn_cjson.type = "button";       

                      document.getElementById("f_input").appendChild(btn_cjson);

                      btn_cjson.onclick  = function () {

                        var jsonresult = getProtoJson(document.getElementById("f_input"));

                        pDrawingManager.setGeoJsonProperties(e.overlay, jsonresult); //選取到的圖形設定JSON屬性

                        getGraphicsGeoJson();

                        return false;

                                        };

            });

            pDrawingManager.setDrawingMode(TGOS.TGOverlayType.NONE); //取消所有模式

            document.getElementById("pro").style.display = "none";

//建立出圖徵GeoJSON屬性的設定

　　function createElem(lname)

        {

                var cid = guid();

                var newDiv1 = document.createElement("input");

                newDiv1.id = cid;

                newDiv1.type = "textbox";

                document.getElementById("f_input").appendChild(newDiv1);            

                var x = document.createElement("LABEL");

                var t = document.createTextNode(lname);

                x.setAttribute("for", cid);

                x.appendChild(t);

                document.getElementById("f_input").insertBefore(x,document.getElementById(cid));

        }

        function guid() {

          function s4() {

                return Math.floor((1 + Math.random()) * 0x10000)

                  .toString(16)

                  .substring(1);

          }

          return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();

        }

//產生GeoJSON內容的方法

      function getProtoJson(f){

    　    var obj = {};

                var elements = f.querySelectorAll("input");

                console.log(elements);

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

                        if(i % 2 == 0)

                        {

                                var element1 = elements[i];

                                var element2 = elements[i + 1];

                                var name = element1.value;

                                var value = element2.value;

                                if( name ) {

                                        obj[ name ] = value;

                                }

                        }

                }

        　　　return JSON.stringify( obj );

    }

3.建立清除圖面上所有已繪製的資料，可透過clearAllGraphics()的方法來達到這個效果，並一併將目前窗格中羅列出的GeoJson內容清除，最後再將該函式與前端按鈕元素相連結以產生操作功能。

    function clearAllGraphics() {

        pDrawingManager.clearAllGraphics(); //清除所有繪圖

                document.getElementById("f_input").innerHTML = "";

                document.getElementById("res").innerHTML ="";

    };

4.可透過getGeoJson()方法來取得目前pDrawingManager物件中的所有以描繪完的圖徵資料GeoJson內容，並將該函式與前端按鈕元素相連結以產生操作功能。

    function getGraphicsGeoJson() {   

        var str1 = pDrawingManager.getGeoJson("<br />");  //取得所有JSON，預設會以 \r\n 做為換行字元

        document.getElementById("res").innerHTML = str1;

    };