OpenLayers調用GeoServer發布的影像切片

　　背景

　　影像發布為WMS調用時會很慢。

　　環境：Win7

　　　　　OpenLayers4.6.5

　　　　　Geoserver2.14.3

　　解決方案

　　考慮發布為TMS，然后用OpenLayers調用。

　　步驟

　　一.發布切片影像

　　以tif影像為例，首先要將影像發布出來，發布的時候要把坐標系設置為“3857”，另外“Suggested Tile Size”設置為“256,256”

　　

 

 　　新建/復制Gridsets文件。我們已知文件中有check按鈕是灰色的，因為這是GeoServer自帶的，不能刪除，我們可以直接copy系統自帶的文件，然后自己用，不過可以根據需要做一下修改

　　

　　系統自帶的是21級，但是不滿足我的需求，所以多加了幾個縮放級別到24級，點擊保存

　　

 

 

 

　　

 

　　然后回到已發布的圖層文件，設置瓦片緩存

 　　

 

 　　此處圖片可以只設置png，如果多選會切多種格式的圖片；

　　添加我們之前設置的Gridset，設置縮放級別。此處Gridset也可以多選，多選會根據多種切片規則來切，我們只選擇一種；

　　點擊保存，啟動任務

　　

　　　單擊“Tile Layers”，顯示切片圖層列表，找到要切片的圖層，單擊Seed/Truncate

　　

 

 　　設置完成后單擊submit，如果級數很多耗時也會很多，等待就好了

 　　

 

 　　生成的切片文件默認目錄為“E:\Program Files (x86)\GeoServer 2.14.3\data_dir\gwc\圖層名稱”，可以點進去看看，由於我發布的影像范圍本來就很小，所以是從14以上才有的切片

　　

 

 　　二.用openlayers調用切片服務

　　找到調用地址，主頁里面

　　

 

 　　

 

 

　　核心代碼　　

      var url2='http://x.x.x.x:8090/geoserver/gwc/service/tms/1.0.0/Demo%3APark@My_EPSG%3A4326@png/';
     
      var projectionXYZ=new ol.proj.get("EPSG:4326");
      var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625, 0.000010728836059570312, 0.000005364418029785156, 0.000002682209014892578, 0.000001341104507446289, 6.705522537231445e-7, 3.3527612686157227e-7,0.0000001676380634,0.0000000838190317,0.0000000419095159];
      
      var testLayer = new ol.layer.Tile({
          // extent: [],
          source: new ol.source.XYZ({
            projection: projectionXYZ,
            maxZoom: 24,
            minZoom: 0,
            tileGrid: ol.tilegrid.createXYZ({
                    extent: projectionXYZ.getExtent()
                }),
            tileGrid: new ol.tilegrid.TileGrid({
              extent: ol.proj.get('EPSG:4326').getExtent(),
              origin: [-180, -90],
              resolutions:resolutions,
              
            }),
            tileUrlFunction: function (tileCoord) {
              projection:new ol.proj.get('EPSG:4326');
              var z = tileCoord[0];
              var x = tileCoord[1];
              var y = tileCoord[2];
              return url2 + z + '/' + x + '/' + y + '.png'
            }
          })
        });

 

　　參考

　　geoserver發布切片影像地圖

　　openlayer4 調用 geoserver的 tms 服務

　　GEOServer-OpenLayer-矢量切片3：PBF格式格式展示（tms服務）

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