运行范例

描述

该范例展示如何进行可视域分析相关及其相关参数设置。

了解微软脚本库的更多信息请参见微软官方帮助文档. 微软官方帮助文档.

代码 (文件格式为 UTF-8)


<!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>