ArcGIS API FOR JS 加载天地图
2017-08-03 15:03
399 查看
1、访问天地图官网http://www.tianditu.com/service/query.html，查找相关服务及URL
2、继承TiledMapServiceLayer编写自定义图层类WebTileLayer
TiandituMap.js文件内容如下：
dojo.declare("WebTileLayer", esri.layers.TiledMapServiceLayer, {
_type:"",
constructor: function (type) {
this._type=type;
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": 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) {
if(this._type==null)
return " http://t0.tianditu.com/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
//return " http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
else if(this._type=="ano")
return " http://t0.tianditu.com/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1. b4fe
0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
}
});
3、仿照arcgis api上的例子进行实例化调用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Portland Tile Server</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<script src="http://js.arcgis.com/3.12/"></script>
<script>
dojo.require("esri.map");
function init() {
initLayer();
var map = new esri.Map("map");
map.addLayer(new WebTileLayer());
map.addLayer(new WebTileLayer("ano"));
}
function initLayer(){
dojo.declare("WebTileLayer", esri.layers.TiledMapServiceLayer, {
_type:"",
constructor: function (type) {
this._type=type;
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": 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) {
if(this._type==null)
return " http://t0.tianditu.com/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
else if(this._type=="ano")
return " http://t0.tianditu.com/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
}
});
}
dojo.ready(init);
</script>
</head>
<body>
<div id="map" class="claro" style="width:768px; height:512px; border:1px solid #000;"></div>
</body>
</html>
2、继承TiledMapServiceLayer编写自定义图层类WebTileLayer
TiandituMap.js文件内容如下：
dojo.declare("WebTileLayer", esri.layers.TiledMapServiceLayer, {
_type:"",
constructor: function (type) {
this._type=type;
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": 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) {
if(this._type==null)
return " http://t0.tianditu.com/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
//return " http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
else if(this._type=="ano")
return " http://t0.tianditu.com/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1. b4fe
0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
}
});
3、仿照arcgis api上的例子进行实例化调用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Portland Tile Server</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<script src="http://js.arcgis.com/3.12/"></script>
<script>
dojo.require("esri.map");
function init() {
initLayer();
var map = new esri.Map("map");
map.addLayer(new WebTileLayer());
map.addLayer(new WebTileLayer("ano"));
}
function initLayer(){
dojo.declare("WebTileLayer", esri.layers.TiledMapServiceLayer, {
_type:"",
constructor: function (type) {
this._type=type;
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": 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) {
if(this._type==null)
return " http://t0.tianditu.com/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
else if(this._type=="ano")
return " http://t0.tianditu.com/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ;
}
});
}
dojo.ready(init);
</script>
</head>
<body>
<div id="map" class="claro" style="width:768px; height:512px; border:1px solid #000;"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用arcgis for js 4.x api加载地图和服务
- 使用ArcGIS Server for Flex API 开发包agslib加载天地图2.0版本经纬度地图
- Arcgis Server api for javascript加载天地图（转）
- (转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。
- arcgis api for javascipt 加载天地图、百度地图
- （转）Arcgis for js加载天地图
- ArcGIS API for Javascript3.23加载天地图
- arcgis api for js 加载百度地图
- ArcGIS API for Javascript 加载天地图（墨卡托投影）
- Arcgis for js加载天地图
- arcgis for js API 4.4 MapImageLayer加载动态图层不出现问题
- 离线谷歌卫星地图加载服务中间件调用示例For ArcGIS JS API
- ArcGIS API for Javascript 加载天地图（经纬度投影）
- 使用ArcGIS Server for Flex API 开发包agslib加载天地图2.0版球面墨卡托地图 .
- arcgis api for javascript 调用天地图，并加载数据arcgis server 发布的数据
- Arcgis Server api for javascript加载天地图
- arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。
- Arcgis for js加载天地图
- ArcGIS API for JS 加载GeoJSON数据
- Arcgis for js加载天地图