运行范例

描述

该范例展示如何控制模型对象按照既定路径的移动,该示例代码包含两部分功能:

首先加载KML图层,读取运动路径,然后加载模型,并控制模型按既定路线运动。

代码 (文件格式为 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 trackingLayer = null;
			var route = null;
			var serverAddress = null;
			var layer3DServicesList = null;
			var stepTime = 80;
			var step = 1.0E-5;
			var jeepModel = null;
			var routeIndex = null;
			var position = null;
			var endPosition = null;
			var startPosition = null;
			var camera = null;
			var timer = null;
			var htmlUrl = document.location.host;
			//判断网页的打开方式是本地打开还是通过网络打开
			//不同的打开方式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("<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();
			    
				trackingLayer = scene.get_trackingLayer3D();

				serverAddress = sceneUrl;

				camera = scene.get_camera();
				
				//获取三维图层信息列表对象实例
				layer3DServicesList = sceneControl.get_layer3DServicesList();
				//从指定的服务器获取场景的图层服务信息,获取成功返回 True
				var bLoad = layer3DServicesList.load(sceneUrl, "scene");
				if(bLoad)
				{
					//添加场景
					addScene();

					//添加动画路径	
					addRoute();

					//添加汽车模型
					addModel();
				}
			}

			//控件初始化失败后的回调函数
			function failedCallback() 
			{
				alert("Realspace initialized failed!");
			}
			
			function addScene()
			{	
				var layer3DServiceInfo = layer3DServicesList.get_item("Building@OlympicGreen");
				var dataName = layer3DServiceInfo.get_dataName();
			    //新建背景图层
				var nestLayer = scene.get_layer3Ds().add(sceneUrl,"Building@OlympicGreen", dataName, SuperMap.Web.Realspace.Layer3DType.VECTOR);	
				var layer3DServiceInfo1 = layer3DServicesList.get_item("Ground@OlympicGreen");
				var dataName1 = layer3DServiceInfo.get_dataName();
			    //新建背景图层
				var nestLayer1 = scene.get_layer3Ds().add(sceneUrl,"Ground@OlympicGreen", dataName, SuperMap.Web.Realspace.Layer3DType.VECTOR);	
			}
			
			function addRoute()
			{
				var layer3DServiceInfo = layer3DServicesList.get_item("BirdNestRoad");
				var dataName = layer3DServiceInfo.get_dataName();
				//新建KML图层
				var kmlLayer = scene.get_layer3Ds().add(sceneUrl,"BirdNestRoad", dataName, SuperMap.Web.Realspace.Layer3DType.KML);		
				var routePlaceMark = kmlLayer.get_feature3Ds().findFeature3D("鸟巢道路",SuperMap.Web.Core.Feature3DSearchOption.AllFeatures).get_geometry();
				route = routePlaceMark.get_feature3D().get_geometry();
				startPosition =  route.getPart(0).get_item(0);
				position = startPosition;
				var count = route.getPart(0).get_count();
				endPosition = route.getPart(0).get_item(count - 1);
			}
			
			function addModel()
			{
				//往跟踪层添加模型,包括汽车模型
				jeepModel = new SuperMap.Web.Core.GeoModel();
				var modelurl = htmlUrl + "/RealspaceSample/jeep.zip";
				jeepModel.fromModelFile(modelurl);
				jeepModel.set_position(new SuperMap.Web.Core.Point3D(position.x, position.y, 6.50));
				var style = new SuperMap.Web.Core.Style3D();
				style.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.RELATIVE_TO_GROUND);
				style.set_bottomAltitude("3.5");

				var feature = new SuperMap.Web.Core.Feature3D();
				feature.set_geometry(jeepModel);
				feature.set_style3D(style);
				trackingLayer.add(feature,"jeep");
				camera.set_longitude(position.x);
				camera.set_latitude(position.y+0.0002);
				camera.set_altitude(40);
				camera.set_tilt(75);
				scene.get_flyingOperator().flyTo(camera); 
			}
	
			//改变地物要素的位置
			function changePosition() 
			{
				if (position.y < endPosition.y) 
				{
					position.x -= step/20;
					position.y += step;
				}
				else
				{
					position= startPosition;
				}
				jeepModel.set_position(position);
				camera.set_longitude(position.x);
				camera.set_latitude(position.y+0.0002);
				scene.set_camera(camera); 
			     
			}
			
			//启动
			function animation() 
			{
				timer = setInterval(changePosition,stepTime);
			}
			
			//停车
			function stop() 
			{
				clearInterval(timer);
			}
			
			//加速
			function accelerate() 
			{
				step *= 2;
			}
			
			//减速
			function decelerate() 
			{
				step /= 2;
			}
  
		</script>
	</head>


	<body onLoad="onPageLoad()"> 
		<div style="position:absolute;top:5px;height:25px;width:100%; float:left">
		<input id="animation" type="button" value="启动汽车" onclick="animation()">
		<input id="stop" type="button" value="停车" onclick="stop()">
		<input id="accelerate" type="button" value="加速" onclick="accelerate()">
		<input id="Button1" type="button" value="减速" onclick="decelerate()">
		</div>
		<div id="sceneControlDiv" style="position:absolute;top:30px;bottom: 5px;left: 5px;right: 5px">
		</div>
	</body>
</html>