1.天地图官网
http://www./
2.申请key
注意：
天地图自1月 1日起需获得开发授权，然后在引用的API 地址后增加授权信息即可（&tk=您的密钥），申请地址如下https://console./api/key，按照网站提示步骤申请即可。
3.调用
4.确定天地图服务
天地图共有 8 个服务地址，子域名分别从 t0 到 t7，如下列表所示。F12 查看了浏览器的通信信息：
/DataServer?
/DataServer?
/DataServer?
/DataServer?
/DataServer?
/DataServer?
/DataServer?
/DataServer?
加载路网
我们查看一个路网切片的 url 地址：
/DataServer?T=vec_c&x=3233&y=673&l=12，
一共有四个参数，T=vec_c表示请求的是路网数据，x 表示切片的 x 轴坐标，y 表示切片的y轴坐标，z表示切片所在的缩放级别。我们使用ol.source.XYZ 加载切片，并将获取的数据初始化一个切片图层 ol.layer.Tile：
var tian_di_tu_road_layer = new ol.layer.Tile({title: "天地图路网",source: new ol.source.XYZ({ url: "/DataServer?T=vec_w&x={x}&y={y}&l={z}" })}); map.addLayer(tian_di_tu_road_layer);
我们可以看到 ol.source.XYZ 有一个url 参数，表示切片地址的模板： /DataServer?T=vec_w&x={x}&y={y}&l={z}，在使用 OpenLayers 时候，用户的操作都会被转化为相应的x、y、z值，并赋予地址模板，这样就可以根据用户的操作请求需要的切片了。
加载完成后，发现只有路网图片，并没有路段的名称等注记层，我们并没有做错什么，只是天地图是将路网图层和注记图层分开发布的，我们还要单独请求注记图层，然后叠加在路网上面，才会看到和百度地图一样的效果。
5.openlayer调用天地图方法
openlayers中，图层(layer)不可缺少的组成部分是数据源(source)，天地图是切片的数据服务，对应的图层是ol.layer.Tile，下图是其数据源对应的类结构图，红色部分是重点内容。
从图可以看到，加载天地图的数据源，可以是ol.source.WMTS（简称WMTS） 和 ol.source.XYZ（简称XYZ）。
7.代码
<!doctype html><meta charset="utf-8"><html lang="en" style="height: 100%"><head><link rel="stylesheet" href="ol3/ol.css" type="text/css"><style>#map {height: 100%;width: 100%;}body {height: 100%;width: 100%;}* {margin: 0;padding: 0;}</style><title>天地图</title><script src="ol3/ol.js" type="text/javascript"></script></head><body><div id="map"></div><script>//天地图路网var tian_di_tu_road_layer = new ol.layer.Tile({title: "天地图路网",source: new ol.source.XYZ({url: "/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=50059cc572a67fe5db3098190ef4ca19"})});//天地图注记var tian_di_tu_annotation = new ol.layer.Tile({title: "天地图标记",source: new ol.source.XYZ({url: '/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=50059cc572a67fe5db3098190ef4ca19'})});//天地图卫星影像var tian_di_tu_satellite_layer = new ol.layer.Tile({title: "天地图卫星影像",source: new ol.source.XYZ({url: '/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=50059cc572a67fe5db3098190ef4ca19'})});//定义地图显示中心var center = ol.proj.transform([112.73, 38.42], "EPSG:4326", "EPSG:3857");// 创建地图：ol.Map是最主要的地图类，创建地图就需要构造这么一个对象var map = new ol.Map({//让id为map的div作为地图的容器target: 'map',//设置地图图层layers: [//new ol.layer.Tile({//source: new ol.source.XYZ({//url: 'https://t0./img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=50059cc572a67fe5db3098190ef4ca19',//}),//isGroup: true,//name: '天地图影像'//}),//new ol.layer.Tile({//source: new ol.source.XYZ({//url: '/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=50059cc572a67fe5db3098190ef4ca19'//}),//isGroup: true,//name: '天地图文字标注'//}),//new ol.layer.Tile({//source: new ol.source.XYZ({//url: '/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=50059cc572a67fe5db3098190ef4ca19'//}),//isGroup: true,//name: '天地图路网'//})],//设置显示地图的视图view: new ol.View({center: center,zoom: 12})});//map.addLayer(tian_di_tu_road_layer);//map.addLayer(tian_di_tu_annotation);map.addLayer(tian_di_tu_satellite_layer);</script></body></html>
![[推荐]中国达人秀：刘伟的1500字作文](https://1500zi.500zi.com/uploadfile/img/2024/08/28/d8eef0d8c8c197a59e7d5cc3ca1e9f0f.jpg)
