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>