arcgis加载天地图的WMTS服务网络上教程也有很多,并且很多GIS开发人员都将其进行了相应的封装,但是大部分对于初学者而言,存在代码不全的情况,因此,这里将真个天地图的WMTS服务地图的加载的代码全部展现出来,方便初学者进行天地图的服务调用。并且在本文中,实现了一个模块对天地图所有MWTS服务调用的封装,具体的代码源代码请见码云(https://gitee.com/MrHuanLiu/TDTLib),本文只对重点进行详解。
对于Dojo 中类的定义及其使用的相关方法请查看(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),这里仅提供一个示例:
<!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";
}
});
});