OL4如何以TMS服務調用WMTS服務的緩存切片

 

加載地圖切片有兩種方式，一種是TMS服務，一種是WMTS服務，兩種方式加載WMTS服務各有不同，如何用TMS加載geoserver生成的切片呢？

一、TMS和WMTS區別
1、協議

• TMS僅支持RESTFUL
• WMTS支持 RESTFUL、SOAP 、KVP
  RESUTFUL請求形式：http://localhost:8080/geoserver/gwc/service/tms/1.0.0/cite:beijing@EPSG:4326@png/5/53/23.png
  KVP請求形式：http://localhost:8080/geoserver/gwc/service/wmts?layer=cite%3Abeijing&style=&tilematrixset=EPSG%3A4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG%3A4326%3A7&TileCol=207&TileRow=35
  KVP也就是鍵值對的形式
  SOAP請求形式可以查看arcserver(如下圖)
  
  2、瓦片的格式
• TMS瓦片固定了為正方形
• WMTS為矩形，可以長興也可以正方形，換句話說就是tileSizeX和tileSizeY可以不一致

3、坐標系的方向
從上圖可見

• TMS的y軸朝下
• WMTSy軸朝上
  造成會出現y為{-y}這種形式例如：http://localhost:8080/geoserver/gwc/service/tms/1.0.0/cite:beijing@EPSG:4326@png/{z}/{x}/{-y}.png
  4、具有的交互性
• TMS：沒有交互性
• WMTS：GetCapabilities、GetTile、GetFeatureInfo

二、TMS調用geoserver切片方式（自定義坐標系需要設置其他參數）

 var url = 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/cite%3Abeijing@EPSG%3A4326@png/';
        var projection = new ol.proj.get("EPSG:4326");
        var tile= new ol.layer.Tile({
            source: new ol.source.XYZ({
                projection: projection,
                tileGrid: ol.tilegrid.createXYZ({
                    extent: projection.getExtent()
                }),
                tileUrlFunction: function (tileCoord) {
                    return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.png';
                }
            })
        })