Flex4 + ArcgisAPI + papervision3d实现三维展现

  

 

效果图

实现原理就是将2D环境下的map control添加到3D场景中，这样，就可以对map control进行任意的旋转控制了。在这里，还没有实现对高程数据的添加，所以只是对2D平面地图的3D展示。
上代码：as文件

[html] view plain copy print ?

1. package com.neil.map  
2. {  
3.     import com.esri.ags.Map;  
4.     import com.esri.ags.layers.ArcGISTiledMapServiceLayer;  
5.       
6.     import flash.display.BlendMode;  
7.     import flash.events.Event;  
8.       
9.     import mx.core.UIComponent;  
10.       
11.     import org.papervision3d.cameras.Camera3D;  
12.     import org.papervision3d.materials.MovieMaterial;  
13.     import org.papervision3d.objects.primitives.Plane;  
14.     import org.papervision3d.render.BasicRenderEngine;  
15.     import org.papervision3d.scenes.Scene3D;  
16.     import org.papervision3d.view.Viewport3D;  
17.       
18.     public class Map3D extends UIComponent  
19.     {  
20.         public var viewport:Viewport3D;  
21.         private var scene:Scene3D;  
22.         public var camera:Camera3D;  
23.         public var plane:Plane;  
24.         private var renderer:BasicRenderEngine;  
25.           
26.           
27.         public function Map3D()  
28.         {  
29.             super();  
30.             init();  
31.         }  
32.           
33.         public function init():void{  
34.             viewport=new Viewport3D();  
35.             addChild(viewport);  
36.             scene=new Scene3D();  
37.             camera=new Camera3D();  
38.             /*camera.focus = 10;  
39.             camera.zoom = 100;*/  
40.             renderer=new BasicRenderEngine();  
41.               
42.             var map:Map=new Map();  
43.             var layer:ArcGISTiledMapServiceLayer=new ArcGISTiledMapServiceLayer();  
44.             layer.url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";  
45.             map.width=1280;  
46.             map.height=1024;  
47.             map.addLayer(layer);  
48.             addChild(map);  
49.             map.includeInLayout=false;  
50.             map.blendMode=BlendMode.ERASE;  
51.               
52.             var material:MovieMaterial=new MovieMaterial(map,true,true,true);  
53.             material.interactive=true;  
54.             material.doubleSided=true;  
55.             material.smooth=true;  
56.               
57.             plane=new Plane(material,map.width,map.height,20,20);  
58.             scene.addChild(plane);  
59.               
60.             addEventListener(Event.ENTER_FRAME, process);  
61.         }  
62.         private function process(evt:Event):void{  
63.             //plane.yaw(2);  
64.             plane.rotationY=0;  
65.             plane.rotationX=65;//角度  
66.             plane.rotationZ=0;  
67.             renderer.renderScene(scene,camera,viewport);  
68.         }  
69.     }  
70. }  

mxml文件：

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                xmlns:s="library://ns.adobe.com/flex/spark"   
4.                xmlns:mx="library://ns.adobe.com/flex/mx"   
5.                xmlns:map="com.neil.map.*" backgroundColor="0x000000">  
6.     <fx:Declarations>  
7.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
8.     </fx:Declarations>  
9.     <fx:Script>  
10.         <![CDATA[ 
11.             import com.neil.map.Map3D; 
12.              
13.             private function addX():void{ 
14.                 map.camera.x=map.camera.x+10; 
15.             } 
16.             private function addY():void{ 
17.                 map.camera.y=map.camera.y-10; 
18.             } 
19.             private function addZ():void{ 
20.                 map.camera.z=map.camera.z-10; 
21.             } 
22.             private function addfov():void{ 
23.                 map.camera.fov=map.camera.fov-10; 
24.             } 
25.             private function addzoom():void{ 
26.                 map.camera.zoom=map.camera.zoom+10; 
27.             } 
28.             private function addfouce():void{ 
29.                 map.camera.focus=map.camera.focus+10; 
30.             } 
31.             private function addview():void{ 
32.                 map.viewport.width=map.viewport.width+50; 
33.                 map.viewport.height=map.viewport.height+50; 
34.             } 
35.             private function addfar():void{ 
36.                 map.camera.far++; 
37.             } 
38.             private function addnear():void{ 
39.                 map.camera.near=map.camera.near+10; 
40.             } 
41.             private function rotationxa():void{ 
42.                 map.plane.rotationX=map.plane.rotationX+5; 
43.             } 
44.             private function rotationya():void{ 
45.                 map.plane.rotationY=map.plane.rotationY+5; 
46.             } 
47.             private function rotationza():void{ 
48.                 map.plane.rotationZ=map.plane.rotationZ+5; 
49.             } 
50.         ]]>  
51.     </fx:Script>  
52.     <map:Map3D id="map"/>  
53.     <s:Button id="rox" label="x轴" click="addX()"/>  
54.     <s:Button id="roy" label="y轴" click="addY()" x="0" y="29"/>  
55.     <s:Button id="roz" label="Z轴" click="addZ()" x="81" y="29"/>  
56.     <s:Button id="fov" label="fov" click="addfov()" x="159" y="0"/>  
57.     <s:Button id="zoom" label="zoom" click="addzoom()" x="81" y="0"/>  
58.     <s:Button id="fouce" label="fouce" click="addfouce()" x="3" y="59"/>  
59.     <s:Button id="viewport" label="viewport" click="addview()" x="159" y="29"/>  
60.     <s:Button id="far" label="far" click="addfar()" x="159" y="59"/>  
61.     <s:Button id="near" label="near" click="addnear()" x="81" y="59"/>  
62.     <s:Button id="rotationx" label="rotationx" click="rotationxa()" x="158" y="88"/>  
63.     <s:Button id="rotationy" label="rotationy" click="rotationya()" x="80" y="88"/>  
64.     <s:Button id="rotationz" label="rotationz" click="rotationza()" x="-2" y="88"/>  
65. </s:Application>  

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