Skyline WEB端開發5——添加標籤後移動

時間 2019-11-18

標籤 skyline web 開發添加標籤移動欄目 HTML 简体版

原文原文鏈接

針對於標籤或者模型，在skyline上能夠進行移動。能夠讓一個模型能夠像無人機似的飛行，或者描述從一個點到另外一個點的飛行軌跡。javascript

話很少說，直接上乾貨。html

第一步添加標籤java

參考網址：http://www.javashuo.com/article/p-vrnoqlaz-eq.htmljquery

第二步設置屬性web

function createLable(){
　　var label = sgworld.Creator.CreateLabel(labelPos, "北京科技有限公司.\r\n西安辦事處\r\n", cLabelPath2, cLabelStyle, sgworld.ProjectTree.FindItem("新建組 ##575097"), "grey_bubble");
　　//在生成lable對象後，須要設置一個屬性，即 
　　lable.Attachment.AutoDetach = false;
}

對於動態對象，AutoDetach設置爲默認值 false。一旦攝像機到達動態對象，它會繼續按照對象的移動狀態來跟蹤對象。可是，若是 AutoDetach 設置爲 true，一旦攝像機到達對象時，它將中止。若是客戶端不斷更新對象的位置（例如，做爲一個 GPS 更新），它應設置此值（在建立對象的時候）爲 false。這樣，若是用戶飛往這個對象，它後面的攝像機繼續。json

可理解爲若是設置爲false，那麼當標籤進行移動的時候，攝像機的位置會跟隨着移動，當中止到某一點的時候，攝像機中止，標籤再次移動的時候，攝像機依然隨之移動。app

若是設置爲true，那麼當標籤進行移動的時候，攝像機的位置會跟隨着移動，當中止到某一點的時候，攝像機中止，標籤再次移動的時候，攝像機再也不隨之移動。async

第三步添加監聽ide

//在每一幀渲染前都會觸發該方法
sgworld.AttachEvent("OnFrame", OnFrame);

OnFrame事件詳解參考 http://www.javashuo.com/article/p-mzcozkvf-em.html

第四步添加移動方法spa

一、Lerp

一個座標以必定比例朝着另外一個座標移動

function OnFrame() {
    if(lable != null) {
        //默認飛到某一個位置
        var Washington = sgworld.Creator.CreatePosition(
            116.3912630081,
            39.9074812817,
            1000,
            0,
            0.0, // 偏航角
            -43.0); // 俯仰角
        lable.Position = lable.Position.Lerp(Washington, 1);
    }
}

Lerp(
    Position, //須要新建一個位置座標，或者從某個地方讀取到的位置座標
    Percentage //移動的比例
)

二、Move

將標籤的座標移動一段距離

function OnFrame(){
　　if(lable != null){
　　　　lable.Position = lable.Position.Move(100, -90, 45);
　　}
}

Move(
    Distance, 　　 //移動的距離。
    Yaw, 　　　　　 //移動座標的方向。0=北，90=東，180=南，-90=西，-180=南
    Pitch　　　　 //移動座標的俯仰角。0=水平，1~90=向上飛行，-90~-1=向下飛行
)

三、MoveToward

移動座標走向另外一個座標指定的距離

function OnFrame() {
    if(lable != null) {
        //默認飛到某一個位置
        var Washington = sgworld.Creator.CreatePosition(
            116.3912630081,
            39.9074812817,
            1000,
            0,
            0.0, // 偏航角
            -43.0); // 俯仰角
        lable.Position = lable.Position.MoveToward(Washington, 1);
    }
}

MoveToward(
    Position,    //一個位置座標，表示座標朝着已選定的座標移動
    Distance    //移動的距離
)

以上就是關於標籤或模型的移動的內容。

