ArcGIS API For Flex4+Papervision3d实现3D地图浏览

在本讨论坛中见过另一个博主写过本篇相同的内容。但是其博客上只讲了大概思路,如果不是papervision3d方面比较熟的人还真难看懂。本人GIS出身,对他这篇博文颇感兴趣,因此看了多遍,但有很多地方还是没有看明白,我想过另一种办法,实现了,不过还是感谢那位仁兄,给了我不少灵感。
上图先
ArcGIS API For Flex4+Papervision3d实现3D地图浏览_第1张图片
实现原理就是将2D环境下的map control添加到3D场景中,这样,就可以对map control进行任意的旋转控制了。在这里,还没有实现对高程数据的添加,所以只是对2D平面地图的3D展示。
上代码:as文件

package com.neil.map
{
	import com.esri.ags.Map;
	import com.esri.ags.layers.ArcGISTiledMapServiceLayer;
	
	import flash.display.BlendMode;
	import flash.events.Event;
	
	import mx.core.UIComponent;
	
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	
	public class Map3D extends UIComponent
	{
		public var viewport:Viewport3D;
		private var scene:Scene3D;
		public var camera:Camera3D;
		public var plane:Plane;
		private var renderer:BasicRenderEngine;
		
		
		public function Map3D()
		{
			super();
			init();
		}
		
		public function init():void{
			viewport=new Viewport3D();
			addChild(viewport);
			scene=new Scene3D();
			camera=new Camera3D();
			/*camera.focus = 10;
			camera.zoom = 100;*/
			renderer=new BasicRenderEngine();
			
			var map:Map=new Map();
			var layer:ArcGISTiledMapServiceLayer=new ArcGISTiledMapServiceLayer();
			layer.url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
			map.width=1280;
			map.height=1024;
			map.addLayer(layer);
			addChild(map);
			map.includeInLayout=false;
			map.blendMode=BlendMode.ERASE;
			
			var material:MovieMaterial=new MovieMaterial(map,true,true,true);
			material.interactive=true;
			material.doubleSided=true;
			material.smooth=true;
			
			plane=new Plane(material,map.width,map.height,20,20);
			scene.addChild(plane);
			
			addEventListener(Event.ENTER_FRAME, process);
		}
		private function process(evt:Event):void{
			//plane.yaw(2);
			plane.rotationY=0;
			plane.rotationX=65;//角度
			plane.rotationZ=0;
			renderer.renderScene(scene,camera,viewport);
		}
	}
}

mxml文件:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:map="com.neil.map.*" backgroundColor="0x000000">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.neil.map.Map3D;
			
			private function addX():void{
				map.camera.x=map.camera.x+10;
			}
			private function addY():void{
				map.camera.y=map.camera.y-10;
			}
			private function addZ():void{
				map.camera.z=map.camera.z-10;
			}
			private function addfov():void{
				map.camera.fov=map.camera.fov-10;
			}
			private function addzoom():void{
				map.camera.zoom=map.camera.zoom+10;
			}
			private function addfouce():void{
				map.camera.focus=map.camera.focus+10;
			}
			private function addview():void{
				map.viewport.width=map.viewport.width+50;
				map.viewport.height=map.viewport.height+50;
			}
			private function addfar():void{
				map.camera.far++;
			}
			private function addnear():void{
				map.camera.near=map.camera.near+10;
			}
			private function rotationxa():void{
				map.plane.rotationX=map.plane.rotationX+5;
			}
			private function rotationya():void{
				map.plane.rotationY=map.plane.rotationY+5;
			}
			private function rotationza():void{
				map.plane.rotationZ=map.plane.rotationZ+5;
			}
		]]>
	</fx:Script>
	<map:Map3D id="map"/>
	<s:Button id="rox" label="x轴" click="addX()"/>
	<s:Button id="roy" label="y轴" click="addY()" x="0" y="29"/>
	<s:Button id="roz" label="Z轴" click="addZ()" x="81" y="29"/>
	<s:Button id="fov" label="fov" click="addfov()" x="159" y="0"/>
	<s:Button id="zoom" label="zoom" click="addzoom()" x="81" y="0"/>
	<s:Button id="fouce" label="fouce" click="addfouce()" x="3" y="59"/>
	<s:Button id="viewport" label="viewport" click="addview()" x="159" y="29"/>
	<s:Button id="far" label="far" click="addfar()" x="159" y="59"/>
	<s:Button id="near" label="near" click="addnear()" x="81" y="59"/>
	<s:Button id="rotationx" label="rotationx" click="rotationxa()" x="158" y="88"/>
	<s:Button id="rotationy" label="rotationy" click="rotationya()" x="80" y="88"/>
	<s:Button id="rotationz" label="rotationz" click="rotationza()" x="-2" y="88"/>
</s:Application>

这样,就可以对map control进行任意旋转了。


你可能感兴趣的:(function,api,Flex,application,library,button)