运行范例

描述

该范例展示如何将图片投放到三维场景中。

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

代码 (文件格式为 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 sceneControl = null;
    	      var scene = null;
    	      var htmlUrl = document.location.host;
    				var projectionImage = 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() { //获取Realspace控件的场景,控件和场景是一对一的捆绑关系 scene = sceneControl.get_scene(); //打开场景 scene.open(sceneUrl, "scene_olympicgreen"); //创建分析对象 projectionImage = new SuperMap.Web.Realspace.ProjectionImage(scene); } //控件初始化失败后的回调函数 function failedCallback() { alert("Realspace initialized failed!"); } function analysis() { sceneControl.set_sceneAction(null); var newAction = new SuperMap.Web.UI.Action3Ds.ProjectionImageAction(sceneControl,projectionImage); sceneControl.set_sceneAction(newAction); } SuperMap.Web.UI.Action3Ds.ProjectionImageAction = function(sceneControl, projectionImage) { SuperMap.Web.UI.Action3Ds.ProjectionImageAction.initializeBase(this); this._name = "ProjectionImageAction"; this._sceneControl = sceneControl; this._projectionImage = projectionImage; this._point = null; this._type = SuperMap.Web.UI.Action3Ds.SceneActionType.POINTSELECT; this._projectionImage.setImage(document.getElementById("ImageAddress").value); }; SuperMap.Web.UI.Action3Ds.ProjectionImageAction.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; this._projectionImage.set_position(tmpPoint); this._projectionImage.set_hintLineVisible(true); this._projectionImage.build(); }else { this._point = null; var panAction = new SuperMap.Web.UI.Action3Ds.Pan(sceneControl); sceneControl.set_sceneAction(panAction); } } }, 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._projectionImage.setDirectionByPoint(this._point); } } }; SuperMap.Web.UI.Action3Ds.ProjectionImageAction.registerClass('SuperMap.Web.UI.Action3Ds.ProjectionImageAction', SuperMap.Web.UI.Action3Ds.SceneAction, Sys.IDisposable); </script> </head> <body onLoad="onPageLoad()"> <div style="position:absolute;top:2px;left:5px;"> <span>图片网络地址:</span> <input id="ImageAddress" name="ImageAddress" type="text" value="http://localhost:8090/RealspaceSample/iClient.png" /> <button onclick="analysis()">投放图片</button> </div> <div id="sceneControlDiv" style="position:absolute;top:30px;bottom:5px;left:5px;right:5px;"> </div> </body> </html>