在地图开发中，加载底图是一个最基本的操作，使用在线开放底图、自己发布的底图、或是客户提供的给底图服务，都存在一定的规律，掌握规律就能顺利的进行底图加载，本文通过以下四个方面，讲一下mapbox-gl加载各种底图技巧。

(资料图片)

xyz/tms形式的底图加载；

wmts形式的底图加载；

wms形式底图加载；

使用一张图片做底图；

矢量切片底图加载

mapbox-gl作为一个成熟的前端地图引擎，对于常规的底图服务都能够进行支持，还衍生出来新的矢量切片底图格式，但是，在坐标系支持方面，相比openlayers、leafletjs还是差一些，所以，在专业的、特殊坐标系方面，使用还需谨慎。

一、xyz/tms形式的底图加载

xyz/tms形式的底图服务，是通过x、y、z三个参数，来确定进行底图切片进行加载，典型代表是天地图的底图服务：

https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=<天地图token>

按照{x}\{y}\{z}设置参数就能达到进行加载；

一般的影像切片尺寸是256*256，矢量切片的尺寸是512*512；

mapbox-gl默认切片结构是xyz，当服务是tms时，需要在数据源上进行注明，scheme：tms;

xyz和tms的区别是中心点不同，一个在地图的左上角，一个在左下角，两者的x是一致的，只是y不同。

二、wmts形式的底图加载

wmts形式的底图服务，是通过一系列的参数，来确定进行底图切片加载的，常用GIS server都支持wmts服务发布，比如Arcgis Server、超图的iServer、开源的Geoserver等。

在wmst服务的请求中，添加REQUEST=GetCapabilities请求字段，能够返回wmts发布图层的配置信息，作为标准服务，无论何种Server发布都是一样的。

以下是一个wmts服务返回的信息部分截图：

按照天地图以wmts加载底图的形式：

http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=<your token>

TileMatrix对应缩放级别（z）;

TileRow对应列数（tilecol &y）；

TileCol对应行数（tilerow&x）；

LAYER获取不同的图层；

tileMatrixSet获取不同坐标系；

按照以上的设置方式，mapbox-gl就能够将wmts底图加载上了。

未完下篇继续...

标签：