平時開發過程中，如果我們調用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%;
width: 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>