Openlayers3：使用Geoserver/Geowebcache作爲後端的pixelratio = 3的網格柵格不正確

我正在開發一個使用Openlayers3和geoserver/geowebcache作爲後端的小型webmap。Openlayers3：使用Geoserver/Geowebcache作爲後端的pixelratio = 3的網格柵格不正確

我的目標是支持pixelratio = 1，pixelratio = 2和pixelratio = 3的瀏覽器/顯示器。

爲此，我在geoserver backend 3個網格集中定義了256x256,512x512和768x768的圖塊。我假定：

pixelratio = 1需要與瓷磚的gridset尺寸256×256
pixelratio = 2需要與瓷磚的gridset尺寸512×512
pixelratio = 3需要與瓷磚的gridset尺寸768x768

現在，我的代碼只適用於pixelratio = 1和pixelratio = 2。但如果pixelratio = 3 geowebcache返回一個錯誤：

geowebcache-cache-result:MISS 
geowebcache-miss-reason:request does not align to grid(s) 'grid_512' 'grid_768' 'grid_256'

如果pixelratio = 3周的OpenLayers生成這樣一個URL：

http://localhost:8082/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=false&layers=mfn_mwb17%3Amfn_mwb17_0_basemap&TILED=true&WIDTH=768&HEIGHT=768&SRS=EPSG%3A32632&STYLES=&FORMAT_OPTIONS=dpi%3A270&BBOX=536964.8438079988%2C5280880.182948656%2C537609.9638079988%2C5281525.3029486565

Openalayers改變瓦片大小到768x768和DPI至270，但顯然不正確計算網格。

Geoserver中的演示地圖（基於Openlayers2）適用於所有3個網格集。

我使用geoserver 2.10和谷歌瀏覽器。這是我的代碼到目前爲止。所有3個網格集在後端的解析度和邊界都是相同的。任何幫助表示讚賞：

<html> 
<head> 
    <title>WMS Tiles</title> 
    <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css"> 
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> 
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> 
    <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script> 
</head> 
<body> 
<div id="map" class="map"></div> 
<script> 
    console.log("DOMContentLoaded"); 
    try { 
     var config = { 
      "bounds": { 
       "left": 536319.7238079988, 
       "bottom": 5278944.822948656, 
       "right": 540150.3790103362, 
       "top": 5282223.663765706 
      } 
     }; 

     var bounds = [config.bounds.left, config.bounds.bottom, config.bounds.right, config.bounds.top]; 
     var resolutions = [2.5199999999999996, 
      1.2599999999999998, 
      0.6299999999999999, 
      0.31499999999999995, 
      0.15749999999999997, 
      0.07874999999999999, 
      0.03937499999999999 
     ]; 

     var projection = new ol.proj.Projection({ 
      code: 'EPSG:32632' 
     }); 

     var params = { 
      'VERSION': '1.1.1', 
      'layers': "mfn_mwb17:mfn_mwb17_0_basemap", 
      'TILED': true, 
      'TRANSPARENT': false 
     }; 

     var tileGrid = new ol.tilegrid.TileGrid({ 
      extent: bounds, 
      resolutions: resolutions, 
      origin: [config.bounds.left, config.bounds.bottom], 
      tileSize: [256, 256] 
     }); 
     var view = new ol.View({ 
      zoom: 0, 
      center: ol.extent.getCenter(bounds), 
      projection: projection, 
      resolutions: resolutions 
     }); 

     var map = new ol.Map({ 
      controls: ol.control.defaults(
       { 
        rotate: false, 
        attributionOptions: { 
         collapsible: false 
        } 
       } 
      ), 
      view: view, 
      layers: [ 
       new ol.layer.Tile({ 
        source: new ol.source.TileWMS({ 
         url: "http://localhost:8082/wms", 
         params: params, 
         tileGrid: tileGrid, 
         serverType: 'geoserver' 
        }), 
        projection: projection, 
        extend: bounds 
       }) 
      ], 
      target: 'map' 
     }); 
     console.log("no error"); 
    } catch (error) { 
     console.log("error"); 
     console.log(error); 
    } 
</script> 
</body> 
</html>

來源

2016-12-07 Tommaso Di Bucchianico

有你的代碼的幾個問題，可能是罪魁禍首：

projection必須在ol.source.TileWMS實例來配置，而不是ol.layer.Tile。
要限制ol.layer.Tile的範圍，請使用extent選項，而不是extend。

固定上述兩個可能讓您的應用程序的工作，但也有注意事項：

當你要確保緩存切片總是使用，你必須限制你的應用程序的某些象素率。在您的案例1,2和3中。當使用ol.source.TileWMS並配置了選項serverType: 'geoserver'時，請求將始終使用確切的設備像素比率進行，該比率也可以是1.33,1.5,6或您沒有的許多其他不同值瓷磚。

要解決此問題，您需要改爲使用tilePixelRatio配置源，而不要使用serverType選項 - 如果您繼續使用WMS。該tilePixelRatio可以這樣計算：

var tilePixelRatio = 1; 
if (ol.has.DEVICE_PIXEL_RATIO > 2.5) { 
    tilePixelRatio = 3; 
} else if (ol.has.DEVICE_PIXEL_RATIO > 1.5) { 
    tilePixelRatio = 2; 
}

我會建議使用TMS或WMTS代替。對於TMS，事情是這樣的：

var layerName = 'mfn_mwb17:mfn_mwb17_0_basemap'; 
var gridset = 'grid_' + (tilePixelRatio * 256); 
var layer = new ol.layer.Tile({ 
    extent: bounds, 
    source: new ol.source.XYZ({ 
    projection: 'EPSG:32632', 
    tileGrid: tileGrid, 
    tilePixelRatio: tilePixelRatio, 
    url: '/geoserver/gwc/service/tms/1.0.0/' + layerName + 
     '@' + gridset + '@png/{z}/{x}/{-y}.png' 
    }) 
});

以上假設你的gridsets被命名爲grid_256，grid_512和grid_768，並且都使用相同的瓦片矩陣集。所以它們只在像素寬度和高度上有所不同（256,512和768）。

來源

2016-12-08 08:52:20 ahocevar

謝謝它的作品！ 'tilePixelRatio：tilePixelRatio'取得了訣竅。但現在我使用TMS協議測試相同的東西。我在這裏問了一個新問題：http://stackoverflow.com/questions/41056640/geowebcache-openlayers3-with-xyz-source-error-by-zooming-the-map。也許你可以看看。 –

Openlayers3：使用Geoserver/Geowebcache作爲後端的pixelratio = 3的網格柵格不正確

回答

相關問題