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

最新推荐文章于 2017-12-22 08:36:12 发布

转载最新推荐文章于 2017-12-22 08:36:12 发布 · 4.8k 阅读

Arcgis Server For Flex 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用 ArcGIS Server Flex API 调用 Google Map 的地图数据，通过重载 TiledMapServiceLayer 接口类实现加载矢量地图、地形图、影像地图及道路等 POI 数据。

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

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

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

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.cn/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@128,r@177000000&hl=zh-CN&gl=cn&" +                     
                    "x=" + col + "&" +                     
                    "y=" + row + "&" +                     
                    "z=" + level+ "&" +                     
                    "s=" + s; 
            }
                
            //获取影像地图
            else if(mapStyle == "Image")                 
            {                 
                url = "http://mt"+(col%4)+".google.cn/vt/lyrs=s@101&hl=zh-CN&gl=cn&" +                     
                    "x=" + col + "&" +                     
                    "y=" + row + "&" +                     
                    "z=" + level+ "&" +                     
                    "s=" + s;                 
            } 
                
            //获取道路等POI，和影像地图配合使用     
            else if(mapStyle == "POI")            
            {                 
                url = "http://mt"+(col%4)+".google.cn/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)
            ];
        }
    }
    
}

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

import com.esri.viewer.GoogleMapLayer;

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

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

case "googlemap":
                    {
                        var googleMapLayer:GoogleMapLayer=new GoogleMapLayer();
                        googleMapLayer.name=label;
                        if (style)
                        {
                            googleMapLayer.mapStyle= style;
                        }
                        googleMapLayer.id=label;
                        googleMapLayer.alpha=alpha;
                        googleMapLayer.visible=visible;
                        layerObject.layer=googleMapLayer;
                        googleMapLayer.addEventListener(LayerEvent.LOAD_ERROR, layer_loadErrorEvent);
                        googleMapLayer.addEventListener(LayerEvent.LOAD, layer_loadEvent);
                        map.addLayer(googleMapLayer);
                        break;
                    }

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

<basemaps>
           <layer label="GoogleMapLayer"  type="GoogleMap"  style="Terrain"   visible="true"/>
        </basemaps>