获取天地图API并调用不同的地图API接口

文章目录

概要
1.如何获取地图API
2.如何使用天地图API
2.1 注意请求示例中的代码

概要

本篇文章主要是想将我在学习webGIS过程只能遇到的一些问题分享给需要的朋友，喜欢的可以点赞给点鼓励，后续会继续更新相关内容

要讲的内容主要是如何获取地图api，并在项目中调用

1.如何获取地图API

在网上许多开源的地图api，这里我想介绍的是国家地理信息公共服务平台，

直接搜索天地图官网就可以知道

进去之后选择称为开发者，然后注册账号并登录

成为开发者之后就可以查看地图地图api了

可以看到矢量图，影像图，注记图等2维地图，还可以看到3D地图api，所以一般就可以满足我们的日常使用了

2.如何使用天地图API

可以通过天地图官方提供的方法使用天地图，或者通过OpenLayers、Leaflet库在项目中使用，不论是哪种方式，都需要加载地图地址，这里主要讲解一下关于天地图API如何使用。

通过服务地址可以看出来，需要申请key配合服务使用，进入控制台创建新的应用，选择浏览器端就可以了

准备工作做好之后就开始调用api地址

这里要注意：直接使用地图服务列表里面的服务地址是不行的，翻到页面最下面，看官方提供的请求示例

我们一般直接使用第二步地图瓦片获取的代码最为API地址

这里有几个注意点要强调一下：

2.1 注意请求示例中的代码

第一点：我们可以发现地图服务列表，即下面这个表中服务地址的不同点就在于我框选出来的部分，他们代表了不同的地图，就比如矢量底图中的vec_c 和vec_w两种名字代表了两种投影坐标，然后我们看官方给的请求示例地址，即上面的图中我框选的内容img_w代表的是影像底图球面墨卡托投影，所以后面的一串代码中的参数要和img_w对应，LAYER=img，TILEMATRIXSE=w。

第二点：我用圆圈框选的三个坐标轴z x y顺序写错了，我感觉应该是官方的错误，导致加载出来的影像坐标轴错误，查阅其他资料发现正确的顺序应该是z y x，这里只需要把x 和 y两个字母的顺序换一下就行了

第三点：就是要将密钥换成你控制台申请的key值

我这里是以OpenLayers为例，结合vue2加载天地图影像，安装OpenLayers包我就不讲了，需要的可以查看我其他的文章，直接上代码

import Map from 'ol/Map.js'
import View from 'ol/View.js'
import TileLayer from 'ol/layer/Tile.js'
import XYZ from 'ol/source/XYZ'
import 'ol/ol.css'
import data from '../../public/district.json'
// import loadGeoJson from './loadgeojson'function olmap() {// 初始化天地图影像const skymap = new TileLayer({title: '天地图影像',source: new XYZ({// url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg', //影像服务地址-ol.XYZ,// 影像地图 img_w代表球面墨卡托投影  后面对应LAYER=img    TILEMATRIXSET=w  另外代码中间的参数zxy顺序错了，应改成z y xurl: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=95df243f8b72993f9e07a38e30be979c', //影像服务地址-ol.XYZ,// 影像地图 img_c代表   经纬度投影  后面对应LAYER=img  TILEMATRIXSET=c  另外代码中间的参数zxy顺序错了，应改成z y x// 经纬度投影和给定坐标系不同，所以偏移较大// url: 'http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=95df243f8b72993f9e07a38e30be979c',}),})// 加载注记图层const zhuji = new TileLayer({title: '注记图层',source: new XYZ({// url: 'http://t4.tianditu.com/DataServer?T=cva_w&tk=b9031f80391e6b65bd1dd80dcde1b097&x={x}&y={y}&l={z}', //标注服务地址-ol.XYZ,//影像注记url: 'http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=95df243f8b72993f9e07a38e30be979c',}),})// XYZ瓦片图服务（天地图）const map = new Map({view: new View({projection: 'EPSG:4326', //坐标系，即地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。//中心点// center: { longitude: 94.06865489300723, latitude: 29.620207697126617 },center: [94.06865489300723, 29.620207697126617],//缩放比例zoom: 7.7,//调整像素比例为当前浏览器的默认像素比pixelRatio: window.devicePixelRatio,//ol.view缩放比限定:[0,18]view_maxZoom: 18,view_minZoom: 0,}),layers: [skymap, zhuji],target: 'map',})// 加载geoJson数据// loadGeoJson(map, data)
}
export default olmap

我们拿代码来看一下：

url: 'http://t0.tianditu.gov.cn/img_w/wmts?
SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0
&LAYER=img&STYLE=default&TILEMATRIXSET=w
&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}
&TILECOL={x}&tk=95df243f8b72993f9e07a38e30be979c',

影像地图 img_w代表球面墨卡托投影后面对应LAYER=img TILEMATRIXSET=w 另外代码中间的参数zxy顺序错了应改成z y x就可以了

当我们了解代码每一部分对应的是什么之后就可以通过需要来更改代码，下面将球面墨卡托投影影像地图更换为经纬度投影影像地图，复制代码

影像地图 img_c代表经纬度投影后面对应LAYER=img TILEMATRIXSET=c

通过更改参数就可以实现加载不同底图的效果

 url: 'http://t0.tianditu.gov.cn/img_c/wmts
?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0
&LAYER=img&STYLE=default&TILEMATRIXSET=c
&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}
&TILECOL={x}&tk=95df243f8b72993f9e07a38e30be979c'