加载天地图、天地图注记、影像：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>天地图</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"dojo/domReady!"
], function(Map, MapView,WebTileLayer){
var map = new Map({
// basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 9,
center: [120, 30]
});
var tdtMap_img = new WebTileLayer({//天地图影像
urlTemplate: "https://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=1072d95046f18e67463ce40d645a9b8d",
subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
copyright: "天地图影像"
});
var tdtMap = new WebTileLayer({//天地图
urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=1072d95046f18e67463ce40d645a9b8d",
subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
copyright: "天地图"
})
var tdtMap_anno = new WebTileLayer({//天地图注记
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=1072d95046f18e67463ce40d645a9b8d",
urlTemplate: "https://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=1072d95046f18e67463ce40d645a9b8d",
subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
copyright: "天地图注记"
})
// map.add(tdtMap_img);
map.add(tdtMap);
map.add(tdtMap_anno);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
天地图： http://lbs.tianditu.gov.cn/server/MapService.html
参考：
https://codepen.io/1010543618/pen/bPLNOE
