在地圖開(kāi)發(fā)中，加載底圖是一個(gè)最基本的操作，使用在線開(kāi)放底圖、自己發(fā)布的底圖、或是客戶(hù)提供的給底圖服務(wù)，都存在一定的規(guī)律，掌握規(guī)律就能順利的進(jìn)行底圖加載，本文通過(guò)以下四個(gè)方面，講一下mapbox-gl加載各種底圖技巧。

• xyz/tms形式的底圖加載；

• wmts形式的底圖加載；

• wms形式底圖加載；

• 使用一張圖片做底圖；

• 矢量切片底圖加載

mapbox-gl作為一個(gè)成熟的前端地圖引擎，對(duì)于常規(guī)的底圖服務(wù)都能夠進(jìn)行支持，還衍生出來(lái)新的矢量切片底圖格式，但是，在坐標(biāo)系支持方面，相比openlayers、leafletjs還是差一些，所以，在專(zhuān)業(yè)的、特殊坐標(biāo)系方面，使用還需謹(jǐn)慎。

一、xyz/tms形式的底圖加載

xyz/tms形式的底圖服務(wù)，是通過(guò)x、y、z三個(gè)參數(shù)，來(lái)確定進(jìn)行底圖切片進(jìn)行加載，典型代表是天地圖的底圖服務(wù)：

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

按照{(diào)x}\{y}\{z}設(shè)置參數(shù)就能達(dá)到進(jìn)行加載；

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

mapbox-gl默認(rèn)切片結(jié)構(gòu)是xyz，當(dāng)服務(wù)是tms時(shí)，需要在數(shù)據(jù)源上進(jìn)行注明，scheme：tms;

xyz和tms的區(qū)別是中心點(diǎn)不同，一個(gè)在地圖的左上角，一個(gè)在左下角，兩者的x是一致的，只是y不同。

二、wmts形式的底圖加載

wmts形式的底圖服務(wù)，是通過(guò)一系列的參數(shù)，來(lái)確定進(jìn)行底圖切片加載的，常用GIS server都支持wmts服務(wù)發(fā)布，比如Arcgis Server、超圖的iServer、開(kāi)源的Geoserver等。

在wmst服務(wù)的請(qǐng)求中，添加REQUEST=GetCapabilities請(qǐng)求字段，能夠返回wmts發(fā)布圖層的配置信息，作為標(biāo)準(zhǔn)服務(wù)，無(wú)論何種Server發(fā)布都是一樣的。

以下是一個(gè)wmts服務(wù)返回的信息部分截圖：

按照天地圖以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對(duì)應(yīng)縮放級(jí)別（z）;

• TileRow對(duì)應(yīng)列數(shù)（tilecol &y）；

• TileCol對(duì)應(yīng)行數(shù)（tilerow&x）；

• LAYER獲取不同的圖層；

• tileMatrixSet獲取不同坐標(biāo)系；

按照以上的設(shè)置方式，mapbox-gl就能夠?qū)mts底圖加載上了。

未完下篇繼續(xù)...