点击地图上对应的标签后,弹出窗口显示视频监控画面。
注意事项
在Skyline Web Js 二次开发中,凡是TerraExplorer里面的功能在API中都有对应的方法,可以根据TE里面的菜单名称找到对应的方法(如:Navigate菜单下的所有功能对应API中Navigate下的所有方法),可以方便快捷的进行二次开发,有些功能方法藏的比较深,需要自行理解和发掘。
本节中需要注意的一点是:
- 点位信息中含有Message属性(该属性的查看方式通过在TE或WEB里面工程目录树中的点右键属性),但是通过查询CreateTextLabel的API文档信息,在所创建的Text Label中并没有Message的直接设置方法,因此需要通过单独创建Message对象即CreateMessage,然后通过CreateTextLabel的返回对象.Message.MessageID=Message返回对象.ID进行关联。
- 如果使用到视频链接,CreateMessage方法并不能很好的解决该问题(CreateMessage可以对简单的文本信息的弹出进行设置),因为窗口大小无法调整!返回对象中并没有可以对窗口大小进行调整的方法, 但是在图形化操作的界面上我们可以看到调整宽和高,呵呵....注意到你使用到popup,在API文档中,再找一下你会发现CreatePopupMessage方法才是可以解决该文件的关键点,真特么山路十八弯,套路九连环。
- 但是,使用CreatePopupMessage方法有个缺点,即当你在目录工程树中或地图上点击了这个点,就会立马弹出窗口,如果你已经在当前点位,进行点击的话,没有问题;当你在别的位置,通过点击工程目录树中的点位进行飞行操作,它立即弹出窗口给人的体验是非常差的,因为在飞行前就弹出且跟随飞行走到该点位。
- 所以建议使用全局左键点击事件,触发点位判断操作(根据获取的鼠标获取到的对象Type判断),从而弹出窗口,播放视频,这样在工程目录树中进行点位飞行,都不会触发到弹出事件,只有在点击地图的时候才触发,效果好。
需求分解
- 创建坐标点位
- 设置文本样式
- 创建标签信息
- 设置弹出视频窗口
方法说明
- SGWorld66.Creator.CreateLabelStyle(ls);
- 设置Label样式信息
- SGWorld66.Creator.CreateTextLabel(Position,Text,LabelStyle,GroupID,Description);
- 创建文本标签,Position为点位,Text为提示信息,LabelStyle为CreateLabelStyle的返回值对象,GroupID为工程目录树ID,Description为描述信息
- SGWorld66.Creator.CreateLabel(Position,Text,ImageFileName,LabelStyle,GroupID,Description);
- 创建标签(可带图片),Position为点位,Text为提示信息(bug:该值如果设置为"",空字符串,然后再次引用其返回对象设置字符串的话,在显示时不会显示任何字符串信息,而在获取的时候为再次引用的字符串对象而不是"",如一开始就设置其他值,如"123",再次引用设置其他字符串信息,则会显示再次引用的字符串信息),ImageFileName为图片的完整路径(以中心点进行覆盖),LabelStyle为SGWorld66.Creator.CreateLabelStyle的返回值对象,GroupID为工程目录树ID(可设置默认为""空字符串),Description为描述信息(工程目录树里显示的名称)
- SGWorld66.Creator.CreatePopupMessage(Caption,Src,Left,Top,Width,Height,Timeout);
- 弹出信息窗口,Caption为窗口标题,Src为网络链接URL,Left为离左侧X坐标距离,Top为离顶部Y坐标距离,Width为窗口宽度,Height为窗口高度,Timeout为消失时间。关于popup,有个重点要说明,弹出网页的所用ie会采用默认的最低版本(一般为7),如果你机器上安装了多个ie版本,那么弹出页面请做好兼容性,做好低版本以便向上兼容。
- SGWorld66.Window.GetMouseInfo();
- 获取鼠标信息,返回对象为IMouseInfo66,其中的X和Y为屏幕上的坐标值(不是地图上的真实值)
- SGWorld66.Window.PixelToWorld(PixelX,PixelY,TypeFilterFlags);
- 根据屏幕坐标和类型获取实体,PixelX为屏幕坐标X值,PixelY为屏幕坐标Y值(X和Y为地图上的真实值,可用来获取位置),TypeFilterFlags为获取的类型参数(以此来限定获取到的不同对象)
- SGWorld66.ProjectTree.GetObject(ID);
- 根据对象ID值,在目录工程树中获取对象,返回对象为自动转换的原对象
- SGWorld66.Creator.GetObject(ID);
- 根据对象ID值,在创建对象中获取对象,返回对象为自动转换的原对象
- SGWorld66.Window.ShowPopup(popup);
- 显示popup窗口
Message,关联显示,Jsp源码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<script type="text/javascript" >
/**
* 初始化
*/
function Init() {
try {
var flyPath = "http://192.168.1.224:8090/default3.fly";
//打开工程
SGWorld66.Project.Open(flyPath);
//测试中心点
var Pos = SGWorld66.Creator.CreatePosition(116.38752366300,39.99765237460,200,0,0,0,0,0);
//创建标签
createPointList(Pos,"http://192.168.1.222:9090/skyline/test/videoCreate.jsp?lang=zh-CN&stretching=none");
} catch (e) {
alert("Error: " + e.description);
}
}
/**
*设置文本标注样式
*/
function createLabelStyle(nBGRValue,dAlpha,FontName,FontSize,Scale,Bold){
// C1. Create label syle
var cLabelStyle = SGWorld66.Creator.CreateLabelStyle();
// C2. Change label style settings
var nBGRValue = nBGRValue; // Blue
var dAlpha = dAlpha; // 50% opacity
var cBackgroundColor = cLabelStyle.BackgroundColor; // Get label style background color
cBackgroundColor.FromBGRColor(nBGRValue); // Set background to blue
cBackgroundColor.SetAlpha(dAlpha); // Set transparency to 50%
cLabelStyle.BackgroundColor = cBackgroundColor; // Set label style background color
cLabelStyle.FontName = FontName; // Set font name
cLabelStyle.FontSize = FontSize; // Set font size
cLabelStyle.Italic = false; // Set label style font to italic
cLabelStyle.Scale = Scale; // Set label style scale
cLabelStyle.Bold = Bold;
//cLabelStyle.MaxViewingHeight = MaxViewingHeight;
cLabelStyle.LimitScreenSize = true;
cLabelStyle.LineToGround = true;
//cLabelStyle.MinViewingHeight = MinViewingHeight;
return cLabelStyle;
}
/**
*创建标签,传递第二个参数为视频地址
*/
function createPointList(Pos,MovieAddress){
//获取GroupID
var current = SGWorld66.ProjectTree.FindItem("");
//设置标签样式
var labelStyle = createLabelStyle(0xFF0000,0,"微软雅黑",20,200,true);
//创建文本标签
var textLabelObj = SGWorld66.Creator.CreateTextLabel(Pos,"ceshi",labelStyle,current,"tt");
//创建弹出窗口
var pp = SGWorld66.Creator.CreatePopupMessage("监控画面",MovieAddress,0,0,800,600,-1);
//MessageID属性关联
textLabelObj.Message.MessageID = pp.ID;
return textLabelObj;
}
</script>
<body onload = "Init();">
<!--定义一个TerraExplorer 3D窗口对象-->
<object id="TE" classid="clsid:3a4f9192-65a8-11d5-85c1-0001023952c1" onmousemove="OnMouseMoved()" style="width: 80%;height: 100%"></object>
<!--定义TerraExplorer对象SGWorld65-->
<object id="SGWorld66" classid="CLSID:3A4F9199-65A8-11D5-85C1-0001023952C1" style="visibility:hidden;height:0 "></object>
<!--定义一个TerraExplorer 信息窗口对象-->
<object id="TEInformationWindow" classid="CLSID:3a4f9193-65a8-11d5-85c1-0001023952c1" width="15%" height="100%">
</object>
</body>
</html>
Message,关联显示,效果图
Message,关联显示,优缺点
优点
- 自带弹出属性,使用方法简单,含文本、链接等多种模式;
- 在附近弹出,带连接样式;
缺点
- 在工程目录树中的体验感差,和飞行冲突,和跳跃没有冲突,即双击或点击飞行该标签位会立即触发弹出操作,后果就是弹出框和飞行并行;
OnLButtonClicked,触发显示,Jsp源码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<script type="text/javascript" >
/**
* 初始化
*/
function Init() {
try {
var flyPath = "http://192.168.1.224:8090/default3.fly";
//打开工程
SGWorld66.Project.Open(flyPath);
//测试中心点
var Pos = SGWorld66.Creator.CreatePosition(116.38752366300,39.99765237460,200,0,0,0,0,0);
//创建标签
createPointList(Pos,"http://192.168.1.222:9090/skyline/test/videoCreate.jsp?lang=zh-CN&stretching=none");
//添加OnLButtonClicked事件
SGWorld66.AttachEvent("OnLButtonClicked", OnProjectLButtonClicked);
} catch (e) {
alert("Error: " + e.description);
}
}
/**
*设置文本标注样式
*/
function createLabelStyle(nBGRValue,dAlpha,FontName,FontSize,Scale,Bold){
// C1. Create label syle
var cLabelStyle = SGWorld66.Creator.CreateLabelStyle();
// C2. Change label style settings
var nBGRValue = nBGRValue; // Blue
var dAlpha = dAlpha; // 50% opacity
var cBackgroundColor = cLabelStyle.BackgroundColor; // Get label style background color
cBackgroundColor.FromBGRColor(nBGRValue); // Set background to blue
cBackgroundColor.SetAlpha(dAlpha); // Set transparency to 50%
cLabelStyle.BackgroundColor = cBackgroundColor; // Set label style background color
cLabelStyle.FontName = FontName; // Set font name
cLabelStyle.FontSize = FontSize; // Set font size
cLabelStyle.Italic = false; // Set label style font to italic
cLabelStyle.Scale = Scale; // Set label style scale
cLabelStyle.Bold = Bold;
//cLabelStyle.MaxViewingHeight = MaxViewingHeight;
cLabelStyle.LimitScreenSize = true;
cLabelStyle.LineToGround = true;
//cLabelStyle.MinViewingHeight = MinViewingHeight;
return cLabelStyle;
}
/**
*创建标签,传递第二个参数为视频地址
*/
function createPointList(Pos,MovieAddress){
//获取GroupID
var current = SGWorld66.ProjectTree.FindItem("");
//设置标签样式
var labelStyle = createLabelStyle(0xFF0000,0,"微软雅黑",20,200,true);
//创建文本标签
var textLabelObj = SGWorld66.Creator.CreateTextLabel(Pos,"ceshi",labelStyle,current,"tt");
//自定义添加属性字段和信息
textLabelObj.ClientData("link") = MovieAddress;
return textLabelObj;
}
/**
*全局左键单击事件-点击对应的标签弹出窗口显示监控画面
*/
function OnProjectLButtonClicked(Flags, X, Y){
//获取鼠标信息
var mInfo = SGWorld66.Window.GetMouseInfo();
//alert(mInfo.X + "/" + mInfo.Y);
//获取实体信息,可指定获取的类型
var ptwInfo = SGWorld66.Window.PixelToWorld(mInfo.X,mInfo.Y,2);
//alert(ptwInfo.Position.X + "/" + ptwInfo.Position.Y + "/" + ptwInfo.ObjectID);
//判断ptwInfo.objectId是否为空字符串,且ptwInfo.Type为2-->Label才弹出
//使用弹出框Popups
if("" != ptwInfo.ObjectID){
//根据ObjectID获取对象,返回对象自动转换为原类型,从工程目录树中获取
var mubiao = SGWorld66.ProjectTree.GetObject(ptwInfo.ObjectID);
//根据ObjectID获取对象,返回对象自动转换为原类型,从创建对象中获取
//var obj = SGWorld66.Creator.GetObject(ptwInfo.ObjectID);
//alert(mubiao.Text);
//alert(obj.Text);
//创建弹出窗口
var popup = SGWorld66.Creator.CreatePopupMessage("视频监控画面 编号:" + mubiao.ID, mubiao.ClientData("link"),0,0,1000,600,-1);
//显示弹出窗口
SGWorld66.Window.ShowPopup(popup);
}
}
</script>
<body onload = "Init();">
<!--定义一个TerraExplorer 3D窗口对象-->
<object id="TE" classid="clsid:3a4f9192-65a8-11d5-85c1-0001023952c1" onmousemove="OnMouseMoved()" style="width: 80%;height: 100%"></object>
<!--定义TerraExplorer对象SGWorld65-->
<object id="SGWorld66" classid="CLSID:3A4F9199-65A8-11D5-85C1-0001023952C1" style="visibility:hidden;height:0 "></object>
<!--定义一个TerraExplorer 信息窗口对象-->
<object id="TEInformationWindow" classid="CLSID:3a4f9193-65a8-11d5-85c1-0001023952c1" width="15%" height="100%">
</object>
</body>
</html>
OnLButtonClicked,触发显示,优缺点
优点
- 体验感好;
缺点
- 代码编写较为繁琐,特别是多种实体要做不同需求时,要做多重判断;