飛行展示高程模擬

API使用範例：飛行展示高程模擬

 

情境假設：

使用者可以利用面資料並賦予高度值，建立起高程模擬立體物件，並且透過飛行路徑的設置，飛行瀏覽所建立起的高程模擬資料。以下將設置五個簡單的高程模擬物件，並使用水平環繞飛行瀏覽進行展示。

 

TGOS MAP API建置方式：

 

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

                        function documentLoad()

                        {

                var pBody = document.getElementById("tgos_3d");

                tg3dEarth = newTGOS.TEOnlineMap(pBody,{

                    drawingControl:true,

                                        viewpoint: newTGOS.TEViewpoint(121.57, 25.02, 1500, 0,45)

                });

                  }

 

2. 建立高程模擬物件

先指定出TEPolygon物件，再利用TESimulate物件進行呈現，並設定顏色及高度值，使TEPolygon物件模擬高度顯示於地圖上。

function onTESimulateClick(){

    var path1 = [newTGOS.TEPoint(121.56470354170347 ,25.040007684977013),

        newTGOS.TEPoint(121.56602855362195 ,25.039993104279972),

        newTGOS.TEPoint(121.5660124603598 ,25.039400154466207),

        newTGOS.TEPoint(121.56468744844132 ,25.03943417625434),

        newTGOS.TEPoint(121.56470354170347 ,25.040007684977013)];

    var lineString1 = newTGOS.TELineString(path1);

    var linearRing1 = newTGOS.TELinearRing(lineString1);

    var polygon1 = newTGOS.TEPolygon([linearRing1]);  //建立第一筆面資料

 

    var path2 = [newTGOS.TEPoint(121.56626995255439 ,25.039978523581166),

        newTGOS.TEPoint(121.56706388682134 ,25.03995422241273),

        newTGOS.TEPoint(121.56705852240063 ,25.039346691637114),

        newTGOS.TEPoint(121.5662163083472 ,25.039366132668537),

        newTGOS.TEPoint(121.56626995255439 ,25.039978523581166)];

    var lineString2 = newTGOS.TELineString(path2);

    var linearRing2 = newTGOS.TELinearRing(lineString2);

    var polygon2 = newTGOS.TEPolygon([linearRing2]);  //建立第二筆面資料

 

    var path3 = [newTGOS.TEPoint(121.56722481944331 ,25.03998338381419),

        newTGOS.TEPoint(121.56824942380132 ,25.039963942880576),

        newTGOS.TEPoint(121.56823333053914 ,25.039341831378696),

        newTGOS.TEPoint(121.56724091270546 ,25.03936127241087),

        newTGOS.TEPoint(121.56722481944331 ,25.03998338381419)];

    var lineString3 = newTGOS.TELineString(path3);

    var linearRing3 = newTGOS.TELinearRing(lineString3);

    var polygon3 = newTGOS.TEPolygon([linearRing3]);  //建立第三筆面資料

 

    var path4 = [newTGOS.TEPoint(121.56622703718907 ,25.040814480843107),

        newTGOS.TEPoint(121.56748231163816 ,25.040799900241993),

        newTGOS.TEPoint(121.56747694721744 ,25.040119470262816),

        newTGOS.TEPoint(121.56618412182328 ,25.040134050944804),

        newTGOS.TEPoint(121.56622703718907 ,25.040814480843107)];

    var lineString4 = newTGOS.TELineString(path4);

    var linearRing4 = newTGOS.TELinearRing(lineString4);

    var polygon4 = newTGOS.TEPolygon([linearRing4]);  //建立第四筆面資料

 

    var path5 = [newTGOS.TEPoint(121.56519706841026 ,25.040877663427782),

        newTGOS.TEPoint(121.56589444310418 ,25.040809620642882),

        newTGOS.TEPoint(121.56587834984201 ,25.040279857669358),

        newTGOS.TEPoint(121.56519706841026 ,25.040309018993455),

        newTGOS.TEPoint(121.56519706841026 ,25.040877663427782)];

    var lineString5 = newTGOS.TELineString(path5);

    var linearRing5 = newTGOS.TELinearRing(lineString5);

    var polygon5 = newTGOS.TEPolygon([linearRing5]);  //建立第五筆面資料

 

    var simulate1 = newTGOS.TESimulate(tg3dEarth,{  //建立高程模擬物件

        geometry:polygon1,  //指定面資料來源

        strokeColor:'#ff0000',  //指定邊框顏色

        fillColor:'#ffaaaa',  //指定填色顏色

        height:200  //指定模擬高度

    });

    var simulate2 = newTGOS.TESimulate(tg3dEarth,{

        geometry:polygon2,

        strokeColor:'#ffff00',

        fillColor:'#ffffaa',

        height:150

    });

    var simulate3 = newTGOS.TESimulate(tg3dEarth,{

        geometry:polygon3,

        strokeColor:'#00ff00',

        fillColor:'#aaffaa',

        height:250

    });

    var simulate4 = newTGOS.TESimulate(tg3dEarth,{

        geometry:polygon4,

        strokeColor:'#00ffff',

        fillColor:'#aaffff',

        height:300

    });

    var simulate5 = newTGOS.TESimulate(tg3dEarth,{

        geometry:polygon5,

        strokeColor:'#0000ff',

        fillColor:'#aaaaff',

        height:200

    });

}

3. 建立飛行路徑

建立TEViewRoute物件，指定使用horizontalFly方法，讓視點水平環繞前面建立的高程模擬物件群飛行瀏覽，並設定飛行半徑、高度、速度。

function onhorizontalFlyClick(){

    var viewRoute = newTGOS.TEViewRoute();  //建立飛行導覽物件

    viewRoute.horizontalFly(tg3dEarth,{  //使用水平環繞地標導覽方法

        target : newTGOS.TEPoint(121.56519706841026 ,25.040877663427782), 

        //指定觀察地標

        radius : 1500,  //設定環繞半徑

        height : 1500,  //設定飛行高度

        speed : 1500  //設定飛行速度

    });

}