2016-12-07 28 views
1

Openlayers3とgeoserver/geowebcacheをバックエンドとして使用して小さなWebマップを作成しています。Openlayers3:バックグラウンドとしてGeoserver/Geowebcacheを使用してpixelratio = 3のタイルグリッドが正しくありません

私の目標は、pixelratio = 1、pixelratio = 2、pixelratio = 3のブラウザ/ディスプレイをサポートすることです。

そのために、タイルサイズ256x256,512x512、および768x768のジオサーババックエンド3グリッドセットで定義しました。 私は仮定する:

  • pixelratio = 1タイルとgridsetが256×256
  • pixelratio = 2タイルとgridset = 3 512×512
  • pixelratioタイルと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は270に768x768とDPIにタイルのサイズを変更しますが、明らかにしませんグリッドを正しく計算します。

Geoserverのデモマップ(Openlayers2に基づく)は、3つのグリッドセットすべてで動作します。

私はgeoserver 2.10とgoogle chromeを使用しています。 これまでのコードです。解決策と境界は、バックエンドの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> 

答えて

2

犯人かもしれないあなたのコードを持ついくつかの問題があります。

  1. projectionol.source.TileWMSインスタンスではなく、ol.layer.Tileに設定する必要があります。
  2. ol.layer.Tileの範囲を制限するには、オプションを使用してください(extendではなく)。上記2 を修正

アプリケーションを動作させるかもしれませんが、注意点があります。

あなたがキャッシュされたタイルが常に使用されていることを確認したい場合は、あなたが特定のピクセル比にアプリケーションを制限しなければならないが。あなたの場合1,2,3。serverType: 'geoserver'オプションを設定したol.source.TileWMSを使用している場合は、正確なデバイスピクセル比率を使用してリクエストが行われます。デバイスのピクセル比率は、常に1.33,1.5,6、またはその他の多くの値タイル

この問題を解決するには、代わりにtilePixelRatioでソースを設定し、WMSを引き続き使用する場合はserverTypeオプションを使用しないことをお勧めします。私が代わりにTMSまたはWMTSを使用することをお勧めします

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

tilePixelRatioは次のように計算することができます。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_256grid_512grid_768という名前の、そしてすべてが同じタイルマトリクスセットを使用することを前提としていそのため、タイルの幅と高さはピクセル単位でしか異なりません(256,512,768)。

+0

ありがとうございます! 'tilePixelRatio:tilePixelRatio'がトリックをしました。しかし、今はTMSプロトコルを使って同じことをテストしています。私はここで新しい質問をしました:http://stackoverflow.com/questions/41056640/geowebcache-openlayers3-with-xyz-source-error-by-zooming-the-map。多分あなたは一見を与えることができます。 –

関連する問題