FlexViewer调用Google Map为底图详细步骤

 

用ArcGIS Server Flex API调用Google Map的地图数据，原理是通过访问Google Map地图服务的切片数据，重载ArcGIS Server Felx API的TiledMapServiceLayer接口类，实现了对于Googlemap影像切片数据、道路等POI切片数据、矢量切片数据以及地形数据的接入。

1．重载TiledMapServiceLayer接口类实现google地图的加载

本例中将该类放在放到了src/com/esri/viewer目录下。

View Code 
  1 package com.esri.viewer
  2 {
  3     import com.esri.ags.SpatialReference;
  4     import com.esri.ags.geometry.Extent;
  5     import com.esri.ags.geometry.MapPoint;
  6     import com.esri.ags.layers.TiledMapServiceLayer;
  7     import com.esri.ags.layers.supportClasses.LOD;
  8     import com.esri.ags.layers.supportClasses.TileInfo;
  9     
 10     import flash.net.URLRequest;
 11     
 12     //扩展TiledMapServiceLayer图层实现加载google地图
 13     public class GoogleMapLayer extends TiledMapServiceLayer
 14     {
 15         private var _tileInfo:TileInfo=new TileInfo();
 16         private var _baseURL:String="";
 17         public var mapStyle:String=""; 
 18         
 19         public function GoogleMapLayer()
 20         {
 21             super();
 22             buildTileInfo();
 23             setLoaded(true);
 24         }
 25         
 26         override public function get fullExtent():Extent
 27         {
 28             return new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, new SpatialReference(102113));
 29         }
 30         
 31         override public function get initialExtent():Extent
 32         {
 33             return new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, new SpatialReference(102113));
 34         }
 35         
 36         override public function get spatialReference():SpatialReference
 37         {
 38             return new SpatialReference(102113);
 39         }
 40         
 41         override public function get tileInfo():TileInfo
 42         {
 43             return _tileInfo;
 44         }
 45         
 46         //获取矢量地图
 47         override protected function getTileURL(level:Number, row:Number, col:Number):URLRequest
 48         {            
 49             var s:String = "Galileo".substring(0, ((3 * x + y) % 8)); 
 50             var url:String; 
 51             
 52             //获取矢量地图             
 53             if(mapStyle == "Vector")                 
 54             {                 
 55                 url = "http://mt"+(col%4)+".google.cn/vt/lyrs=m@158000000&hl=zh-CN&gl=cn&" +                     
 56                     "x=" + col + "&" +                     
 57                     "y=" + row + "&" +                 
 58                     "z=" + level+ "&" +                 
 59                     "s=" + s;                 
 60             }                 
 61                 
 62             //获取地形图
 63             else if(mapStyle == "Terrain")                 
 64             {                 
 65                 url = "http://mt"+(col%4)+".google.cn/vt/lyrs=t@128,r@177000000&hl=zh-CN&gl=cn&" +                     
 66                     "x=" + col + "&" +                     
 67                     "y=" + row + "&" +                     
 68                     "z=" + level+ "&" +                     
 69                     "s=" + s; 
 70             }
 71                 
 72             //获取影像地图
 73             else if(mapStyle == "Image")                 
 74             {                 
 75                 url = "http://mt"+(col%4)+".google.cn/vt/lyrs=s@101&hl=zh-CN&gl=cn&" +                     
 76                     "x=" + col + "&" +                     
 77                     "y=" + row + "&" +                     
 78                     "z=" + level+ "&" +                     
 79                     "s=" + s;                 
 80             } 
 81                 
 82             //获取道路等POI，和影像地图配合使用     
 83             else if(mapStyle == "POI")            
 84             {                 
 85                 url = "http://mt"+(col%4)+".google.cn/vt/imgtp=png32&lyrs=h@169000000&hl=zh-CN&gl=cn&" +                     
 86                     "x=" + col + "&" +                     
 87                     "y=" + row + "&" +                     
 88                     "z=" + level+ "&" +                     
 89                     "s=" + s;                 
 90             } 
 91             
 92             return new URLRequest(url);
 93         }
 94         
 95         private function buildTileInfo():void
 96         {
 97             _tileInfo.height=256;
 98             _tileInfo.width=256;
 99             _tileInfo.origin=new MapPoint(-20037508.342787, 20037508.342787);
100             _tileInfo.spatialReference=new SpatialReference(102113);
101             _tileInfo.lods = [
102                 new LOD(0, 156543.033928, 591657527.591555), 
103                 new LOD(1, 78271.5169639999, 295828763.795777), 
104                 new LOD(2, 39135.7584820001, 147914381.897889), 
105                 new LOD(3, 19567.8792409999, 73957190.948944), 
106                 new LOD(4, 9783.93962049996, 36978595.474472), 
107                 new LOD(5, 4891.96981024998, 18489297.737236), 
108                 new LOD(6, 2445.98490512499, 9244648.868618), 
109                 new LOD(7, 1222.99245256249, 4622324.434309), 
110                 new LOD(8, 611.49622628138, 2311162.217155), 
111                 new LOD(9, 305.748113140558, 1155581.108577), 
112                 new LOD(10, 152.874056570411, 577790.554289), 
113                 new LOD(11, 76.4370282850732, 288895.277144), 
114                 new LOD(12, 38.2185141425366, 144447.638572), 
115                 new LOD(13, 19.1092570712683, 72223.819286), 
116                 new LOD(14, 9.55462853563415, 36111.909643), 
117                 new LOD(15, 4.77731426794937, 18055.954822),
118                 new LOD(16, 2.38865713397468, 9027.977411), 
119                 new LOD(17, 1.19432856685505, 4513.988705), 
120                 new LOD(18, 0.597164283559817, 2256.994353),
121                 new LOD(19, 0.298582141647617, 1128.497176)
122             ];
123         }
124     }
125     
126 }

2. 在MapManager.mxml文件中引入GoogleMapLayer

View Code 
1 import com.esri.viewer.GoogleMapLayer;

3. 在MapManager.mxml文件的添加对图类型的判断

在MapManager.mxml文件的addLayerToMap函数的"swicth...case"语句中添加以下代码：

View Code 
 1 case "googlemap":
 2                     {
 3                         var googleMapLayer:GoogleMapLayer=new GoogleMapLayer();
 4                         googleMapLayer.name=label;
 5                         if (style)
 6                         {
 7                             googleMapLayer.mapStyle= style;
 8                         }
 9                         googleMapLayer.id=label;
10                         googleMapLayer.alpha=alpha;
11                         googleMapLayer.visible=visible;
12                         layerObject.layer=googleMapLayer;
13                         googleMapLayer.addEventListener(LayerEvent.LOAD_ERROR, layer_loadErrorEvent);
14                         googleMapLayer.addEventListener(LayerEvent.LOAD, layer_loadEvent);
15                         map.addLayer(googleMapLayer);
16                         break;
17                     }

 4. 在配置文件中添加googlemap底图

View Code 
1         <basemaps>
2            <layer label="GoogleMapLayer"  type="GoogleMap"  style="Terrain"   visible="true"/>
3         </basemaps>

5. 编译工程，运行

 

 

 

posted @ 2012-05-18 11:45  水石.重阳  阅读(1522)  评论(0)  编辑  收藏  举报