下面附上完整代碼可參考

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="data/data.json"></script>
    <script language="javascript">
        //初始化加載TerraExplorer工程
        $(window).load(function () {
            try {
                var flyPath = "C:\\Users\\admin\\Desktop\\SkyglobeLB.fly";
                // attach callback to the load finished event
                sgworld.AttachEvent("OnLoadFinished", OnProjectLoadFinished);
                // Load default developer fly file from www.skylineglobe.com web site.
                // default load is in async mode
                sgworld.Project.Open(flyPath);
            }
            catch(ex) {
                alert(ex.message);
            }
        });
        //加載事件
        function OnProjectLoadFinished(){
            //默認飛到某一個位置
            var Washington = sgworld.Creator.CreatePosition(
                116.3912630081,
                39.9074812817,
                1000,
                0,
                0.0, // 偏航角
                -45.0); // 俯仰角
            sgworld.Navigate.FlyTo(Washington);
        }
        //座標點的位置
        var lable;
        //按照俯仰角進行移動
        function move(){
            //建立點
            var labelPos = sgworld.Creator.CreatePosition(
                    116.3912630081,
                    39.9074812817,
                    10,
                    2,
                    0,//Yaw
                    -60, // Pitch偏航角
                    -26); // Roll俯仰角);
            
            var cLabelStyle = sgworld.Creator.CreateLabelStyle();
            
            cLabelStyle.TextOnImage = false;//設置文本是否顯示在圖像上。設置true（字在圖上），設置false（字在圖下）
            cLabelStyle.Bold = true;//設置粗體
            cLabelStyle.MultilineJustification = "center";//若是有多行文字的話，肯定文本對齊方式
            cLabelStyle.TextAlignment = "Top";//決定了有關的背景文本的水平和垂直對齊。
//          cLabelStyle.MaxViewingHeight = 8000000;//最大高度，若是超過此高度後，該點將隱藏
            var cLabelPath = "F:\\myself\\images\\grey_bubble.png";//圖片路徑
            lable = sgworld.Creator.CreateLabel(labelPos, "guanxin"+10, cLabelPath, cLabelStyle, sgworld.ProjectTree.FindItem("新建組 ##575097"), "grey_bubble"+10);
            lable.Attachment.AutoDetach = false;
            //在每一幀渲染前都會觸發該方法
            sgworld.AttachEvent("OnFrame", OnFrame);
        }
        
        function OnFrame(){
            if(lable != null){
                lable.Position = lable.Position.Move(100, -90, $("#pitch").val());
            }
        }
        
        /*function OnFrame(){
            if(lable != null){
                //默認飛到某一個位置
                var Washington = sgworld.Creator.CreatePosition(
                    116.3912630081,
                    39.9074812817,
                    1000,
                    0,
                    0.0, // 偏航角
                    -43.0); // 俯仰角
                lable.Position = lable.Position.Lerp(Washington, 1);
            }
        }
        
        function OnFrame(){
            if(lable != null){
                //默認飛到某一個位置
                var Washington = sgworld.Creator.CreatePosition(
                    116.3912630081,
                    39.9074812817,
                    1000,
                    0,
                    0.0, // 偏航角
                    -43.0); // 俯仰角
                lable.Position = lable.Position.MoveToward(Washington, 1);
            }
        }*/
    </script>
    <body>
        <!--0=水平，+90=從下到上垂直，-90=從上到下垂直-->
        俯仰角：<input type="text" name="pitch" id="pitch"  />
        <input type="button" value="移動" onclick="move()" />
        <hr />
        <div id="div_tree" style="width:20%;height:700px;float:left;border: rgb(1,158,213) 1px solid;">
            <object id="LY_TerraExplorerInformationWindow" classid="CLSID:3a4f9193-65a8-11d5-85c1-0001023952c1" style="width:100%;height:100%;"></object>
        </div>
        <div id="div_3dWindow" style="height:700px;width:79%;float:left;border: rgb(1,158,213) 1px solid;">
            <object id="LY_TerraExplorer3DWindow" classid="CLSID:3a4f9192-65a8-11d5-85c1-0001023952c1" style="width:100%;height:100%;"></object>
        </div>
        <object id="sgworld" classid="CLSID:3A4F9199-65A8-11D5-85C1-0001023952C1" style="visibility:hidden;height:0 "></object>
    </body>
</html>