针对于标签或者模型,在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>
分类:
Skyline
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!