ArcGIS Viewer for Flex中引入google map作底圖

　　

　　在ArcGIS Viewer for Flex開發中，經常需要用到google map作為底圖，我們不能通過ArcGIS Viewer for Flex - Application Builder輕易的引入google map 作為底圖，需要通過程序重寫TiledMapServiceLayer來擴展從而加載google map。

　　

 

　　這里有寫好的GoogleMapLayer.as文件：

package com.esri.viewer
{
    import com.esri.ags.SpatialReference;
    import com.esri.ags.geometry.Extent;
    import com.esri.ags.geometry.MapPoint;
    import com.esri.ags.layers.TiledMapServiceLayer;
    import com.esri.ags.layers.supportClasses.LOD;
    import com.esri.ags.layers.supportClasses.TileInfo;
    
    import flash.net.URLRequest;
    
    //擴展TiledMapServiceLayer圖層實現加載google地圖
    public class GoogleMapLayer extends TiledMapServiceLayer
    {
        private var _tileInfo:TileInfo=new TileInfo();
        private var _baseURL:String="";
        public var mapStyle:String=""; 
        
        public function GoogleMapLayer()
        {
            super();
            buildTileInfo();
            setLoaded(true);
        }
        
        override public function get fullExtent():Extent
        {
            return new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, new SpatialReference(102113));
        }
        
        override public function get initialExtent():Extent
        {
            return new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, new SpatialReference(102113));
        }
        
        override public function get spatialReference():SpatialReference
        {
            return new SpatialReference(102113);
        }
        
        override public function get tileInfo():TileInfo
        {
            return _tileInfo;
        }
        
        //獲取矢量地圖
        override protected function getTileURL(level:Number, row:Number, col:Number):URLRequest
        {            
            var s:String = "Galileo".substring(0, ((3 * x + y) % 8)); 
            var url:String; 
            
            //獲取矢量地圖             
            if(mapStyle == "Vector")                 
            {                 
                url = "http://mt"+(col%4)+".google.com/vt/lyrs=m@158000000&hl=zh-CN&gl=cn&" +                     
                    "x=" + col + "&" +                     
                    "y=" + row + "&" +                 
                    "z=" + level+ "&" +                 
                    "s=" + s;                 
            }                 
                
                //獲取地形圖
            else if(mapStyle == "Terrain")                 
            {                 
                url = "http://mt"+(col%4)+".google.cn/vt/lyrs=t@131,r@227000000&hl=zh-CN&gl=cn&" +                     
                    "x=" + col + "&" +                     
                    "y=" + row + "&" +                     
                    "z=" + level+ "&" +                     
                    "s=" + s; 
            }
                
                //獲取影像地圖
            else if(mapStyle == "Image")                 
            {                 
                url = "http://mt"+(col%4)+".google.com/vt/lyrs=s&hl=en&gl=en&" +                     
                    "x=" + col + "&" +                     
                    "y=" + row + "&" +                     
                    "z=" + level+ "&" +                     
                    "s=" + s;
            } 
                
                //獲取道路等POI，和影像地圖配合使用     
            else if(mapStyle == "POI")            
            {                 
                url = "http://mt"+(col%4)+".google.com/vt/imgtp=png32&lyrs=h@169000000&hl=zh-CN&gl=cn&" +                     
                    "x=" + col + "&" +                     
                    "y=" + row + "&" +                     
                    "z=" + level+ "&" +                     
                    "s=" + s;                 
            } 
            
            return new URLRequest(url);
        }
        
        private function buildTileInfo():void
        {
            _tileInfo.height=256;
            _tileInfo.width=256;
            _tileInfo.origin=new MapPoint(-20037508.342787, 20037508.342787);
            _tileInfo.spatialReference=new SpatialReference(102113);
            _tileInfo.lods = [
                new LOD(0, 156543.033928, 591657527.591555), 
                new LOD(1, 78271.5169639999, 295828763.795777), 
                new LOD(2, 39135.7584820001, 147914381.897889), 
                new LOD(3, 19567.8792409999, 73957190.948944), 
                new LOD(4, 9783.93962049996, 36978595.474472), 
                new LOD(5, 4891.96981024998, 18489297.737236), 
                new LOD(6, 2445.98490512499, 9244648.868618), 
                new LOD(7, 1222.99245256249, 4622324.434309), 
                new LOD(8, 611.49622628138, 2311162.217155), 
                new LOD(9, 305.748113140558, 1155581.108577), 
                new LOD(10, 152.874056570411, 577790.554289), 
                new LOD(11, 76.4370282850732, 288895.277144), 
                new LOD(12, 38.2185141425366, 144447.638572), 
                new LOD(13, 19.1092570712683, 72223.819286), 
                new LOD(14, 9.55462853563415, 36111.909643), 
                new LOD(15, 4.77731426794937, 18055.954822),
                new LOD(16, 2.38865713397468, 9027.977411), 
                new LOD(17, 1.19432856685505, 4513.988705), 
                new LOD(18, 0.597164283559817, 2256.994353),
                new LOD(19, 0.298582141647617, 1128.497176)
            ];
        }
    }
}

　　

　　具體步驟如下：

　　第一步：將文件GoogleMapLayer.as放到com.esri.viewer包下

　　

　　

　　第二步：在MapManager.mxml文件中：

　　（1）引入包com.esri.viewer.GoogleMapLayer。

　　

　　（2）在addLayerToMap函數中添加：

　　

 

　　第三步：在LayerCreator.as文件中：

　　（1）引入包com.esri.viewer.GoogleMapLayer：

　　

　　（2）在createLayer函數中添加：

else if (layerType == "googlemap")
{
    return createGoogleLayer(layerCreationProperties);
}

　　（3）添加函數createGoogleLayer：　　

　　private static function createGoogleLayer(layerCreationProperties:LayerCreationProperties):GoogleMapLayer
    {
        var googleLayer:GoogleMapLayer=new GoogleMapLayer();
        googleLayer.name=layerCreationProperties.label;
        if (layerCreationProperties.style)
        {
            googleLayer.mapStyle= layerCreationProperties.style;
        }
        googleLayer.id=layerCreationProperties.label;
        googleLayer.alpha=layerCreationProperties.alpha;
        googleLayer.visible=layerCreationProperties.visible;
        
        return googleLayer;
    }

 

　　第四步：在config.xml配置文件中添加basemaps：　

<basemaps>
     <layer label="GoogleMapLayer"  type="GoogleMap" icon="assets/images/birds.png"  style="Terrain" visible="true"/>
</basemaps>

 

　　運行結果：