Openlayers3: неправильная сетка плитки с pixelratio = 3 с использованием Geoserver/Geowebcache в качестве backend

Я разрабатываю небольшую веб-карту с использованием Openlayers3 и geoserver/geowebcache в качестве backend.Openlayers3: неправильная сетка плитки с pixelratio = 3 с использованием Geoserver/Geowebcache в качестве backend

Моя цель - поддерживать браузеры/дисплеи с pixelratio = 1, pixelratio = 2 и pixelratio = 3.

Для этого я определил на бэкэнде geoserver 3 сетки с размерами плиток размером 256x256, 512x512 и 768x768. Я полагаю, что:

pixelratio = 1 требует gridset плиткой размерами 256х256
pixelratio = 2 требует gridset плиткой размером 512x512
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 и google хром. Это мой код. Резолюции и оценки одинаковы для всех 3 наборов сеток в backend. Любая помощь приветствуется:

<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: неправильная сетка плитки с pixelratio = 3 с использованием Geoserver/Geowebcache в качестве backend

ответ

Смежные вопросы