和上篇《使用ArcGIS Server for Flex API 开发包agslib加载天地图2.0版本经纬度地图》一样,我们先看一下天地图球面墨卡托地图的参数
http://t0.tianditu.com/vec_w/wmts?request=GetCapabilities&service=wmts
该文件中我们可以获得该WMTS服务详细信息:
坐标系:EPSG::3857。
数据范围是:-20037508.3427892 -20037508.3427892(左下角) 20037508.3427892 20037508.3427892(右上角)
切片的左上角:20037508.3427892 -20037508.3427892
图层名:vec
数据格式:tiles
切片矩阵识别:w
服务模式:KVP
此外还有各个级别切片的详细信息,包括切片的左上角坐标,比例尺,图片大小。
下面具体谈一下如何使用agslib加载天地图球面墨卡托地图。
ArcGIS提供的agslib开发包中提供了esri:WMTSLayer 来调用WMTS服务,但我们调用时,<esri:WMTSLayer serviceMode="KVP" imageFormat="tiles" tileMatrixSetId="w" style="default" layerId="vec" url="http://t0.tianditu.com/vec_w/wmts"/>,地图可以正常显示,当我们缩小地图时,发现地图右侧和下方有没有切片的蓝色区域,见图下方的图,
仔细查看地图四至的坐标,发现左侧和上方都是正确的,分别为-20037508.3427892 和20037508.3427892,右侧和下方则分别是22******,-22******。应该是和天地图切片的参数有关。
因此,我们还需要通过继承TiledMapServiceLayer类,自定义获取地图的方法。这里我们定义了类:WMTSWLayer,具体代码如下:
package com.conponents
{
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 WMTSWLayer extends TiledMapServiceLayer
{
private var _tileInfo:TileInfo;
private var _baseURL:String;
private var _initExtent:String;
private var _layerId;
public function WMTSWLayer()
{
this._tileInfo = new TileInfo();
this._initExtent = null;
this.buildTileInfo();
setLoaded(true);
}
public function set baseURL(pbaseurl:String):void
{
_baseURL = pbaseurl;
}
public function set baseURLs(pbaseurls:Array):void
{
_baseURLs = pbaseurls;
}
public function set layerId(playerId:String):void
{
_layerId = playerId;
}
override public function get fullExtent() : Extent
{
return new Extent(-20037508.3427892,-20037508.3427892, 20037508.3427892,20037508.3427892, new SpatialReference(3857));
}
public function set initExtent(initextent:String):void
{
this._initExtent = initextent;
}
override public function get initialExtent() :Extent
{
if (this._initExtent == null)
return new Extent(-20037508.3427892,-20037508.3427892, 20037508.3427892,20037508.3427892, new SpatialReference(3857));
var coors:Array = this._initExtent.split(",");
return new Extent(Number(coors[0]), Number(coors[1]), Number(coors[2]) ,Number(coors[3]), new SpatialReference(3857));
}
override public function get spatialReference() : SpatialReference
{
return new SpatialReference(3857);
}
override public function get tileInfo() : TileInfo
{
return this._tileInfo;
}
override protected function getTileURL(level:Number, row:Number, col:Number) : URLRequest
{
var urlRequest:String =_baseURL+"/DataServer?T="+_layerId+"&x="+col+"&y="+row+"&l="+level;
return new URLRequest(urlRequest);
}
private function buildTileInfo() : void
{
this._tileInfo.height = 256;
this._tileInfo.width = 256;
this._tileInfo.origin = new MapPoint(-20037508.3427892,20037508.3427892,new SpatialReference(3857));
this._tileInfo.spatialReference = new SpatialReference(3857);
this._tileInfo.lods = new Array();
this._tileInfo.lods = [
new LOD(1 ,77664.761018562790697674418604651, 2.958293554545656E8),
new LOD(2 ,38832.380509281395348837209302326, 1.479146777272828E8),
new LOD(3 ,19416.190254640697674418604651163, 7.39573388636414E7),
new LOD(4 ,9708.0951273203488372093023255814, 3.69786694318207E7),
new LOD(5 ,4854.0475636601744186046511627907, 1.848933471591035E7),
new LOD(6 ,2427.0237818300872093023255813953, 9244667.357955175),
new LOD(7 ,1213.5118909150436046511627906977, 4622333.678977588),
new LOD(8 ,606.75594545752180232558139534884, 2311166.839488794),
new LOD(9 ,303.37797272876090116279069767442, 1155583.419744397),
new LOD(10,151.68898636438045058139534883721, 577791.7098721985),
new LOD(11, 75.844493182190225290697674418605, 288895.85493609926),
new LOD(12, 37.922246591095112645348837209302, 144447.92746804963),
new LOD(13, 18.961123295547556322674418604651, 72223.96373402482),
new LOD(14, 9.4805616477737781613372093023256, 36111.98186701241),
new LOD(15, 4.7402808238868890806686046511628, 18055.990933506204),
new LOD(16, 2.3701404119434445403343023255814, 9027.995466753102),
new LOD(17, 1.1850702059717222701671511627907, 4513.997733376551),
new LOD(18, 0.59253510298586113508357558139535, 2256.998866688275)
];
}
}
}
将上述代码和上篇《
使用ArcGIS Server for Flex API 开发包agslib加载天地图2.0版本经纬度地图 》中代码比较,主要是buildTileInfo和getTileURL有所不同。
_ 缺少了_tileMatrixSetId、_imageFormat、_serviceMode等变量;
buildTileInfo方法中重新计算了每一级图层rsolution值,scale值是直接使用的wmts服务中的值;
getTileURL方法中的请求和之前的不同并没有使用
_tileMatrixSetId、_imageFormat、_serviceMode等参数。
笔者经过测试若使用上篇WMTSCLayer中的getTileURL方法,显示效果和esri:WMTSLayer一样(见上图),地图右侧和下方会有蓝色的空白图片,但与esri:WMTSLayer不同的是,地图四至坐标发生了变化,左:-199*****,下:-199*****,右:199*****,上:199*****。显然坐标是不正确的。
具体WMTSWLayer图层的方法如下:
注意 baseURL值和调用经纬度不同