明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
随笔 - 1277, 文章 - 0, 评论 - 214, 阅读 - 320万
  博客园  :: 首页  :: 管理
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Skyline WEB端开发 ——添加标签后移动

Posted on   且行且思  阅读(330)  评论(0)  编辑  收藏  举报

针对于标签或者模型，在skyline上可以进行移动。可以让一个模型可以像无人机似的飞行，或者描述从一个点到另一个点的飞行轨迹。

话不多说，直接上干货。

第一步 添加标签

参考网址：https://www.cnblogs.com/Fooo/p/12749580.html

第二步 设置属性

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。这样，如果用户飞往这个对象，它后面的摄像机继续。

可理解为如果设置为false，那么当标签进行移动的时候，摄像机的位置会跟随着移动，当停止到某一点的时候，摄像机停止，标签再次移动的时候，摄像机依然随之移动。

如果设置为true，那么当标签进行移动的时候，摄像机的位置会跟随着移动，当停止到某一点的时候，摄像机停止，标签再次移动的时候，摄像机不再随之移动。

第三步 添加监听

//在每一帧渲染前都会触发该方法
sgworld.AttachEvent("OnFrame", OnFrame);
OnFrame事件详解参考 https://www.cnblogs.com/Fooo/p/12749622.html

第四步 添加移动方法



1、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 //移动的比例
)




2、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=向下飞行
)




 


3、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>


复制代码


 




 







	







    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· SQL Server 2025 AI相关能力初探
    

· Linux系列：如何用 C#调用 C方法造成内存泄露
    

· AI与.NET技术实操系列（二）：开始使用ML.NET
    

· 记一次.NET内存居高不下排查解决与启示
    

· 探究高空视频全景AR技术的实现原理
    



    

    阅读排行：
    

 ·          阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
        

 ·          AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
        

 ·          开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
        

 ·          Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
        

 ·          被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
        



    

    







			

				
	

	

		
			


		
	






    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
AI IDE Trae