该范例展示如何进行可视域分析相关及其相关参数设置。
了解微软脚本库的更多信息请参见微软官方帮助文档. 微软官方帮助文档.
<!DOCTYPE>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>可视域分析</title>
<script type="text/javascript" src="SuperMap.Include.js"></script>
<script type="text/javascript">
var htmlUrl = document.location.host;
var scene = null;
var viewShed3d = null;
//判断网页的打开方式是本地打开还是通过网络打开
//不同的打开方式url赋值不同
if (htmlUrl == "") {
htmlUrl = "http://localhost:8090";
}
else {
htmlUrl = "http://" + htmlUrl;
}
var sceneUrl = htmlUrl + "/iserver/services/3D-sample/rest/realspace";
var trackline;
function onPageLoad() {
//初始化三维场景控件
try {
//初始化三维场景控件实例,参数为包含控件的HTML元素
sceneControl = new SuperMap.Web.UI.Controls.SceneControl($get("sceneControlDiv"), initCallback, failedCallback);
}
catch (e) {
//若没有安装插件，则抛出该异常
if (e.name == SuperMap.Web.Realspace.ExceptionName.PlugInNotInstalled) {
var url = htmlUrl + "/iserver/iClient/for3D/plugin/Setup.exe";
document.write("未检测到 SuperMap iClient3D for Plugin 插件，请单击此处下载并安装插件。");
return;
}
//若使用非IE浏览器，则抛出该异常
else if (e.name == SuperMap.Web.Realspace.ExceptionName.BrowserNotSupport) {
document.write("SuperMap iClient3D for Plugin 目前仅支持 InternetExplorer 浏览器，请更换浏览器后重新尝试加载本页面。
");
return;
}
//抛出其他异常
else {
alert(e.message);
}
}
}
//控件初始化完成后的回调函数，初始化完成之后才能进行数据加载
function initCallback() {
//获取Realspace控件的场景，控件和场景是一对一的捆绑关系
scene = sceneControl.get_scene();
scene.open(sceneUrl, "scene_olympicgreen");
viewShed3d = new SuperMap.Web.Realspace.ViewShed3D();
}
//控件初始化失败后的回调函数
function failedCallback() {
alert("Realspace initialized failed!");
}
function drawpoint(){
sceneControl.set_sceneAction(null);
var newAction = new SuperMap.Web.UI.Action3Ds.ViewShed3DAction(sceneControl,viewShed3d);
sceneControl.set_sceneAction(newAction);
}
//继承自SuperMap.Web.UI.Action3Ds.SceneAction类扩展一个SuperMap.Web.UI.Action3Ds.DrawPoint
SuperMap.Web.UI.Action3Ds.ViewShed3DAction = function (sceneControl,viewShed3d) {
SuperMap.Web.UI.Action3Ds.ViewShed3DAction.initializeBase(this);
this._name = "ViewShed3DAction";
this._sceneControl = sceneControl;
this._viewShed3d = viewShed3d;
this._point;
this._type = SuperMap.Web.UI.Action3Ds.SceneActionType.POINTSELECT;
};
SuperMap.Web.UI.Action3Ds.ViewShed3DAction.prototype = {
dispose: function () {
this._sceneControl = null;
},
onMouseDown: function (e) {
if (e.get_flagType() % 2 == 1 ) {
var pt = new SuperMap.Pixel(e.get_clientX(), e.get_clientY());
var tmpPoint = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel);
if(this._point == null){
this._point = tmpPoint;
setPositonParameters(tmpPoint);
this._viewShed3d.set_viewerPosition(tmpPoint);
this._viewShed3d.set_distance(0);
this._viewShed3d.build();
}else {
this._point = null;
var panAction = new SuperMap.Web.UI.Action3Ds.Pan(sceneControl);
sceneControl.set_sceneAction(panAction);
document.getElementById("viewpoint").disabled = true;
document.getElementById("clear").disabled = 0;
}
setOtherParameters();
}
},
onMouseMove: function (e) {
if(this._point != null){
var pt = new SuperMap.Pixel(e.get_clientX(), e.get_clientY());
this._point = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel);
this._viewShed3d.setDistDirByPoint(this._point);
}
}
};
SuperMap.Web.UI.Action3Ds.ViewShed3DAction.registerClass('SuperMap.Web.UI.Action3Ds.ViewShed3DAction', SuperMap.Web.UI.Action3Ds.SceneAction, Sys.IDisposable);
function setPositonParameters(pt) {
document.getElementById("x").value = pt.x;
document.getElementById("y").value = pt.y;
document.getElementById("z").value = pt.z;
}
function setOtherParameters(){
document.getElementById("dis").value = viewShed3d.get_distance();
document.getElementById("hFov").value = viewShed3d.get_horizontalFov();
document.getElementById("vFov").value = viewShed3d.get_verticalFov();
document.getElementById("dir").value = viewShed3d.get_direction();
document.getElementById("pit").value = viewShed3d.get_pitch();
}
function clearAll(){
viewShed3d.clear();
document.getElementById("viewpoint").disabled = 0;
document.getElementById("clear").disabled = true;
}
function changeProperty(idName) {
var dValue = document.getElementById(idName).value;
var vPositon = viewShed3d.get_viewerPosition();
switch(idName){
case "x":
vPositon.x = dValue;
viewShed3d.set_viewerPosition(vPositon);
break;
case "y":
vPositon.y = dValue;
viewShed3d.set_viewerPosition(vPositon);
break;
case "z":
vPositon.z = dValue;
viewShed3d.set_viewerPosition(vPositon);
break;
case "dis":
viewShed3d.set_distance(dValue);
break;
case "hFov":
viewShed3d.set_horizontalFov(dValue);
break;
case "vFov":
viewShed3d.set_verticalFov(dValue);
break;
case "dir":
viewShed3d.set_direction(dValue);
break;
case "pit":
viewShed3d.set_pitch(dValue);
default :
break;
}
}
SuperMap.Web.UI.Action3Ds.DynamicViewshedAction = function (sceneControl,callback,finishCallback) {
SuperMap.Web.UI.Action3Ds.DynamicViewshedAction.initializeBase(this);
this._name = "DynamicViewshedAction";
this._sceneControl = sceneControl;
this._points = new SuperMap.Web.Core.Point3Ds();
this._point;
this._type = SuperMap.Web.UI.Action3Ds.SceneActionType.POINTSELECT;
this._id1;//记录静态id
this._id2;//记录动态id
this._trackline = null;
this._viewShed3d = null;
};
var DynamicViewshedAction_this;
var jeepModel;
SuperMap.Web.UI.Action3Ds.DynamicViewshedAction.prototype = {
dispose: function () {
this._sceneControl = null;
},
onMouseDown: function (e) {
if (e.get_flagType() % 2 == 1) {
if (this._point == null) {
var pt = new SuperMap.Pixel(e.get_clientX(), e.get_clientY());
this._point = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel);
jeepModel = new SuperMap.Web.Core.GeoModel();
var modelurl = htmlUrl + "/RealspaceSample/jeep.zip";
jeepModel.fromModelFile(modelurl);
this._points.add(new SuperMap.Web.Core.Point3D(this._point.x, this._point.y, (this._point.z + 0.5)));
jeepModel.set_position(this._point);
var style = new SuperMap.Web.Core.Style3D();
style.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.ABSOLUTE);
var feature = new SuperMap.Web.Core.Feature3D();
feature.set_geometry(jeepModel);
feature.set_style3D(style);
var trackingLayer = this._sceneControl.get_scene().get_trackingLayer3D();
trackingLayer.add(feature, "qc");
} else {
var pt = new SuperMap.Pixel(e.get_clientX(), e.get_clientY());
this._point = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel);
this._points.add(new SuperMap.Web.Core.Point3D(this._point.x, this._point.y, (this._point.z + 0.5)));
this._trackline = new SuperMap.Web.Core.GeoLine3D([this._points]);
trackline=this._trackline;
var feature3D = new SuperMap.Web.Core.Feature3D();
var style = new SuperMap.Web.Core.Style3D();
style.set_lineColor(new SuperMap.Web.Core.Color(0, 255, 0, 255));
style.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.ABSOLUTE);
style.set_lineWidth(3);
feature3D.set_style3D(style);
feature3D.set_geometry(this._trackline);
var trackingLayer = this._sceneControl.get_scene().get_trackingLayer3D();
trackingLayer.set_isVisible(true);
trackingLayer.removeAt(this._id2);
trackingLayer.removeAt(this._id1);
this._id2 = null;
this._id1 = trackingLayer.add(feature3D, "line3D1");
}
} else {
DynamicViewshedAction_this = this;
var trackingLayer = this._sceneControl.get_scene().get_trackingLayer3D();
trackingLayer.removeAt(this._id2);
this._point = null;
this._id1 = null;
this._id2 = null;
this._points = new SuperMap.Web.Core.Point3Ds();
var panAction = new SuperMap.Web.UI.Action3Ds.Pan(sceneControl);
sceneControl.set_sceneAction(panAction);
var nodeAnmination = sceneControl.get_scene().get_trackingLayer3D().get_item("qc").get_geometry().get_nodeAnimationState();
nodeAnmination.setTrack(trackline);
nodeAnmination.set_isEnabled(true);
nodeAnmination.set_length(20);
nodeAnmination.set_timePosition(0);
nodeAnmination.set_playMode(SuperMap.Web.Realspace.PlayMode.SRONCE);
var timeId = setInterval(function(){
doAnalysis(nodeAnmination);
},10);
var timeId2 = setTimeout(function(){
window.clearInterval(timeId);
return;
},21000);
}
},
onMouseMove: function (e) {
if (this._point != null) {
var points = new SuperMap.Web.Core.Point3Ds();
points.add(this._point)
var pt = new SuperMap.Pixel(e.get_clientX(), e.get_clientY());
var temppoint = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel);
points.add(new SuperMap.Web.Core.Point3D(temppoint.x, temppoint.y, (temppoint.z + 0.5)));
var line = new SuperMap.Web.Core.GeoLine3D([points]);
var feature3D = new SuperMap.Web.Core.Feature3D();
var style = new SuperMap.Web.Core.Style3D();
style.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.ABSOLUTE);
style.set_lineWidth(3);
style.set_lineColor(new SuperMap.Web.Core.Color(0, 255, 0, 255));
feature3D.set_style3D(style);
feature3D.set_geometry(line);
var trackingLayer = this._sceneControl.get_scene().get_trackingLayer3D();
trackingLayer.set_isVisible(true);
trackingLayer.removeAt(this._id2);
this._id2 = trackingLayer.add(feature3D, "line3D2");
}
}
};
SuperMap.Web.UI.Action3Ds.DynamicViewshedAction.registerClass('SuperMap.Web.UI.Action3Ds.DynamicViewshedAction', SuperMap.Web.UI.Action3Ds.SceneAction, Sys.IDisposable);
// 执行可视域分析
function doAnalysis(nodeAnmination){
if(viewShed3d){
viewShed3d.clear();
}
var point3D = nodeAnmination.get_position();
point3D = new SuperMap.Web.Core.Point3D(point3D.x, point3D.y, (point3D.z + 2));
var direction = nodeAnmination.get_direction();
viewShed3d.set_viewerPosition(point3D);
viewShed3d.set_direction(direction);
viewShed3d.set_distance(100);
viewShed3d.set_horizontalFov(90);
viewShed3d.set_verticalFov(60);
viewShed3d.build();
}
function drawline(){
sceneControl.set_sceneAction(null);
var DynamicViewshedAction = new SuperMap.Web.UI.Action3Ds.DynamicViewshedAction(sceneControl,null,null);
sceneControl.set_sceneAction(DynamicViewshedAction);
}
</script>
</head>
<body onLoad="onPageLoad()">
<div id="parameters" style="position: absolute; left: 1%; top: 1%; width: 23%; height: 100%; padding: 10px; border:2px solid #cfcfcf;">
视点</br></br>
X: <input type="text" id="x" onchange="changeProperty('x')"><br /><br />
Y: <input type="text" id="y" onchange="changeProperty('y')"><br /><br />
Z: <input type="text" id="z" onchange="changeProperty('z')"><br /><br />
<br />分析参数</br></br>
可视距离：<input id="dis" type="text" onchange="changeProperty('dis')" value="0" style="width: 70px">米<br /><br />
水平视域：<input id="hFov" type="text" onchange="changeProperty('hFov')" style="width: 70px"value="90">度<br /><br />
垂直视域：<input id="vFov" type="text" onchange="changeProperty('vFov')" style="width: 70px"value="90">度 <br /> <br />
方向角 ：<input id="dir" type="text" onchange="changeProperty('dir')" style="width: 70px"value="0">度<br /><br />
倾斜角 : <input id="pit" type="text" onchange="changeProperty('pit')" style="width: 70px;"value="0">度<br /><br />
<input id="viewpoint" type="button" value="选择视点" style="width: 80px;height: 27px" onClick="drawpoint()"/>
<input id="clear" type="button" value="清除结果" style="width: 80px;height: 25px" disabled onClick="clearAll()"/>
<br><br>
<hr style="height: 2px;border:none;border-top: 2px groove skyblue;">
<input id="view" type="button" value="动态可视" style="width: 80px;height: 27px" onClick="drawline()"/>
<input id="clearresult" type="button" value="清除结果" style="width: 80px;height: 25px" onClick="clearAll()"/>
</div>
<div id="sceneControlDiv" style="position: absolute; height: 98%; left: 23%; top: 1%;width: 80%;border:3px solid #cfcfcf;">
</div>
</div>
</body>
</html>