运行范例

描述

该范例展示如何进行天际线分析,及其相关参数设置。

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

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


 <html>
 <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 sceneControl = null;
        var points = new Array();
        var skyline;
        var lenth;
        //判断网页的打开方式是本地打开还是通过网络打开
        //不同的打开方式url赋值不同
        if (htmlUrl == "") {
            htmlUrl = "http://localhost:8090";
        }
        else {
            htmlUrl = "http://" + htmlUrl;
        }
        var sceneUrl = htmlUrl + "/iserver/services/3D-sample/rest/realspace";

        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"); var layer3D = scene.get_layer3Ds().get_item(0); if (layer3D != null) { //获取图层的地理范围,并飞行到该范围 var geobound = layer3D.get_bounds(); scene.get_flyingOperator().flyToBounds(geobound); } } //控件初始化失败后的回调函数 function failedCallback() { alert("Realspace initialized failed!"); } //获取数据信息 function getDataName(strLayerName) { var sceneservicelist = sceneControl.get_sceneServicesList(); sceneservicelist.load(sceneUrl); var scenecount = sceneControl.get_sceneServicesList().get_count(); for (var i = 0; i < scenecount; i++) { //获取指定的场景信息 var sceneinfor = sceneservicelist.get_item(i); var scenename = sceneinfor.get_name(); layer3DServicesList = sceneControl.get_layer3DServicesList(); layer3DServicesList.load(sceneUrl, scenename); var count = layer3DServicesList.get_count(); for (var j = 0; j < count; j++) { //获取指定的图层信息,包括图层名称、数据名称 var layer3DServiceInfo = layer3DServicesList.get_item(j); var layerName = layer3DServiceInfo.get_name(); var dataName = layer3DServiceInfo.get_dataName(); if (layerName == strLayerName) { return dataName; } } } } //继承自SuperMap.Web.UI.Action3Ds.SceneAction类扩展一个SuperMap.Web.UI.Action3Ds.DrawLine SuperMap.Web.UI.Action3Ds.CreatePoint = function (sceneControl) { SuperMap.Web.UI.Action3Ds.CreatePoint.initializeBase(this); this._name = "CreatePoint"; this._sceneControl = sceneControl; this._point = new SuperMap.Web.Core.Point3D(); this._type = SuperMap.Web.UI.Action3Ds.SceneActionType.POINTSELECT; }; SuperMap.Web.UI.Action3Ds.CreatePoint.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()); this._point = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel); var gePt = new SuperMap.Web.Core.GeoPoint3D( this._point); var feature3D = new SuperMap.Web.Core.Feature3D(); var style = new SuperMap.Web.Core.Style3D(); style.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.ABSOLUTE); style.set_markerColor(new SuperMap.Web.Core.Color(255,0,0,255)) feature3D.set_style3D(style); feature3D.set_geometry(gePt); var trackingLayer = sceneControl.get_scene().get_trackingLayer3D(); trackingLayer.set_isVisible(true); trackingLayer.removeAll(); this._id2 = trackingLayer.add(feature3D, "pt"); setPosParameters( this._point); skylineBuild(this._point); } else if(this._point != null){ sceneControl.set_sceneAction(new SuperMap.Web.UI.Action3Ds.Pan(sceneControl)); } } }; SuperMap.Web.UI.Action3Ds.CreatePoint.registerClass('SuperMap.Web.UI.Action3Ds.CreatePoint', SuperMap.Web.UI.Action3Ds.SceneAction, Sys.IDisposable); function skylineBuild(pt) { skyline.set_viewerPosition(pt); skyline.set_direction(scene.get_camera().get_heading()); skyline.set_pitch(scene.get_camera().get_tilt()); skyline.set_color(new SuperMap.Web.Core.Color(0,0,255,255)); skyline.build(); } function drawpoint() { skyline = new SuperMap.Web.Realspace.Skyline(); var newAction = new SuperMap.Web.UI.Action3Ds.CreatePoint(sceneControl); sceneControl.set_sceneAction(newAction); } function setPosParameters(pt) { document.getElementById("x").value = pt.x; document.getElementById("y").value = pt.y; document.getElementById("z").value = pt.z; } function viewbuild(){ } function clear(){ trackingLayer.removeAll(); lenth=0; } function changeProperty(idName) { var dValue = document.getElementById(idName).value; var vPositon = skyline.get_viewerPosition(); switch(idName){ case "x": vPositon.x = dValue; skyline.set_viewerPosition(vPositon); break; case "y": vPositon.y = dValue; skyline.set_viewerPosition(vPositon); break; case "z": vPositon.z = dValue; skyline.set_viewerPosition(vPositon); break; case "dis": skyline.set_distance(dValue); break; case "hFov": skyline.set_horizontalFov(dValue); break; case "vFov": skyline.set_verticalFov(dValue); break; case "dir": skyline.set_direction(dValue); break; case "pit": skyline.set_pitch(dValue); default : break; } } </script> </head> <body onLoad="onPageLoad()"> <div id="parameters" style="position:absolute;left:15px;top:5px;bottom:5px;width:220px; border:2px solid #cfcfcf;"> <div style="position:absolute;text-align:center;left:1px;top:15px;width:210px;height:30px;"> <input id="viewpoint" type="button" value="选择视点" onClick="drawpoint()"> <input id="clear" type="button" value="清除结果" onClick="clear()"> </div> <div style="position:absolute;left:1px;top:50px; width:210px; text-align:left;border: 1px solid #cfcfcf;"> </br>可视点: <br /> <div> <br />  X:    <input id="x" type="text" onChange="changeProperty('x')"> <br /> <br />  Y:    <input id="y" type="text" onchange="changeProperty('y')"> <br /> <br />  Z:    <input id="z" type="text" onchange="changeProperty('z')"> <br /> <br />  Direction:  <input id="dir" type="text" size="15" value="0" onchange="changeProperty('dir')"> <br /> <br />  Pitch:     <input id="pit" type="text" size="18" value="0" onchange="changeProperty('pit')"> <br /> <br />  Color:    <input id="color" type="text" size="18"> <br /> <br /> </div> </div> </div> <div id="sceneControlDiv" style="position:absolute;top:5px;left:255px;bottom:5px;right:5px;border:3px solid #cfcfcf;"> </div> </div> </body> </html>