ArcGIS Server Flex API读取自定义瓦片地图并与谷歌地图叠加显示的详细步骤
用ArcGIS Server Flex API调用自定义瓦片地图的原理和调用谷歌地图的原理是类似的，通过访问IIS发布的切片数据，重载ArcGIS Server Felx API的TiledMapServiceLayer接口类，实现了切片数据的接入。
1．重载TiledMapServiceLayer接口类实现google地图的加载
本例中将该类放在放到了com.demo目录下。
package com.demo { 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; 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; 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．重载TiledMapServiceLayer接口类实现自定义切片地图的加载
package com.demo { import com.esri.ags.SpatialReference; import com.esri.ags.geometry.Extent; import com.esri.ags.geometry.MapPoint; import com.esri.ags.layers.supportClasses.LOD; import com.esri.ags.layers.supportClasses.TileInfo; import com.esri.ags.layers.TiledMapServiceLayer; import flash.net.URLRequest; /** * PortlandTiledMapServiceLayer */ public class PortlandTiledMapServiceLayer extends TiledMapServiceLayer { //-------------------------------------------------------------------------- // // Constructor // //-------------------------------------------------------------------------- /** * Creates a new PortlandTiledMapServiceLayer object. */ public function PortlandTiledMapServiceLayer() { super(); buildTileInfo(); // to create our hardcoded tileInfo setLoaded(true); // Map will only use loaded layers } //-------------------------------------------------------------------------- // // Variables // //-------------------------------------------------------------------------- private var _tileInfo:TileInfo = new TileInfo(); // see buildTileInfo() private var _baseURL:String = "http://IP/flexviewer/de/Layers/_alllayers"; //-------------------------------------------------------------------------- // // Overridden properties // fullExtent() // initialExtent() // spatialReference() // tileInfo() // units() // //-------------------------------------------------------------------------- //---------------------------------- // fullExtent // - required to calculate the tiles to use //---------------------------------- override public function get fullExtent():Extent { return new Extent(12165197.8757206, 2267738.36631117, 13100564.1027484, 2971576.74804644, new SpatialReference(102113)); } //---------------------------------- // initialExtent // - needed if Map doesn't have an extent //---------------------------------- override public function get initialExtent():Extent { return new Extent(12259215.5818713, 2409591.47617345, 12988408.7069242, 2966275.92287569, new SpatialReference(102113)); } //---------------------------------- // spatialReference // - needed if Map doesn't have a spatialReference //---------------------------------- override public function get spatialReference():SpatialReference { return new SpatialReference(4326); } //---------------------------------- // tileInfo //---------------------------------- override public function get tileInfo():TileInfo { return _tileInfo; } //---------------------------------- // units // - needed if Map doesn't have it set //---------------------------------- override public function get units():String { return "esriDecimalDegrees"; } //-------------------------------------------------------------------------- // // Overridden methods // getTileURL(level:Number, row:Number, col:Number):URLRequest // //-------------------------------------------------------------------------- override protected function getTileURL(level:Number, row:Number, col:Number):URLRequest { // Use virtual cache directory // This assumes the cache's virtual directory is exposed, which allows you access // to tile from the Web server via the public cache directory. // Example of a URL for a tile retrieved from the virtual cache directory: // http://serverx.esri.com/arcgiscache/dgaerials/Layers/_alllayers/L01/R0000051f/C000004e4.jpg var url:String = _baseURL + "/L" + padString(String(level), 2, "0") + "/R" + padString(row.toString(16), 8, "0") + "/C" + padString(col.toString(16), 8, "0") + ".png"; return new URLRequest(url); } //-------------------------------------------------------------------------- // // Private Methods // //-------------------------------------------------------------------------- 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, 4891.96981024998, 18489297.737236), new LOD(1, 2445.98490512499, 9244648.868618), new LOD(2, 1222.99245256249, 4622324.434309), new LOD(3, 611.49622628138, 2311162.217155), new LOD(4, 305.748113140558, 1155581.108577), new LOD(5, 152.874056570411, 577790.554289), new LOD(6, 76.4370282850732, 288895.277144), new LOD(7, 38.2185141425366, 144447.638572), new LOD(8, 19.1092570712683, 72223.819286), new LOD(9, 9.55462853563415, 36111.909643), ]; } private function padString(text:String, size:int, ch:String):String { while (text.length < size) { text = ch + text; } return text; } } }
3. 两类图层的叠加显示
<?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:esri="http://www.esri.com/2008/ags" xmlns:samples="com.demo.*"> <esri:Map id="myMap"> <samples:GoogleMapLayer id="virture" fadeInFrameCount="12"/> <samples:PortlandTiledMapServiceLayer id="virtualTiles" fadeInFrameCount="12"/> </esri:Map> </s:Application>
ps：这里由于自定义的切片所做的缩放等级数小于谷歌地图的缩放等级数，自定义地图只会在一定的缩放比例下才会显示。
