ArcGIS API for Flex 调用天地图、e都会瓦片地图

 

ArcGIS API for Flex 调用天地图、e都会瓦片地图

Admin
2011年9月8日

名人名言：人生是个艰辛的历程，让我自己的一生过得完美一点儿已经很不容易了，怎么能指望去教导别人如何过好他的一生呢？——毛姆 

        众所周知，像天地图和e都会的地图都是以切片的情势存放在办事端的，体系按照用户选择的局限加载该局限的瓦片地图，这比传统的及时衬着地图的响应速度更快。google地图和baidu地图的道理也不过乎如此。

        所以说，若是本地硬盘上有瓦片地图，或者我们知道瓦片地图在长途办事器端的组织情势，哄骗简单的javascript脚本说话和浏览器就可以实现对地图的浏览，通俗地说，这其实就是一个图片浏览器。推敲到长途办事器须要收集连接，比来哄骗闲暇时候将长沙市局限的e都会上的瓦片下载到本地，如许在没有收集的景象下也能浏览地图了。

        采取网上广泛撒播的完全哄骗js脚本写的开源&＃8220;webgis完全功能例子&＃8221;，换上本地硬盘高低载好的长沙局限内e都会地图，结果图如下。

        当然，以上是收集上js高手写的API，功能不是很强大，然则至少为我等开辟者供给了值得鉴戒的思路。

        esri也供给了可以浏览瓦片地图的API，包含javascript API，silverlight API和flex API，作为客户端说话，这三者供给的功能大致类似，甚至在类的定名上都对峙了高度的一致性。哄骗arcgis api for javascript同样可以将下载到本地的瓦片和长途办事器端的瓦片进行地图浏览，本人连络比来做的哄骗ArcGIS API for Flex（以下简称ags4fx）加载天地图的瓦片地图来申明该过程，javascript api和silverlight api可以参考该办法加载瓦片地图。

        按照最新的ags4fx 2.4可知，esri为我们供给了TiledMapServiceLayer类，这个类恰是所有瓦片地图办事都必须持续的类，像ArcGISTiledMapServiceLayer， OpenStreetMapLayer， VETiledLayer等esri供给的瓦片类都是持续了该类的，所以我们要扩大该TiledMapServiceLayer类，名字暂且叫TianDiTuTiledMapServiceLayer。

        从TiledMapServiceLayer类的API可知，fullExtent属性、tileInfo属性、units属性和getTileURL（）办法是子类必必要重写的，于是最简单的TianDiTuTiledMapServiceLayer类定义如下：

package tdt
{
    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;
    
    public class TianDiTuTiledMapServiceLayer extends TiledMapServiceLayer
    {
        private var _tileInfo:TileInfo;
        /*
        一幅完全的图片url有如下格局： http://tile0.tianditu.com/DataServer？T=sbsm0210&X=1&Y=1&L=1
        */
        private var _baseURL:String;/*  http://tile */
        private var _baseURLs:Array;/* 由诸如.tianditu.com/DataServer？T=sbsm0210构成的数组 */
        private var _initExtent:String;
        
        private var _id:String;
        private var _name:String;
        private var _alpha:Number;
        private var _visible:Boolean;
        
        public function TiandituTiledMapServiceLayer（）
        {
            this._tileInfo = new TileInfo（）;
            this._baseURLs = [];
            this._initExtent = null;
            this.buildTileInfo（）;//设置tileinfo信息
            setLoaded（true）;
        }
        
        
        public function set baseURL（baseurl:String）:void
        {
            _baseURL = baseurl;
        }
        public function set baseURLs（baseurls:Array）:void
        {
            _baseURLs = baseurls;
        }
        
        override public function get fullExtent（） : Extent
        {
            return new Extent（-180， -90， 180， 90， new SpatialReference（4326））;
        }
        
        public function set initExtent（initextent:String）:void
        {
            this._initExtent = initextent;
        }
        override public function get initialExtent（） :Extent
        {
            if （this._initExtent == null）//若是没有设备initExtent节点，则默认初始局限为长沙市区
                return new Extent（111.9， 27.85， 114.25， 28.67， new SpatialReference（4326））;    
            var coors:Array = this._initExtent.split（"，"）;
            return new Extent（Number（coors[0]）， Number（coors[1]）， Number（coors[2]） ，Number（coors[3]）， new SpatialReference（4326））;
        }
        
        override public function get spatialReference（） : SpatialReference
        {
            return new SpatialReference（4326）;
        }
        
        override public function get tileInfo（） : TileInfo
        {
            return this._tileInfo;
        }
        
        override public function get units（） : String
        {
            return "esriDecimalDegrees";
        }
        
        override protected function getTileURL（level:Number， row:Number， col:Number） : URLRequest
        {
            var url:String = null;
            var rank:Number = this._baseURLs.length / 2;
            var tempLevel:Number = 0;
            for （var i:Number = 0; i < rank; i++）
            {
                if （tempLevel <= level && level < Number（this._baseURLs[i * 2]））
                {
                    url = this._baseURLs[i * 2 + 1];
                    break;
                }
                if （i != rank - 1）
                    tempLevel = Number（this._baseURLs[i * 2]）;
            }

            //因为办事器端采取了集群技巧，http://tile0/同http://tile7/取的是同一图片

            var urlRequest:String = this._baseURL + String（（Math.round（Math.random（） * 6） + 1）） + url + "&X=" + String（col） + "&Y=" + String（row） + "&L=" + String（（level + 1））;
            return new URLRequest（urlRequest）;
        }
        
        private function buildTileInfo（） : void
        {
            this._tileInfo.height = 256;
            this._tileInfo.width = 256;
            this._tileInfo.origin = new MapPoint（-180， 90）;
            this._tileInfo.spatialReference = new SpatialReference（4326）;
            this._tileInfo.lods = new Array（）;
            this._tileInfo.lods = [
                new LOD（0， 0.703125， 2.95498e+008）， 
                new LOD（1， 0.351563， 1.47749e+008）， 
                new LOD（2， 0.175781， 7.38744e+007）， 
                new LOD（3， 0.0878906， 3.69372e+007）， 
                new LOD（4， 0.0439453， 1.84686e+007）， 
                new LOD（5， 0.0219727， 9.2343e+006）， 
                new LOD（6， 0.0109863， 4.61715e+006）， 
                new LOD（7， 0.00549316， 2.30857e+006）， 
                new LOD（8， 0.00274658， 1.15429e+006）， 
                new LOD（9， 0.00137329， 577144）， 
                new LOD（10， 0.000686646， 288572）， 
                new LOD（11， 0.000343323， 144286）， 
                new LOD（12， 0.000171661， 72143）， 
                new LOD（13， 8.58307e-005， 36071.5）， 
                new LOD（14， 4.29153e-005， 18035.7）， 
                new LOD（15， 2.14577e-005， 9017.87）， 
                new LOD（16， 1.07289e-005， 4508.9）， 
                new LOD（17， 5.36445e-006， 2254.47）
            ];
        }
    }
}

