运行范例

描述

该范例展示如何进行Dem坡度、坡向、等值线的提取,及其相关参数设置。

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

代码 (文件格式为 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 contourMap = null;
var slopMap = null;
var dOpacity = 80;
var bounds = null;
var contourDisplay = SuperMap.Web.Realspace.ContourDisplayStyle.LINES;
var slopDisplay = SuperMap.Web.Realspace.SlopeDisplayStyle.ARROW;
var contourInterval = 100;
var colors = null;

//判断网页的打开方式是本地打开还是通过网络打开
//不同的打开方式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() { sceneControl.get_scene().open(sceneUrl, "BeijingDem"); slopMap = new SuperMap.Web.Realspace.SlopeMap(); contourMap = new SuperMap.Web.Realspace.ContourMap(); colors = new Array(); colors[0] = new SuperMap.Web.Core.Color(0,0,255,255); colors[1] = new SuperMap.Web.Core.Color(255,0,0,255); } //控件初始化失败后的回调函数 function failedCallback() { alert("Realspace initialized failed!"); } function startSlopAnalysis(){ slopMap.set_displayStyle(slopDisplay); var keys = new Array(0,25);; slopMap.setColorDictionary(keys,colors); slopMap.set_opacity(dOpacity); var typeOption = document.getElementById("areaType"); var coverageType = typeOption.options[typeOption.selectedIndex].value; if(coverageType=="绘制区域"){ var drawBoxAction = new SuperMap.Web.UI.Action3Ds.MyAction(sceneControl,slopMap); sceneControl.set_sceneAction(drawBoxAction); }else{ bounds = sceneControl.get_scene().get_terrainLayers().get_item(0).get_bounds(); slopMap.set_coverageArea(bounds); slopMap.build(); } document.getElementById("slopAnalysis").disabled = "true"; document.getElementById("slopClear").disabled = 0; } function clearSlop(){ sceneControl.get_scene().get_trackingLayer3D().removeAll(); slopMap.clear(); sceneControl.set_sceneAction(new SuperMap.Web.UI.Action3Ds.Pan(sceneControl)); document.getElementById("slopAnalysis").disabled = 0; document.getElementById("slopClear").disabled = "true"; } function startContourAnalysis(){ contourMap.set_displayStyle(contourDisplay); contourMap.set_interval(contourInterval); dOpacity = Number(document.getElementById("contourOpacity").value); contourMap.set_opacity(dOpacity); var keys = new Array(10,1500);; contourMap.setColorDictionary(keys,colors); var typeOption = document.getElementById("areaType2"); var coverageType = typeOption.options[typeOption.selectedIndex].value; if(coverageType=="绘制区域"){ var drawBoxAction = new SuperMap.Web.UI.Action3Ds.MyAction(sceneControl,contourMap); sceneControl.set_sceneAction(drawBoxAction); }else{ bounds = sceneControl.get_scene().get_terrainLayers().get_item(0).get_bounds(); contourMap.set_coverageArea(bounds); contourMap.build(); } document.getElementById("contourAnalysis").disabled = "true"; document.getElementById("contourClear").disabled = 0; } function changeCoverageType(idName){ var typeOption = document.getElementById(idName); var coverageType = typeOption.options[typeOption.selectedIndex].value; if(coverageType=="绘制区域"){ var drawBoxAction = new SuperMap.Web.UI.Action3Ds.MyAction(sceneControl); sceneControl.set_sceneAction(drawBoxAction); }else{ bounds = sceneControl.get_scene().get_terrainLayers().get_item(0).get_bounds(); } } function clearContour(){ sceneControl.get_scene().get_trackingLayer3D().removeAll(); contourMap.clear(); sceneControl.set_sceneAction(new SuperMap.Web.UI.Action3Ds.Pan(sceneControl)); document.getElementById("contourAnalysis").disabled = 0; document.getElementById("contourClear").disabled = "true"; } /**************************** 绘制矩形 start ****************************/ SuperMap.Web.UI.Action3Ds.MyAction = function (sceneControl,analysis) { SuperMap.Web.UI.Action3Ds.MyAction.initializeBase(this); this._name = "myAction"; this._sceneControl = sceneControl; this._type = SuperMap.Web.UI.Action3Ds.SceneActionType.POINTSELECT; this._analysis = analysis; }; var drawEnd = true; //判断是否结束绘制图形 var isDrawing = false; //判断是否正在绘制图形 var point3D = null; //绘制图形的起始点 var geoBoundObj = null; SuperMap.Web.UI.Action3Ds.MyAction.prototype = { dispose: function () { }, onMouseUp: function (e) { }, onMouseDown: function (e) { if (drawEnd) { var pt = new SuperMap.Pixel(e.get_clientX(), e.get_clientY()); var tempPoint = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel); point3D = new SuperMap.Web.Core.Point3D(e.get_longitude(), e.get_latitude(), 0); isDrawing = true; drawEnd = false; } else { drawEnd = true; //结束绘制 isDrawing = false; //绘制状态变为 false var panAction = new SuperMap.Web.UI.Action3Ds.Pan(sceneControl); sceneControl.set_sceneAction(panAction); this._analysis.set_coverageArea(bounds); this._analysis.build(); this._sceneControl.get_scene().get_trackingLayer3D().removeAll(); } }, onMouseMove: function (e) { if (isDrawing && point3D != null) { var pnt1 = point3D; var pt = new SuperMap.Pixel(e.get_clientX(), e.get_clientY()); var tempPoint = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel); var pnt3 = new SuperMap.Web.Core.Point3D(e.get_longitude(), e.get_latitude(), 0); var pnt2 = new SuperMap.Web.Core.Point3D(pnt1.x, pnt3.y, 0); var pnt4 = new SuperMap.Web.Core.Point3D(pnt3.x, pnt1.y, 0); var pnt3Ds = new SuperMap.Web.Core.Point3Ds(); pnt3Ds.add(pnt1); pnt3Ds.add(pnt2); pnt3Ds.add(pnt3); pnt3Ds.add(pnt4); var geoRegion = new SuperMap.Web.Core.GeoRegion3D(); geoRegion.addPart(pnt3Ds); var feature = new SuperMap.Web.Core.Feature3D(); feature.set_geometry(geoRegion); bounds = geoRegion.get_bounds(); var style = new SuperMap.Web.Core.Style3D(); style.set_fillForeColor(new SuperMap.Web.Core.Color(255, 0, 0, 180)); style.set_lineColor(new SuperMap.Web.Core.Color(0, 0, 255, 100)); style.set_lineWidth(1); /*style.set_altitudeMode(3);*/ feature.set_style3D(style); this._sceneControl.get_scene().get_trackingLayer3D().removeAll(); //删除跟踪图层上的图像 this._sceneControl.get_scene().get_trackingLayer3D().add(feature, "region"); this._sceneControl.get_scene().get_trackingLayer3D().refresh(); } } }; SuperMap.Web.UI.Action3Ds.MyAction.registerClass('SuperMap.Web.UI.Action3Ds.MyAction', SuperMap.Web.UI.Action3Ds.SceneAction, Sys.IDisposable); /**************************** 绘制矩形 end ****************************/ function changeSlopDisplay() { var displayOption = document.getElementById("slopDisplay"); var proValue = displayOption.options[displayOption.selectedIndex].value; switch (proValue) { case "arrow": slopDisplay = SuperMap.Web.Realspace.SlopeDisplayStyle.ARROW; break; case "color": slopDisplay = SuperMap.Web.Realspace.SlopeDisplayStyle.COLORS; break; case "arrow_color": slopDisplay = SuperMap.Web.Realspace.SlopeDisplayStyle.ARROW_AND_COLORS; break; default : break; } slopMap.set_displayStyle(slopDisplay); } function changeContourDisplay() { var displayOption = document.getElementById("contourDisplay"); var proValue = displayOption.options[displayOption.selectedIndex].value; switch (proValue) { case "line": contourDisplay = SuperMap.Web.Realspace.ContourDisplayStyle.LINES; break; case "color": contourDisplay = SuperMap.Web.Realspace.ContourDisplayStyle.COLORS; break; case "line_color": contourDisplay = SuperMap.Web.Realspace.ContourDisplayStyle.LINES_AND_COLORS; break; default : break; } contourMap.set_displayStyle(contourDisplay); } function changeOpacity(idName,num){ dOpacity = Number(document.getElementById(idName).value); if(num == 0){ slopMap.set_opacity(dOpacity); }else if(num ==1){ contourMap.set_opacity(dOpacity); } } function setContourInterval(){ var num = Number(document.getElementById("contourinterval").value); contourMap.set_interval(num); } </script> </head> <body onload="onPageLoad()"> <div id="analy" style="position:absolute;left:10px;top:5px;bottom:5px;width:220px; border:2px solid #cfcfcf;"> <label style="position:absolute;left:5px;top:25px;bottom:5px;width:220px;text-align: center">坡度、坡向提取</label> <div> <div style="position:absolute;left:8px;top:60px;width:200px;height:190px;vertical-align: middle;text-align:center;border:1px solid #cfcfcf"> <br/> <label style="vertical-align:top">显示模式 :</label> <select id="slopDisplay" onchange="changeSlopDisplay()"> <option value="arrow">坡向</option> <option value="color">坡度</option> <option value="arrow_color">坡向和坡度</option> </select><br /><br /> 显示区域 : <select id="areaType"> <option value="绘制区域">绘 制 区 域</option> <option value="整个地形">整 个 地 形</option> </select><br /><br /> 透明度(%) : <input type="text" id="slopOpacity" style="width: 90px" value="80" onchange="changeOpacity('slopOpacity',0)"><br /><br /> <input type="button" id="slopAnalysis" style="width: 90px " value="开始提取" onclick="startSlopAnalysis()"> <input type="button" id="slopClear" style="width: 90px " value="清除结果" onclick="clearSlop()" disabled><br /><br /> </div> <label style="position:absolute;left:1px;top:280px;bottom:5px;width:220px;text-align: center">等值线提取</label> <div style="position:absolute;left:8px;text-align:center;top:310px;width:200px; height:230px;border:1px solid #cfcfcf"> <br/> <label style="vertical-align:top"> 显示模式 :</label> <select id="contourDisplay" style="width: 90px" onchange="changeContourDisplay()"> <option value="line">等值线</option> <option value="color">颜色</option> <option value="line_color">等值线和颜色</option> </select><br /><br /> 显示区域 : <select id="areaType2"> <option value="绘制区域">绘 制 区 域</option> <option value="整个地形">整 个 地 形</option> </select><br /><br /> 等值线间隔: <input id="contourinterval" type="text" style="width: 90px" value="100" onChange="setContourInterval()"><br /><br /> 透明度 (%): <input id="contourOpacity" type="text" style="width: 90px" value="80" onchange="changeOpacity('contourOpacity',1)"><br /><br /> <input type="button" id="contourAnalysis" style="width: 90px " value="开始分析" onclick="startContourAnalysis()"> <input type="button" id="contourClear" style="width: 90px " value="清除结果" onclick="clearContour()" disabled><br /><br /> </div> </div> </div> <div id="sceneControlDiv" style="position:absolute;top:5px;left:255px;bottom:5px;right:5px;border:3px solid #cfcfcf"> </div> </body> </html>