平时开发过程中，如果我们调用arcgis js api官网的底图时，由于受网络的限制，调用就会变得很慢，此时我们可以考虑将我们的底图换为天地图，如下图所示：
具体操作过程如下：
1、加载arcgis api实例化地图时所需的样式文件和js代码包，如下：
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>2、引入实例化地图和切片图层所用的模块，如下：
require(["esri/Map",
"esri/views/MapView",
"esri/layers/WebTileLayer"], function(Map,
MapView,
WebTileLayer) {
})3、在天地图官网申请key，类似于百度地图API开发的流程，然后根据天地图官网给的在线地址，调用天地图服务，如下：
var tiledLayer = new WebTileLayer({
urlTemplate:"http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=申请的key",
subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
});
var tiledLayer_poi = new WebTileLayer({
urlTemplate:"http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=申请的key",
subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
});上述代码实例化了两个切片图层，其中第一个是天地图切片图层，第二个是标注图层。
4、实例化地图和mapview，将上述实例化完成的两个切片图层作为basemap来添加，如下：
var map = new Map({
basemap: {
baseLayers: [tiledLayer, tiledLayer_poi]
}
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 10,
center: [104.072619,30.663776] // longitude, latitude
});5、完整代码如下所示：
<!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%;
100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require(["esri/Map", "esri/views/MapView","esri/layers/WebTileLayer"], function(Map, MapView,WebTileLayer) {
var tiledLayer = new WebTileLayer({
urlTemplate:
"http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=申请的key",
subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
});
var tiledLayer_poi = new WebTileLayer({
urlTemplate:
"http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=申请的key",
subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
});
var map = new Map({
basemap: {
baseLayers: [tiledLayer, tiledLayer_poi]
}
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 10,
center: [104.072619,30.663776] // longitude, latitude
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>