效果图
实现原理就是将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进行任意旋转了。