Arcgis api for flex项目实例—开发篇（1）：地图浏览

前文已经明确数据用天地图，这样的选择一来是免费，二来各种来源的数据都大同小异，天地图用的2000坐标系是常见的经纬度，方便专题数据叠加。

闲话少说，看一下arcgis api for flex是如何吃定天地图的吧。首先要明确的是我们需要用到四个天地图瓦片服务，分别是经纬度地图底图、经纬度地图中文注记、经纬度影像底图、经纬度影像中文注记，详情可以参阅http://www.tianditu.com/guide/index.html。各种服务形式上都差不多，我们来写一个天地图图层类。

首先新建一个类，这个类必须是com.esri.ags.layers.TiledMapServiceLayer的扩展。

public class TDTTiledMapLayer extends TiledMapServiceLayer
{

}

然后，定义两个变量，_tileInfo、_baseUrl和layerId，_tileInfo是arcgis api瓦片图层的基本参数，_baseUrl是url的基本构成，_baseUrl只是定义了一些必要参数，完整的url还应包括基本地址和瓦片动态参数，再定义一个set属性，用于传入基本地址，瓦片动态参数后面再说，layerId是图层名，这个是天地图服务一个讨厌的参数，同样也要给它一个set属性把这个参数加到地址上。

private var _tileInfo:TileInfo = new TileInfo();
private var _baseURL:String = "?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles";
private var _layerId:String = "vec";
public function set baseUrl(value:String):void
{
_baseURL = value + _baseURL;
}
public function set layerId(value:String):void
{
_baseURL = _baseURL + "&LAYER=" + value;
}

然后就是定义_tileInfo了，这是我们这个类最为重要的一步，写一个函数buildTileInfo()，具体内容就不解释了，大致是定义瓦片规格，坐标参考系，以及地图级别。

private function buildTileInfo():void
{
_tileInfo.height = 256;
_tileInfo.width = 256;
_tileInfo.origin = new MapPoint(-180, 90);
_tileInfo.spatialReference = new SpatialReference(4490);
_tileInfo.lods = [
new LOD(1 , 0.703125,    2.958293554545656E8),
new LOD(2 , 0.351563,    1.479146777272828E8),
new LOD(3 , 0.175781,    7.39573388636414E7),
new LOD(4 , 0.0878906,   3.69786694318207E7),
new LOD(5 , 0.0439453,   1.848933471591035E7),
new LOD(6 , 0.0219727,   9244667.357955175),
new LOD(7 , 0.0109863,   4622333.678977588),
new LOD(8 , 0.00549316,  2311166.839488794),
new LOD(9 , 0.00274658,  1155583.419744397),
new LOD(10, 0.00137329,  577791.7098721985),
new LOD(11, 0.000686646,  288895.85493609926),
new LOD(12, 0.000343323,  144447.92746804963),
new LOD(13, 0.000171661,  72223.96373402482),
new LOD(14, 8.58307e-005, 36111.98186701241),
new LOD(15, 4.29153e-005, 18055.990933506204),
new LOD(16, 2.14577e-005, 9027.995466753102),
new LOD(17, 1.07289e-005, 4513.997733376551),
new LOD(18, 5.36445e-006, 2256.998866688275)
];
}

最后，需要实现一下getTileURL方法，这个方法是把每一张瓦片的动态参数和_baseUrl合并形成每一张瓦片的参数。

override protected function getTileURL(level:Number, row:Number, col:Number):URLRequest
{
var url:String = _baseURL + "&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col;
return new URLRequest(url);
}

然后，这个类要求我们override几个get方法，照单全收。唯一要注意的是initialExtent，这个可以依据当前地图需要的范围来设定，比如我现在就设成了安徽的。当然也可以随便设，调用时map的extent会覆盖它。

override public function get fullExtent():Extent
{
return new Extent(-180, -90, 180, 90, new SpatialReference(4326));
}
override public function get initialExtent():Extent
{
return new Extent(114.76,27.59,120.26, 35.64,new SpatialReference(4326));
}
override public function get spatialReference():SpatialReference
{
return new SpatialReference(4490);
}
override public function get tileInfo():com.esri.ags.layers.supportClasses.TileInfo
{
return _tileInfo;
}

最后在构造函数里写几笔，主要是要把buildTileInfo()加上。

public function TDTTiledMapLayer()
{
super();
buildTileInfo();
setLoaded(true);
}

好了。类构造完毕，下面我们去调用它。回到我们的index.html，给map加上图层。

<esri:Map id="map" left="0" right="0" top="0" bottom="0" logoVisible="false" scaleBarVisible="false">
<tool:TDTTiledMapLayer id="vec_c" baseUrl="http://t0.tianditu.com/vec_c/wmts" visible="true"/>
<tool:TDTTiledMapLayer id="cva_c" baseUrl="http://t0.tianditu.com/cva_c/wmts" visible="true"/>
<tool:TDTTiledMapLayer id="img_c" baseUrl="http://t0.tianditu.com/img_c/wmts" visible="false"/>
<tool:TDTTiledMapLayer id="cia_c" baseUrl="http://t0.tianditu.com/cia_c/wmts" visible="false"/>
</esri:Map>

影像底图和注记visible置为false是为了地图切换的需要，初始默认的是线划地图。下面来看效果。





再利用一点篇幅，把地图类型切换加上吧。两个按钮是toggleButton，其实有很多办法去做这个按钮，但是我们先简单实现一下。加上一个Bool型的Bindable属性IsVector，用它来标识当前地图类型以及控制按钮的状态。

[Bindable]
private var IsVector:Boolean = true;

然后，我们在mxml里做一些改动，主要是把ToggleButton的选中状态以及图层可见性绑定过来。

<esri:Map id="map" left="0" right="0" top="0" bottom="0" logoVisible="false" scaleBarVisible="false">
<tool:TDTTiledMapLayer id="vec_c" baseUrl="http://t0.tianditu.com/vec_c/wmts" layerId="vec" visible="{IsVector}"/>
<tool:TDTTiledMapLayer id="cva_c" baseUrl="http://t0.tianditu.com/cva_c/wmts" layerId="cva" visible="{IsVector}"/>
<tool:TDTTiledMapLayer id="img_c" baseUrl="http://t0.tianditu.com/img_c/wmts" layerId="img" visible="{!IsVector}"/>
<tool:TDTTiledMapLayer id="cia_c" baseUrl="http://t0.tianditu.com/cia_c/wmts" layerId="cia" visible="{!IsVector}"/>
</esri:Map>
<s:HGroup right="10" top="10" height="22" gap="0" verticalAlign="middle">
<s:ToggleButton width="60" label="地图" cornerRadius="0" selected="{IsVector}" click="mapType_clickHandler(event)"/>
<s:ToggleButton width="60" label="影像" cornerRadius="0" selected="{!IsVector}" click="mapType_clickHandler(event)"/>
</s:HGroup>

下面就把ToggleButton的Click事件绑定上，mxml里我已经写好了，下面看as代码，就一句。

private function mapType_clickHandler(event:MouseEvent):void
{
IsVector = !IsVector;
}

这样就好了，两个按钮就和地图的类型绑定在了一起。这里使用flex开发中非常重要的绑定机制，这一机制可以让代码变得非常优雅，但这不是重点，更重要的是，它让逻辑变得简单，也更安全。安全这一点后面遇到类似情况我会提出来。