?????????很多時候我們即使做完了項目還是對切片規則一知半解，只知道照著例子寫代碼，不理解WMTSCapabilities文件中參數的具體含義，也無法理解切片規則是如何產生的，不知道經緯度切圖和平面切圖的差別是啥，等等種種疑問，下面通過我得介紹希望可以解決你的疑問。

---

切片前期知識點

常見地圖縮放層級有多少？

答：0-18級別

要想在平面地圖上顯示地球就要用到影像金字塔，什么是影像金字塔了？

答：就是“邊長” 2的冪次方放大18倍，例如第一層級就只有2零次方邊長就是1，總切片數就是1*1，以此類推2的1次方邊長就是2，總切片數量就是兩邊長相乘2*2，然后往下一直分下去，不管是什么切片都遵循這個規則。

下圖所示谷歌XYZ切片層級如下：是1=1*1，4=2*2，16=4*4 依次遞增的，所以我們得到一個答案每個層級的切片數量是固定的！！！

這就是第二層級瓦片加載的樣子，一共四張圖片，2*2

切片相關知識有哪些？

切片大小：256

比例尺：就是實際距離比上切片大小

我們有了上面這些知識可以適當的上代碼了

//這段代碼是openlayer wmts 加載的一段代碼
//(這里是全球切片，所以還差個東西就是初始的原點坐標，
//因為絕大部分圖層我們只想加載指定范圍的切片這個時候就要用到原點坐標(通常就是地圖范圍的左上角))
const projection = getProjection('EPSG:3857'); 
const projectionExtent = projection.getExtent(); //獲取地圖范圍
const width = getWidth(projectionExtent); //獲取地圖寬度
const resolutions = new Array(19); //用來裝比例尺
const matrixIds = new Array(19); //用來放層級
for (let z = 0; z < 19; ++z) {resolutions[z] = width / (256 * Math.pow(2, z)); //比例尺=實際寬度/(切片寬度 * x軸上切片個數)matrixIds[z] = z;
}

我們已經基本清楚了瓦片加載的步驟了，切片和這個是一樣的，就是按照這個把地圖瓦片先切圖，因為切片規則是定死的所以前端加載也是定死的。

或許你還有些疑問就這樣將地圖進行變形和實際差別得多大啊？答是究極大，3857得切片是按照平面投影切得，兩極看起來都比中國大了，那為什么要這樣做？因為簡單！！！！你沒看錯就因為簡單！！！

XYZ切片

其實通過上面得知識我們已經知道XYZ切片得規則了，這里提一嘴就是XYZ里面有個TMS，TMS和XYZ唯一得差別就是原點坐標不同，TMS原點坐標在左下方，所以加載得時候需要注意一下Y值。

wmts切片

1.為什么有wmts?
答案：由于xyz通常是全球切片，然后OGC（一個操蛋得組織，搞些花里胡哨得東西）為了滿足區域切片而定制得規則，其實和xyz是一樣得，唯一得區別是原點坐標可以挪到任意位置了，而xyz通常原點坐標都在全球范圍得左上方，就這一個區別。

請求路徑通常是這樣

https://koordinates-tiles-a.global.ssl.fastly.net/services;key=d740ea02e0c44cafb70dce31a774ca10/tiles/v4/layer=7328,{style}/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png

這樣你就很容易得到了他們得對應關系了，甭管wmts,xyz,都是從（0,0）開始加載切片請求方式基本無二樣。

wmts:{TileMatrix}/{TileCol}/{TileRow}.png
xyz:{z}/{x}/{y}.png

下圖介紹了wmts?Capabilities配置文件得具體內容：

wms切片

1.那么問題來了為啥又有wms服務了？

答：因為矢量數據到設置樣式到出圖切片是一個繁瑣得過程，為了簡化這個過程WMS誕生了，可以動態繪制樣式得切片服務，犧牲服務器性能換來得是矢量數據編輯wms立馬反應出來了。既然邏輯是這樣wms就有一些新花樣，例如一張圖片包含所有要素，前端只請求指定范圍，每次地圖位置更新都會去請求一張wms圖片回來,還有一種就是分多張圖片去加載wms服務，這個時候就和xyz,wmts完全不一樣了，這個時候是前端計算范圍，通過范圍和切片大小確定返回得數據和圖片。這個其實比xyz好理解一些，就是按照范圍和圖片大小，樣式后端來繪制圖片。

#wms title 參數如下REQUEST: GetMap
SERVICE: WMS
VERSION: 1.3.0
FORMAT: image/png
STYLES: 
TRANSPARENT: true
LAYERS: topp:states
TILED: true
WIDTH: 256
HEIGHT: 256
CRS: EPSG:3857
BBOX: -13149614.849955441,4383204.9499851465,-12523442.714243278,5009377.08569731

矢量切片

矢量切片其實就是xyz切片，只不過換成了矢量結構得pbf壓縮文件進行傳輸，postgresql數據庫可以對矢量進行生成pbf操作。。。

總結一下

沒什么難的都很簡單，不要想復雜了。。。。當你把知識串起來就知道了。以上。