arcgis 加载天地图WMTS服务 - 好文

arcgis加载天地图的WMTS服务网络上教程也有很多，并且很多GIS开发人员都将其进行了相应的封装，但是大部分对于初学者而言，存在代码不全的情况，因此，这里将真个天地图的WMTS服务地图的加载的代码全部展现出来，方便初学者进行天地图的服务调用。
并且在本文中，实现了一个模块对天地图所有MWTS服务调用的封装，具体的代码源代码请见码云（https://gitee.com/MrHuanLiu/TDTLib
<https://gitee.com/MrHuanLiu/TDTLib>），本文只对重点进行详解。

对于Dojo 中类的定义及其使用的相关方法请查看(
https://dojotoolkit.org/documentation/tutorials/1.10/declare/index.html
<https://dojotoolkit.org/documentation/tutorials/1.10/declare/index.html>),

对于矢量图层与影像图层（包括各自注记图层的加载），存在大量代码重复的代码，且不同图层的加载主要是由于天地图服务地址的差异，其余的基本一样，这也是对WMTS服务进行再次封装的基础。下面我将封装模块中的
getTileUrl方法返回的天地图服务地址单独摘取出来，你们可以仔细对比一下各自的区别。

* 矢量图层 "http://t" + col % 8 +
".tianditu.cn/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";
* 矢量注记图层 "http://t" + row % 8 +
".tianditu.cn/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";
* 影像图层
"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" ;
* 影像注记图层
"http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX="
+ level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
1.加载所有WMTS服务模块的封装

这个模块的封装和以下的2-5
一样具有共同点，只不过现在我们的一个模块需要完成对矢量图层、矢量注记图层、影像图层、影像注记图层、地形图层、地形注记图层等加载，其中
不同注记图层可以有（中文、英文、蒙古文、维吾尔文）等四种注记图层的选择，并且可以选择坐标是投影坐标还是地理坐标。（该类源代码及相关说明见
https://gitee.com/MrHuanLiu/TDTLib <https://gitee.com/MrHuanLiu/TDTLib>），
这里仅提供一个示例：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible"
content="IE=edge"> <meta name="viewport" content="initial-scale=1,
maximum-scale=1, user-scalable=no"> <title>Search widget tutorial</title> <link
rel="stylesheet" href="../lib/3.25/esri/css/esri.css"> <style> html, body,#map
{ height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script
src="../lib/jquery/jquery-3.3.1.js"></script> <script> var package_path =
window.location.pathname.substring(0,
window.location.pathname.lastIndexOf('/')); console.log(package_path); var
dojoConfig = { baseUrl: "../lib/3.25/dojo", packages:[
{name:'lib',location:'/arcgisDemo/lib/TDTLib'} ], async: true, locale: 'zh-cn'
} </script> <script src="../lib/3.25/init.js"></script> <script> require([
"lib/TDTMapLayer", "esri/map", "dojo/domReady!" ], function (TDTMapLayer, Map)
{ const map = new Map('map', { logo: false }); /** * TDTMapLayer 中包含四个参数，分别为 *
1.mapType：该值的默认值为vec,代表矢量图层，可供选择的值有vec|img|ter，分别代表矢量、影像、地形 *
2.mapCoordinate：该值的默认值为w,代表投影坐标，可供选择的值有c|w分比为：地理坐标，投影坐标 *
3.isAnnoLayer：默认值为"",可供选择的值为""|"ano",分别代表非注记图层，注记图层 *
4.mapAnnotation：默认值为cva,不同注记类型的默认值分别为cva,cia,cta,代表矢量中文注记图层，不同底图的矢量注记可选项有： *
vec(矢量):cva(中文)、eva(英文)、mva(蒙古文)、wva(维吾尔文) *
img(影像):cia(中文)、eia(英文)、mia(蒙古文)、wia(维吾尔文) *
ter(地形图):cta(中文)、eta(英文)、mta(蒙古文)、wta(维吾尔文) */ //1.加载矢量图层（默认投影web墨卡托） let
verLayer = new TDTMapLayer(); //2.加载矢量注记图层 let verAnnoLayer = new
TDTMapLayer("ano"); //3.加载影像图层 let imgLayer = new TDTMapLayer("img","w");
//4.加载影像注记图层 let imgAnnoLayer = new TDTMapLayer("img","w","ano");
//5.当我们需要加载不同语言的注记的时候，无论是矢量、影像、还是地形，我们都需要同时传入4个参数，如： let imgAnnoLayerM = new
TDTMapLayer("img","w","ano","mia");//加载蒙古语矢量图层 map.addLayer(imgAnnoLayerM); });
</script> </head> <body> <div id="map"></div> </body> </html>

2.天地图矢量图层的加载
define(["dojo/_base/declare", "esri/layers/tiled"], function (declare) {
return declare(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": 2, "resolution": 0.3515625, "scale": 147748796.52937502}, {"level":
3, "resolution": 0.17578125, "scale": 73874398.264687508}, {"level": 4,
"resolution": 0.087890625, "scale": 36937199.132343754}, {"level": 5,
"resolution": 0.0439453125, "scale": 18468599.566171877}, {"level": 6,
"resolution": 0.02197265625, "scale": 9234299.7830859385}, {"level": 7,
"resolution": 0.010986328125, "scale": 4617149.8915429693}, {"level": 8,
"resolution": 0.0054931640625, "scale": 2308574.9457714846}, {"level": 9,
"resolution": 0.00274658203125, "scale": 1154287.4728857423}, {"level": 10,
"resolution": 0.001373291015625, "scale": 577143.73644287116}, {"level": 11,
"resolution": 0.0006866455078125, "scale": 288571.86822143558}, {"level": 12,
"resolution": 0.00034332275390625, "scale": 144285.93411071779}, {"level": 13,
"resolution": 0.000171661376953125, "scale": 72142.967055358895}, {"level": 14,
"resolution": 8.58306884765625e-005, "scale": 36071.483527679447}, {"level":
15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724},
{"level": 16, "resolution": 2.1457672119140625e-005, "scale":
9017.8708819198619}, {"level": 17, "resolution": 1.0728836059570313e-005,
"scale": 4508.9354409599309}, {"level": 18, "resolution":
5.3644180297851563e-006, "scale": 2254.4677204799655} ] }); this.loaded = true;
this.onLoad(this); }, getTileUrl: function (level, row, col) { return
"http://t" + col % 8 +
".tianditu.cn/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"; } }); });
3.天地图矢量注记图层的加载
define(["dojo/_base/declare", "esri/layers/tiled"], function (declare) {
return declare(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": 2, "resolution": 0.3515625, "scale": 147748796.52937502}, {"level":
3, "resolution": 0.17578125, "scale": 73874398.264687508}, {"level": 4,
"resolution": 0.087890625, "scale": 36937199.132343754}, {"level": 5,
"resolution": 0.0439453125, "scale": 18468599.566171877}, {"level": 6,
"resolution": 0.02197265625, "scale": 9234299.7830859385}, {"level": 7,
"resolution": 0.010986328125, "scale": 4617149.8915429693}, {"level": 8,
"resolution": 0.0054931640625, "scale": 2308574.9457714846}, {"level": 9,
"resolution": 0.00274658203125, "scale": 1154287.4728857423}, {"level": 10,
"resolution": 0.001373291015625, "scale": 577143.73644287116}, {"level": 11,
"resolution": 0.0006866455078125, "scale": 288571.86822143558}, {"level": 12,
"resolution": 0.00034332275390625, "scale": 144285.93411071779}, {"level": 13,
"resolution": 0.000171661376953125, "scale": 72142.967055358895}, {"level": 14,
"resolution": 8.58306884765625e-005, "scale": 36071.483527679447}, {"level":
15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724},
{"level": 16, "resolution": 2.1457672119140625e-005, "scale":
9017.8708819198619}, {"level": 17, "resolution": 1.0728836059570313e-005,
"scale": 4508.9354409599309}, {"level": 18, "resolution":
5.3644180297851563e-006, "scale": 2254.4677204799655} ] }); this.loaded = true;
this.onLoad(this); }, getTileUrl: function (level, row, col) { return
"http://t" + row % 8 +
".tianditu.cn/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"; } }); });
4.天地图影像图层的加载
define(["dojo/_base/declare", "esri/layers/tiled"], function (declare) {
return declare(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": 2, "resolution": 0.3515625, "scale": 147748796.52937502}, {"level":
3, "resolution": 0.17578125, "scale": 73874398.264687508}, {"level": 4,
"resolution": 0.087890625, "scale": 36937199.132343754}, {"level": 5,
"resolution": 0.0439453125, "scale": 18468599.566171877}, {"level": 6,
"resolution": 0.02197265625, "scale": 9234299.7830859385}, {"level": 7,
"resolution": 0.010986328125, "scale": 4617149.8915429693}, {"level": 8,
"resolution": 0.0054931640625, "scale": 2308574.9457714846}, {"level": 9,
"resolution": 0.00274658203125, "scale": 1154287.4728857423}, {"level": 10,
"resolution": 0.001373291015625, "scale": 577143.73644287116}, {"level": 11,
"resolution": 0.0006866455078125, "scale": 288571.86822143558}, {"level": 12,
"resolution": 0.00034332275390625, "scale": 144285.93411071779}, {"level": 13,
"resolution": 0.000171661376953125, "scale": 72142.967055358895}, {"level": 14,
"resolution": 8.58306884765625e-005, "scale": 36071.483527679447}, {"level":
15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724},
{"level": 16, "resolution": 2.1457672119140625e-005, "scale":
9017.8708819198619}, {"level": 17, "resolution": 1.0728836059570313e-005,
"scale": 4508.9354409599309}, {"level": 18, "resolution":
5.3644180297851563e-006, "scale": 2254.4677204799655} ] }); this.loaded = true;
this.onLoad(this); }, getTileUrl: function (level, row, col) { 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" ; } }); });
5.天地图影像注记图层的加载
define(["dojo/_base/declare", "esri/layers/tiled"], function (declare) {
return declare(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": 2, "resolution": 0.3515625, "scale": 147748796.52937502}, {"level":
3, "resolution": 0.17578125, "scale": 73874398.264687508}, {"level": 4,
"resolution": 0.087890625, "scale": 36937199.132343754}, {"level": 5,
"resolution": 0.0439453125, "scale": 18468599.566171877}, {"level": 6,
"resolution": 0.02197265625, "scale": 9234299.7830859385}, {"level": 7,
"resolution": 0.010986328125, "scale": 4617149.8915429693}, {"level": 8,
"resolution": 0.0054931640625, "scale": 2308574.9457714846}, {"level": 9,
"resolution": 0.00274658203125, "scale": 1154287.4728857423}, {"level": 10,
"resolution": 0.001373291015625, "scale": 577143.73644287116}, {"level": 11,
"resolution": 0.0006866455078125, "scale": 288571.86822143558}, {"level": 12,
"resolution": 0.00034332275390625, "scale": 144285.93411071779}, {"level": 13,
"resolution": 0.000171661376953125, "scale": 72142.967055358895}, {"level": 14,
"resolution": 8.58306884765625e-005, "scale": 36071.483527679447}, {"level":
15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724},
{"level": 16, "resolution": 2.1457672119140625e-005, "scale":
9017.8708819198619}, {"level": 17, "resolution": 1.0728836059570313e-005,
"scale": 4508.9354409599309}, {"level": 18, "resolution":
5.3644180297851563e-006, "scale": 2254.4677204799655} ] }); this.loaded = true;
this.onLoad(this); }, getTileUrl: function (level, row, col) { return
"http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX="
+ level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles"; } }); });

热门工具换一换