你是否想让自己的地图以三维的形式展示出来呢？在三维下查看QQ地图、Bing地图、MapABC地图或者自己的地图是否有不一样的感觉呢？今天我们就来看看如果使用FGMap API来实现这个功能。
上次我们做了一个天气预报的示例，今天我们在三维地图上查看，运行界面如下：
看起来好像还不错，当然我们也可以飞行来查看这些天气变化的情况，请点击“飞行浏览”按钮。
再来看看我们的代码：
<?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" minWidth="800" minHeight="600"xmlns:maps="com.fgmap.maps.*"><fx:Declarations></fx:Declarations><fx:Style>TitleWindow{roundedBottomCorners: false;borderAlpha: 0.7;backgroundAlpha: 0.7;dropShadowEnabled: true;borderColor: #9CA299;} </fx:Style><fx:Script><![CDATA[import com.fgmap.demo.CityData;import com.fgmap.maps.InfoWindowOptions;import com.fgmap.maps.LatLng;import com.fgmap.maps.LatLngBounds;import com.fgmap.maps.Map;import com.fgmap.maps.MapEvent;import com.fgmap.maps.MapMouseEvent;import com.fgmap.maps.MapMoveEvent;import com.fgmap.maps.MapOptions;import com.fgmap.maps.MapType;import com.fgmap.maps.View;import com.fgmap.maps.controls.MapTypeControl;import com.fgmap.maps.controls.NavigationControl;import com.fgmap.maps.geom.Attitude;import com.fgmap.maps.interfaces.ICamera;import com.fgmap.maps.interfaces.IMapType;import com.fgmap.maps.overlays.Marker;import com.fgmap.maps.overlays.MarkerOptions;import com.fgmap.maps.styles.FillStyle;import com.fgmap.model.CityDataVo;import local.wx.*;import mx.collections.ArrayCollection;import mx.containers.Canvas;import mx.events.FlexEvent;import mx.printing.*;[Bindable]private var mapTypes:Array;private var currentMapType:Number;private var myICamera : ICamera;private var marker : Marker; [Bindable]private var MapColours:ArrayCollection = new ArrayCollection([{label:"Grayscale"},{label:"Colour"}]);private function map_onMapPreInitialize() : void {map.setInitOptions(new MapOptions({viewMode : View.VIEWMODE_PERSPECTIVE,attitude : new Attitude(0, 0, 0)})); } private function map_onMapReady() : void {intMapType();map.addEventListener(MapEvent.TILES_LOADED_PENDING, tilesLoading);map.addEventListener(MapEvent.TILES_LOADED, tilesLoaded);map.enableScrollWheelZoom();map.enableContinuousZoom();doBWMap(map, false);map.setCenter(new LatLng(30.35,114.17), 5);map.addControl(new NavigationControl());map.addControl(new MapTypeControl());for each(var cityVo:CityDataVo in CityData.Capital) {var weatherType:String = CityData.WeatherType[int(Math.random() * 11)]createWXMarker(cityVo.latlng,weatherType);}map.flyTo(new LatLng(30.35,114.17), 5, new Attitude(35, 45, 0), 3); } private function tilesLoading(event:MapEvent):void{ lblLoading.setStyle("color", "0xFF0000");lblLoading.text = "Mapping tiles are loading...";lblLoading.validateNow();}private function tilesLoaded(event:MapEvent):void{lblLoading.setStyle("color", "0x00FF00");lblLoading.text = "Mapping tiles are loaded";lblLoading.validateNow(); }public function createWXMarker(latlng:LatLng, type:String): void {var options:MarkerOptions;if (type == "Cloudy"){options = new MarkerOptions({icon: new local.wx.Cloudy(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER}); }else if (type == "Partly Cloudy"){options = new MarkerOptions({icon: new local.wx.PartlyCloudy(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER});}else if (type == "Fog Black"){options = new MarkerOptions({icon: new local.wx.FogBlack(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER});}else if (type == "Fog White"){options = new MarkerOptions({icon: new local.wx.FogWhite(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER});}else if (type == "Hail"){options = new MarkerOptions({icon: new local.wx.Hail(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER});}else if (type == "Heavy Rain"){options = new MarkerOptions({icon: new local.wx.HeavyRain(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER});}else if (type == "Light Rain"){options = new MarkerOptions({icon: new local.wx.LightRain(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER});}else if (type == "Lightning"){options = new MarkerOptions({icon: new local.wx.Lightning(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER});}else if (type == "Sleet"){options = new MarkerOptions({icon: new local.wx.Sleet(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER});}else if (type == "Snow"){options = new MarkerOptions({icon: new local.wx.Snow(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER});}else if (type == "Sunny"){options = new MarkerOptions({icon: new local.wx.Sunny(), draggable: false,clickable: false, gravity: 2, distanceScaling: true, iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER});} var markerLocal:Marker = new Marker(latlng, options);map.addOverlay(markerLocal);} private function doBWMap(myMap:Map, doBW:Boolean):void {var s1:Sprite = map.getChildAt(1) as Sprite;var targetObject:Sprite = s1.getChildAt(0) as Sprite;var matrix:Array = new Array();if (doBW){// Black & White Objectmatrix = matrix.concat([0.36577734829179775,0.6012741339631636,0.14454173149981608,0,0]); // redmatrix = matrix.concat([0.34975509588844284,0.6103753117891721,0.1424311139968783,0,0]); // greenmatrix = matrix.concat([0.3484091095395311,0.6023337490798816,0.16297410831863204,0,0]); // bluematrix = matrix.concat([0,0,0,0.9,0]); // alpha//targetObject.filters = [new ColorMatrixFilter(matrix)]; }else{// Reset to colourmatrix = matrix.concat([1, 0, 0, 0, 0]); // redmatrix = matrix.concat([0, 1, 0, 0, 0]); // greenmatrix = matrix.concat([0, 0, 1, 0, 0]); // bluematrix = matrix.concat([0, 0, 0, 1, 0]); // alpha//targetObject.filters = [new ColorMatrixFilter(matrix)]; }}private function intMapType():void{mapTypes = new Array(MapType.NORMAL_MAP_TYPE, MapType.SATELLITE_MAP_TYPE, MapType.HYBRID_MAP_TYPE, MapType.PHYSICAL_MAP_TYPE);if (!currentMapType) currentMapType = 1;}private function mapTypeChangeHandler():void{//currentMapType = mapType.selectedIndex;//map.setMapType(IMapType(mapTypes[currentMapType]));}private function getMapTypeLabels(item:Object):String{return IMapType(item).getName();} private function doCanvasPrint(myMap:Map3D, myCanvas:Canvas, printBitmap:Boolean):void {var myWidth : Number;var myHeight : Number;var myScaleX : Number;var myScaleY : Number;// Record current dimensionsmyWidth = myCanvas.width;myHeight = myCanvas.height;myScaleX = myCanvas.scaleX;myScaleY = myCanvas.scaleY;var pj:PrintJob = new PrintJob();var po:PrintJobOptions = new PrintJobOptions();po.printAsBitmap = printBitmap;if (pj.start() == true) { // Scale itmyCanvas.scaleX = 0.6;myCanvas.scaleY = 0.6;myCanvas.validateNow();// Resize itmyCanvas.height = pj.pageHeight;myCanvas.width = pj.pageWidth;myCanvas.validateNow(); // Print it (do the -1 on rectangle to ensure you don't get background of canvas container, usually shown as a thin blue line)pj.addPage(myCanvas as Sprite, new Rectangle(1, 1, (myCanvas.width * (1 / myCanvas.scaleX)) - 1, (myCanvas.height * (1 / myCanvas.scaleY)) - 1), po);pj.send();// Scale it back againmyCanvas.scaleX = myScaleX;myCanvas.scaleY = myScaleY;myCanvas.validateNow();// Resize it back againmyCanvas.height = myHeight;myCanvas.width = myWidth;myCanvas.validateNow(); }} private function doTour():void{ for each(var cityVo:CityDataVo in CityData.Capital) {map.flyTo(cityVo.latlng, 7, new Attitude(35, 45, 0), 3);}}]]></fx:Script><mx:Label x="10" y="10" text="Weather Map" fontSize="12" fontWeight="bold" color="#FFFFFF"/><mx:Button label="Print..." click="doCanvasPrint(map, mapCanvas, true)" right="456" top="10" height="22" width="100"/><mx:Canvas id="mapCanvas" borderStyle="solid" borderColor="#FFFFFF" left="10" right="10" top="38" bottom="10"><maps:Map3D id="map"mapevent_mappreinitialize="map_onMapPreInitialize()" mapevent_mapready="map_onMapReady()" top="0" bottom="0" left="0" right="0"/></mx:Canvas><mx:Label color="#FF0606" id="lblLoading" right="10" textAlign="right" top="12" width="196"/><mx:Button id="btnTour" label="飞行浏览" click="doTour()" right="564" top="10" height="22" width="100"/><s:Label x="15" y="15" text="三维天气预报" fontSize="16" fontWeight="bold"/>
</s:Application>
需要代码的朋友可以这里下载：http://files.cnblogs.com/liongis/3DWeatherMap.rar
