-----------------------------------------------------
特别说明：非原著文章，来自esri china上公开文档
-----------------------------------------------------
ArcGIS API for Javascript 提供了一个 WebTileLayer 的类，通过返个类可以访问非 ArcGIS for Server切片服务，这个类接受一个模式如
http://some.domain.com/ $ {leveL} / $ {col} / $ {row}的URL参数复制代码不一定非是这种模式，也不一定非要传入一个URL做参数，但是跟这种模式类似，因为这种模式目前网络上很常见，其中level表示切片级别，col和row 分别表示level级别下的列和行。
WebTileLayer 本质是一个扩展的 TiledMapServiceLayer 类，在该类没有出来前，也都是通过自定义的方式去访问一些形如 http://some.domain.com/ $ {leveL} / $ {col} / $ {row}的服务，而 WebTileLayer 的出现则加快了开发效率，在使用的时候，叧需要以 WebTileLayer为模板替换相应的参数即可。
1、切片服务的源头-TiledMapServiceLayer
TiledMapServiceLayer 类是一切切片服务的源头，我所熟知的 WMTS 和ArcGISTiledMapServiceLayer VETiledLayer 都是通过继承该类来实现对不同的切片服务的访问，该类是一个抽象类，另能被子类来实例化，但是它却定义了方位切片服务所需要的方法， 因此有必要来了解下该类， 该类的主要属性和方法如下。
主要属性
fullExtent 地图服务的范围
initialExtent 地图服务的刜始范围
spatialReference 地图服务的空间参考
tileInfo 瓦片信息，该类包吨切片的结构 复制代码主要方法
getTileUrl 获取每一个切片的url，返个方法是当移动地图，放大缩小的时候会触发，
然后获取每一个切片的url并获取图片进行显示 复制代码2、天地图
天地图是国家测绘局2010年10月21日宣布开通，是中国公众版国家地理信息公共服务平台，天地图作为中国区域内数据资源最全的地理信息服务平台，将为公众提供权威、可信、统一的地理信息服务，打造互联网地理信息服务的中国品牌。
2.1、示例
通过继承 TiledMapServiceLayer 来实现对天地图的访问，可以直接修改 WebTileLayer中的信息
dojo.declare("WebTileLayer", esri.layers.TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0,
-90.0, 180.0, 90.0, this.spatialReference));
this.tileInfo = new esri.layers.TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
"origin": {
"x": -180,
"y": 90
},
"spatialReference": {
"wkid": 4326
},
"lods": [
{ "level": 0, "resolution": 0.703125, "scale": 295497593.05875003 },
{ "level": 1, "resolution": 0.3515625, "scale": 147748796.52937502 },
{ "level": 2, "resolution": 0.17578125, "scale": 73874398.264687508 },
{ "level": 3, "resolution": 0.087890625, "scale": 36937199.132343754 },
{ "level": 4, "resolution": 0.0439453125, "scale": 18468599.566171877 },
{ "level": 5, "resolution": 0.02197265625, "scale": 9234299.7830859385 },
{ "level": 6, "resolution": 0.010986328125, "scale": 4617149.8915429693 },
{ "level": 7, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },
{ "level": 8, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },
{ "level": 9, "resolution": 0.001373291015625, "scale": 577143.73644287116 },
{ "level": 10, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },
{ "level": 11, "resolution": 0.00034332275390625, "scale":
144285.93411071779 },
{ "level": 12, "resolution": 0.000171661376953125, "scale":
177
72142.967055358895 },
{ "level": 13, "resolution": 8.58306884765625e-005, "scale":
36071.483527679447 },
{ "level": 14, "resolution": 4.291534423828125e-005, "scale":
18035.741763839724 },
{ "level": 15, "resolution": 2.1457672119140625e-005, "scale":
9017.8708819198619 },
{ "level": 16, "resolution": 1.0728836059570313e-005, "scale":
4508.9354409599309 },
{ "level": 17, "resolution": 5.3644180297851563e-006, "scale":
2254.4677204799655 }
]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
var levelMap = "";
if (level < 10) {
levelMap = "A0512_EMap";
} else if (level < 12) {
levelMap = "B0627_EMap1112";
} else if (level < 17) {
levelMap = "siwei0608";
}
return "http://tile0.tianditu.com/DataServer?T=" + levelMap + "&" +
"X=" + col + "&" +
"Y=" + row + "&" +
"L=" + (level * 1 + 1);
}
}); 复制代码2.2、加载天地图
var tianditu = new WebTileLayer();
map.addLayer(tianditu); 复制代码2.3、展示结果
3、百度地图
在百度地图里，用户可以查询街道、商场、楼盘的地理位置，也可以找到离您最近的所有餐馆、 学校、银行、公园等等poi信息。通过arcgis for js 可以扩展一个图层进行访问百度地图。
3.1 示例
dojo.declare("BaiduLayer", esri.layers.TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new esri.SpatialReference({
wkid: 102113
});
this.initialExtent = (this.fullExtent = new
esri.geometry.Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787,
181
this.spatialReference));
this.tileInfo = new esri.layers.TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
"origin": {
"x": -20037508.342787,
"y": 20037508.342787
},
"spatialReference": {
"wkid": 102113
},
"lods": [{
"level": 0,
"resolution": 156543.033928,
"scale": 591657527.591555
}, {
"level": 1,
"resolution": 78271.5169639999,
"scale": 295828763.795777
}, {
"level": 2,
"resolution": 39135.7584820001,
"scale": 147914381.897889
}, {
"level": 3,
"resolution": 19567.8792409999,
"scale": 73957190.948944
}, {
"level": 4,
"resolution": 9783.93962049996,
"scale": 36978595.474472
}, {
"level": 5,
"resolution": 4891.96981024998,
182
"scale": 18489297.737236
}, {
"level": 6,
"resolution": 2445.98490512499,
"scale": 9244648.868618
}, {
"level": 7,
"resolution": 1222.99245256249,
"scale": 4622324.434309
}, {
"level": 8,
"resolution": 611.49622628138,
"scale": 2311162.217155
}, {
"level": 9,
"resolution": 305.748113140558,
"scale": 1155581.108577
}, {
"level": 10,
"resolution": 152.874056570411,
"scale": 577790.554289
}, {
"level": 11,
"resolution": 76.4370282850732,
"scale": 288895.277144
}, {
"level": 12,
"resolution": 38.2185141425366,
"scale": 144447.638572
}, {
"level": 13,
"resolution": 19.1092570712683,
"scale": 72223.819286
}, {
"level": 14,
"resolution": 9.55462853563415,
"scale": 36111.909643
183
}, {
"level": 15,
"resolution": 4.77731426794937,
"scale": 18055.954822
}, {
"level": 16,
"resolution": 2.38865713397468,
"scale": 9027.977411
}, {
"level": 17,
"resolution": 1.19432856685505,
"scale": 4513.988705
}, {
"level": 18,
"resolution": 0.597164283559817,
"scale": 2256.994353
}, {
"level": 19,
"resolution": 0.298582141647617,
"scale": 1128.497176
}]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
var zoom = level - 1;
var offsetX = Math.pow(2, zoom);
var offsetY = offsetX - 1;
var numX = col - offsetX;
var numY = (-row) + offsetY;
zoom = level + 1;
var num = (col + row) % 8 + 1;
var url = "http://q3.baidu.com/it/u=x=" + numX + ";y=" + numY + ";z=" + zoom
184
+ ";v=015;type=web&fm=44";
return url;
} }); 复制代码3.1 展示效果
转载于:https://juejin.im/post/5cf09b8af265da1bc5524966