Special note: non-original articles on public documents from esri china
-----------------------------------------------------
ArcGIS API for Javascript provides a WebTileLayer class, you can access ArcGIS for Server services by slicing back a class that accepts a pattern as
http://some.domain.com/ $ {leveL} / $ {col} / $ {row}的URL参数复制代码Not necessarily that this model does not necessarily have to pass a URL as an argument, but with this model is similar to the current model because it is very common on the Web, where level represents a slice level, col and row level, respectively level under the columns and rows.
WebTileLayer TiledMapServiceLayer essence is an extended class, the class is not in front of it, are to be accessed by way of some form, such as custom http://some.domain.com/ $ {leveL} / $ {col} / $ {row} service, and the emergence WebTileLayer is to accelerate the development efficiency, when in use, Gua need to WebTileLayer as a template to replace the corresponding parameter.
1, Slicing services source -TiledMapServiceLayer
TiledMapServiceLayer class is the source of all sections of the service, that I knew WMTS and ArcGISTiledMapServiceLayer VETiledLayer are to achieve access to the different sections of the service by extending this class, the class is an abstract class, subclass to another can be instantiated, but it it defines a method azimuth slice the services they need, it is necessary to understand the next class, the main attributes and methods of the class as follows.
主要属性
fullExtent 地图服务的范围
initialExtent 地图服务的刜始范围
spatialReference 地图服务的空间参考
tileInfo 瓦片信息，该类包吨切片的结构 复制代码主要方法
getTileUrl 获取每一个切片的url，返个方法是当移动地图，放大缩小的时候会触发，
然后获取每一个切片的url并获取图片进行显示 复制代码2, world map
World map is the National Mapping Agency October 21, 2010 announced the opening of a Chinese public version of the National Geographic Information Public Service Platform, the world map as the most comprehensive Chinese data in the area of geographic information service platform, will provide the public authority, credibility unified geographic information services, geographic information services to build Internet brand in China.
2.1 Example
Through inheritance TiledMapServiceLayer to achieve access to the world map, you can directly modify the information in 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, load world map
var tianditu = new WebTileLayer();
map.addLayer(tianditu); 复制代码2.3, show results
3, Baidu map
In the Baidu map, the user can query the location streets, shopping malls, real estate, poi can also find information on all the nearest restaurants, schools, banks, parks and so on. You can be extended by a layer arcgis for js access Baidu map.
3.1 Example
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 shows the effect of
Reproduced in: https: //juejin.im/post/5cf09b8af265da1bc5524966