天地图服务调用现在需要key了，如果想要用天地图的api开发，或者用天地图的共享地图服务，需要先注册，申请key。
申请key的流程参考：http://lbs.tianditu.gov.cn/authorization/authorization.html
天地图官网地图服务接口：http://lbs.tianditu.gov.cn/server/MapService.html
一、注意事项
1. 天地图地图服务二级域名包括t0-t7，可以随机选择使用，如http://t2.tianditu.gov.cn/vec_c/wmts?tk=密钥
2. 请求示例：
（1）元数据查询
http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts
（2）地图瓦片获取
二、实现代码
1. 加载矢量底图和POI点信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>天地图矢量poi底图加载</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/dojo/dojo.js"></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=秘钥",
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=秘钥",
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>
2. 加载天地图影像底图
<!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.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/dojo/dojo.js"></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/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=秘钥",
subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
});
var map = new Map({
basemap: {
baseLayers: [tiledLayer]
}
});
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>
三、显示效果
1. 矢量底图加POI信息
2. 影像底图
参考：
欢迎关注 arcgis js api前端大神许大姐 https://xuqwblog.blog.csdn.net/ 有js api的教程