运行范例

描述

该范例展示如何设置地理坐标、高度以及飞行模式进行飞行,飞行本质上是视点的移动,

通过给定飞行时间以及飞行模式,可以模拟现实中的许多移动现象。

代码 (文件格式为 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 scene = null;
			var sceneControl = null;
			var htmlUrl = document.location.host;
			//判断网页的打开方式是本地打开还是通过网络打开
			//不同的打开方式url赋值不同
			if(htmlUrl == "")
			{
				htmlUrl = "http://localhost:8090";
			}
			else
			{
				htmlUrl = "http://" + htmlUrl;
			}
			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("<a href='"+url+"'>未检测到 SuperMap iClient3D for  Plugin 插件,请单击此处下载并安装插件。</a>");
						return;
					}
					//若使用非IE浏览器,则抛出该异常
					else if (e.name == SuperMap.Web.Realspace.ExceptionName.BrowserNotSupport) 
					{
						document.write("<p>SuperMap iClient3D for  Plugin 目前仅支持 InternetExplorer 浏览器,请更换浏览器后重新尝试加载本页面。</p>");
						return;
					}
					//抛出其他异常
					else
					{
						alert(e.message);
					}
				}						
			}

			//控件初始化完成后的回调函数,初始化完成之后才能进行数据加载
			function initCallback() 
			{
				//获取Realspace控件的场景,控件和场景是一对一的捆绑关系
				scene = sceneControl.get_scene();
			}

			//控件初始化失败后的回调函数
			function failedCallback() 
			{
				alert("Realspace initialized failed!");
			}
			function fly() 
			{ 
				//从页面获取相机的经纬度和高程值
				var longitude = document.getElementById("longitude").value;
				var latitude = document.getElementById("latitude").value;
				var altitude = document.getElementById("altitude").value;
				
				//从页面获取飞行的时间
				var time = document.getElementById("flyTime").value;
				time *= 1000;
                
				//设置飞行的类型
				var modeList = document.getElementById("flyMode");
				var mode = null;
				for(var i=0; i<modeList.length; i++)
				{
					if (modeList.options[i].selected == true)
					{
						mode = modeList.options[i].value;         
					}
				}
                
				//新建相机对象
				var camera = new SuperMap.Web.Realspace.Camera(longitude, latitude,altitude);
                
				//调用飞行操作器进行飞行
				scene.get_flyingOperator().flyTo(camera,time,mode);
			}
		</script>
	</head>

	<body onLoad="onPageLoad()">  	
		<div id="flyWindow" style="position:absolute;top:5px;float:left">
		<!--通过设定经纬度和相机高度进行飞行-->	
		<label for="longitude" >经度</label> 
		<input id="longitude" name="longitude" type="text" value="0" />度 
		<label for="latitude" >纬度</label> 
		<input id="latitude" name="latitude" type="text" value="0"/>度
		<label for="altitude" >高程</label> 
		<input id="altitude" name="altitude" type="text" value="50000" />米
		<br />
		<label for="flyTime">时间 </label>
		<input id="flyTime" name="flyTime" type="text" value="2" />秒
		<label for="flyMode" >飞行模式 </label> 
		<select id="flyMode" name="flyMode" >
		<option id="1" value="1">直接跳转</option>
		<option id="2" value="6" selected="selected">常规飞行</option>
		<option id="3" value="7">直接飞行</option>
		</select>
		<input id="fly" type="button" value="飞行" onClick="fly()" />
		</div>
		<div id="sceneControlDiv" style="position:absolute;top:60px;bottom:5px;left:5px;right:5px;float:left">
		</div>
	</body>
</html>