Special note: non-original article, from esRI China public documentation
—————————————————–
The ArcGIS API for Javascript provides a WebTileLayer class that can access non-ArcGIS for Server slicing services through the return class. This class accepts a pattern such as
http://some.domain.com/ ${leveL} / ${col} / ${rowCopy the codeIt doesn’t have to be this pattern or pass in a URL as a parameter, but it is similar to this pattern because it is common on the network today, where level represents the slice level and col and row represent the columns and rows at the level level respectively.
WebTileLayer is essentially an extended TiledMapServiceLayer class. Before this class came out, ${leveL} / ${col} / ${row}, and WebTileLayer to speed up development efficiency. The corresponding parameters of the sniff need to be replaced with WebTileLayer template.
1, the source of slice service -TiledMapServiceLayer
TiledMapServiceLayer class is the source of all slices services, I know the WMTS and ArcGISTiledMapServiceLayer VETiledLayer is achieved through inheritance the access to the biopsy of the different services, the class is an abstract class, The other class can be instantiated by subclasses, but it defines the methods required by the azimuth slicing service, so it is necessary to understand this class. The main properties and methods of this class are as follows.
Main attributes fullExtent Map service scope initialExtent Map service 刜 Initial scope spatialReference Map service space reference tileInfo tile information, this class package tons slice structureCopy the codeThe main method getTileUrl obtains the URL of each slice, and the second method is triggered when the map is moved to zoom in and out, and then obtains the URL of each slice and obtains pictures for displayCopy the code2. Map of heaven and Earth
Figure of heaven and earth is the bureau announced on October 21, 2010 opening, is the public version of the China national geographic information public service platform, map world as the most complete data resources in the area of geographic information service platform, will provide the public with authoritative, credible, unified geographic information services, to build the Internet geographic information service brand in China.
2.1, the sample
By inherits tiledMap Service Ayer to achieve access to the map of heaven and earth, 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.58306884765625 e-005."scale":
36071.483527679447 },
{ "level": 14."resolution": 4.291534423828125 e-005."scale":
18035.741763839724 },
{ "level": 15."resolution": 2.1457672119140625 e-005."scale":
9017.8708819198619 },
{ "level": 16."resolution": 1.0728836059570313 e-005."scale":
4508.9354409599309 },
{ "level": 17."resolution": 5.3644180297851563 e-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); }});Copy the code2.2 load the map of heaven and earth
var tianditu = new WebTileLayer();
map.addLayer(tianditu); Copy the code2.3. Show the results
Baidu Map
In Baidu Maps, users can query the geographical location of streets, shopping malls and buildings, as well as find the POI information of all restaurants, schools, banks and parks nearest to you. With ArcGIS for JS you can extend a layer to access Baidu Map.
3.1 the sample
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";
returnurl; }});Copy the code3.1 Display Effect
