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

不羁的心 提交于 2020-02-28 22:06:16

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

作者:爱生活,爱GIS | 出处:博客园 | 2011/9/8 1:34:12 | 阅读208

        众所周知,像天地图和e都市的地图都是以切片的形式存放在服务端的,系统根据用户选择的范围加载该范围的瓦片地图,这比传统的实时渲染地图的响应速度更快。google地图和baidu地图的原理也不外乎如此。

        所以说,如果本地硬盘上有瓦片地图,或者我们知道瓦片地图在远程服务器端的组织形式,利用简单的javascript脚本语言和浏览器可以实现对地图的浏览,通俗地说,这其实就是一个图片浏览器。考虑到远程服务器需要网络连接,最近利用闲暇时间将长沙市范围的e都市上的瓦片下载到本地,这样在没有网络的情况下也能浏览地图了。

        采用网上广泛流传的完全利用js脚本写的开源webgis完整功能例子”,换上本地硬盘上下载好的长沙范围内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-9018090new 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.927.85114.2528.67new 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(-18090);
            
this._tileInfo.spatialReference = new SpatialReference(4326);
            
this._tileInfo.lods = new Array();
            
this._tileInfo.lods = [
                
new LOD(00.7031252.95498e+008), 
                
new LOD(10.3515631.47749e+008), 
                
new LOD(20.1757817.38744e+007), 
                
new LOD(30.08789063.69372e+007), 
                
new LOD(40.04394531.84686e+007), 
                
new LOD(50.02197279.2343e+006), 
                
new LOD(60.01098634.61715e+006), 
                
new LOD(70.005493162.30857e+006), 
                
new LOD(80.002746581.15429e+006), 
                
new LOD(90.00137329577144), 
                
new LOD(100.000686646288572), 
                
new LOD(110.000343323144286), 
                
new LOD(120.00017166172143), 
                
new LOD(138.58307e-00536071.5), 
                
new LOD(144.29153e-00518035.7), 
                
new LOD(152.14577e-0059017.87), 
                
new LOD(161.07289e-0054508.9), 
                
new LOD(175.36445e-0062254.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页面如

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!