在mxml页面，设备地图参数如下：

<？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:viewer="com.esri.viewer.*"
    xmlns:tdt="tdt.*">
    
    <esri:Map>
        
        <tdt:TianDiTuTiledMapServiceLayer>
            <tdt:baseURL>http://tile</tdt:baseURL>
            <tdt:baseURLs>
                <mx:String>10</mx:String>
                <mx:String>.tianditu.com/DataServer？T=A0512_EMap</mx:String>
                <mx:String>12</mx:String>
                <mx:String>.tianditu.com/DataServer？T=B0627_EMap1112</mx:String>
                <mx:String>18</mx:String>
                <mx:String>.tianditu.com/DataServer？T=siwei0608</mx:String>
            </tdt:baseURLs>
        </tdt:TianDiTuTiledMapServiceLayer>
        
        <tdt:TianDiTuTiledMapServiceLayer>
            <tdt:baseURL>http://tile</tdt:baseURL>
            <tdt:baseURLs>
                <mx:String>10</mx:String>
                <mx:String>.tianditu.com/DataServer？T=sbsm0210</mx:String>
                <mx:String>11</mx:String>
                <mx:String>.tianditu.com/DataServer？T=e11</mx:String>
                <mx:String>12</mx:String>
                <mx:String>.tianditu.com/DataServer？T=e12</mx:String>
                <mx:String>13</mx:String>
                <mx:String>.tianditu.com/DataServer？T=e13</mx:String>
                <mx:String>14</mx:String>
                <mx:String>.tianditu.com/DataServer？T=eastdawnall</mx:String>
                <mx:String>18</mx:String>
                <mx:String>.tianditu.com/DataServer？T=sbsm1518</mx:String>
            </tdt:baseURLs>
            <tdt:initExtent>111.9， 27.85， 114.25， 28.67</tdt:initExtent>
        </tdt:TianDiTuTiledMapServiceLayer>
        
        <tdt:TianDiTuTiledMapServiceLayer>
            <tdt:baseURL>http://tile</tdt:baseURL>
            <tdt:baseURLs>
                <mx:String>10</mx:String>
                <mx:String>.tianditu.com/DataServer？T=A0610_ImgAnno</mx:String>
                <mx:String>14</mx:String>
                <mx:String>.tianditu.com/DataServer？T=B0530_eImgAnno</mx:String>
                <mx:String>18</mx:String>
                <mx:String>.tianditu.com/DataServer？T=siweiAnno68</mx:String>
            </tdt:baseURLs>
        </tdt:TianDiTuTiledMapServiceLayer>
        
    </esri:Map>

</s:Application>

 

加载地图后的 flex页面如下：

 

 按照这个思路，同样可以哄骗ags4fx API加载e都会的瓦片地图。。

反复上方的话，哄骗esri供给的javascript api和silverlight api实现这个结果过程是类似的，在此不赘述。

人生是个艰辛的历程，让我自己的一生过得完美一点儿已经很不容易了，怎么能指望去教导别人如何过好他的一生呢？——毛姆