由于2019年1月1日起天地图API及服务接口调用都需要获得开发授权,所以必须得先在“国家地理信息公共服务平台”(https://www.tianditu.gov.cn)申请一个key才可以使用。
下面是通过超图的SuperMap来创建示例:
//如果不知道请求参数的值是什么,可以通过平台中的示例,然后F12控制台来查看请求的参数
tiandituLayer = new SuperMap.Layer.WMTS({
name:"天地图",
url:"http://t0.tianditu.gov.cn/img_c/wmts?tk=1fa3b49702dd39176bc699d93b408f24",
/**
layer这个参数与请求地址中的 " http://t0.tianditu.gov.cn/img_c/wmts?tk=密钥 "中的img_c中的img相对应,
相应的,天地图API中的请求资源的layer也需要与请求资源中地址中的对应。
*/
layer:"img",
style:"default",
matrixSet:"c",
//tiles,固定
format:"tiles",
opacity:1,
requestEncoding:"kvp"}
);
下面是html代码:
<!DOCTYPE html>
<html lang="en">
<!-- 超图 -->
<script type="text/javascript" src="../extends/superMap/libs/SuperMap.Include.js"></script>
<head>
<meta charset="UTF-8">
<title>SuperMap创建天地图示例</title>
</head>
<body onload="initSuperMap()">
<div id="map" style="width:700px;height:700px;"></div>
</body>
<script type="text/javascript">
var map, tiandituLayer, tiandituLableLayer ;
var layers = [];
//地图初始化
function initSuperMap(){
//初始化地图
map = new SuperMap.Map("map", {
controls:[
new SuperMap.Control.Navigation(),//随鼠标事件的地图浏览
//new SuperMap.Control.Zoom(),//缩放类图标,默认地图左上角
new SuperMap.Control.LayerSwitcher(),//图层选择控件,默认地图右上角
new SuperMap.Control.ScaleLine(), //比例尺控件,默认地图左下角
],
theme:null, //加载的主题风格的CSS文件的相对路径
allOverlays : true, //地图所有图层都被当做叠加图层来使用
/** 下面两个参数maxScale和minScale,注意设置比例尺的大小,如果设置过小或过大,地图都会不显示,
提示“此级别无影像,请放大或缩小地图后再浏览”
*/
//maxScale : 95251.7247453672,
//minScale : 5184.243631052,
}
)
tiandituLayer = new SuperMap.Layer.WMTS({
name:"天地图",
url:"http://t0.tianditu.gov.cn/img_c/wmts?tk=1fa3b49702dd39176bc699d93b408f24",
layer:"img",
style:"default",
matrixSet:"c",
format:"tiles",
opacity:1,
requestEncoding:"kvp"});
tiandituLableLayer = new SuperMap.Layer.WMTS({
name:"地址",
url:"http://t0.tianditu.gov.cn/cia_c/wmts?tk=1fa3b49702dd39176bc699d93b408f24",
layer:"cia",
isBaseLayer: true,
style:"default",
matrixSet:"c",
format:"tiles",
opacity:1,
requestEncoding:"kvp"});
layers.push(tiandituLayer);
layers.push(tiandituLableLayer);
map.addLayers(layers);
map.setCenter(new SuperMap.LonLat(111.032808, 21.617038), 9);
}
</script>
</html>