3

I have been using Geowebcache inside Geoserver to seed tiles to improve wms performance when using Openlayers to great effect. This has been working well with EPSG:4326 layers, I use the EPSG:4326 gridset and set my layer's bounding box as the full EPSG:4326 extent (-180, -90, 180, 90).

I am now trying to do the same but with EPSG: 27700 projection. This gridset is not available by default so I created it using the "compute from maximum extent of CRS as shown below:

enter image description here

I then set the layers Native Bounding Box to the same extent as the 27700 gridset as shown below:

enter image description here

I then seeded the tiles, interestingly when I opened the seeding page, the default maximum bounds were incorrect showing the extent of the actual data and not the the CRS, see below:

enter image description here

So I made sure to input the full extent in the optional bounding box section. Then I used the following Openlayers code to visualise the layer:

<!DOCTYPE html>
<html>
  <head>
    <title>Tiled WMS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/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/v4.6.5/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

      ol.proj.setProj4(proj4);
      proj4.defs('EPSG:27700','+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs');
      const proj27700 = ol.proj.get('EPSG:27700');
      const center_point = [394108.6719, 331807.5317]; 

      var parser = new ol.format.WMSCapabilities();
      var extentbox = []

      fetch('http://localhost:8080/geoserver/cite/wms?request=getCapabilities&version=1.3.0').then(function(response) {
        return response.text();
      }).then(function(text) {

        var result = parser.read(text);
        extentbox = result.Capability.Layer.Layer[2].BoundingBox[1].extent;
        tilesorigin = extentbox.slice(0,2);
        tilesorigin_string = tilesorigin.toString();
        proj27700.setExtent(extentbox);
        var projectionExtent = proj27700.getExtent();

        var layers = [
          new ol.layer.Tile({
            opacity: 1,
            source: new ol.source.XYZ({
              attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
              'rest/services/World_Imagery/MapServer">ArcGIS</a> 2018',
            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
              'World_Imagery/MapServer/tile/{z}/{y}/{x}'
            })
          }),
          new ol.layer.Tile({
            source: new ol.source.TileWMS({
              url: 'http://localhost:8080/geoserver/cite/wms',
              params: {'LAYERS': 'Flood 3', 'TILED': true, tilesorigin: tilesorigin_string},
              serverType: 'geoserver'
            })
          })
        ];

        var map = new ol.Map({
          layers: layers,
          target: 'map',
          view: new ol.View({
            center: center_point,
            extent: projectionExtent,
            projection: proj27700,
            zoom: 3
          })
        });
      });
    </script>
  </body>
</html>

Which resulted in this output:

enter image description here

Firstly the tiles shifted when I zoomed in and out and secondly the seeded tiles were not being used. I tried changing the the layer extent to its own native bounding box, see below:

enter image description here

This solved the shifting of tiles issue, however the seeded tiles were still no being used. Lastly I changed to EPSG:27700 gridset extent to be the same as the native extent of the data see below:

enter image description here

In this case the seeded tiles were being used however again the tiles kept shifting when I zoomed in and out. I am not sure what I am doing wrong does anyone have any ideas as to how to solve this problem?

I thought it might have something to do the the EPSG:27700 extent that Geoserver automatically calculates which is [-84702.6191473610, -9272.5776518055, 676223.7241900000, 1242876.6670237700] being different to the extent published on various websites, [1393.0196, 13494.9764, 671196.3657, 1230275.0454] "http://spatialreference.org/ref/epsg/osgb-1936-british-national-grid/", however this didn't solve the problem either.

  • Trashmonk, Can you comment as to what you actually did to workaround this problem? I would like to know the answer to your questions in the answer comment below as well (setting the gridset and dataset's bounds, set to same or different coordinates etc.). I am experiencing the same problem. Thanks – cm1 May 24 '18 at 2:33
  • 1
    @cm1, see my answer below. – Trashmonk May 24 '18 at 9:31
2

There is a known issue with GWC and 27700 (or any other Grid with non-integer edges, I suspect) - try using 0,0,700000,1300000 as grid bounds and see if that fixes your issue.

If not then the simplest answer is to use a proper WMTS request with well defined resolutions and tile matrixes that will take the guesswork out of positioning the tiles.

  • 1
    Should I set both the gridset and bounding box of the data layer to 0,0,700000,1300000 or only the gridset? Also do you happen to know if WMTS has a getfeatureinfo request? My understanding was it didn't hence why I wanted to use WMS instead. – Trashmonk May 23 '18 at 15:44
1

cm1, here is where I am up to in trying to solve this problem. I have tried using the coordinates that Ian Turnton provided, trying firstly just to change the gridset and then changing both the gridset and the bounding box of the data. Neither worked. I have decided to move to WMTS, which works with regards to the tiling, here is the Openlayer code:

<!DOCTYPE html>
<html>
  <head>
    <title>WMTS Layer from Capabilities</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/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/v4.6.5/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      ol.proj.setProj4(proj4);
      proj4.defs('EPSG:27700','+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs');
      const proj27700 = ol.proj.get('EPSG:27700');
      const center_point = [394108.6719, 331807.5317];

      var parser = new ol.format.WMTSCapabilities();
      var map;

      fetch('http://localhost:8080/geoserver/cite/gwc/service/wmts?request=getCapabilities').then(function(response) {
        return response.text();
      }).then(function(text) {
        var result = parser.read(text);
        var options = ol.source.WMTS.optionsFromCapabilities(result, {
          layer: 'Flood 3',
          matrixSet: 'EPSG:27700'
        });

        map = new ol.Map({
          layers: [
            new ol.layer.Tile({
              opacity: 1,
              source: new ol.source.XYZ({
                attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
                'rest/services/World_Imagery/MapServer">ArcGIS</a> 2018',
              url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
                'World_Imagery/MapServer/tile/{z}/{y}/{x}'
              })
            }),
            new ol.layer.Tile({
              opacity: 1,
              source: new ol.source.WMTS((options))
            })
          ],
          target: 'map',
          view: new ol.View({
            projection: proj27700,
            center: center_point,
            zoom: 6
          })
        });
      });
    </script>
  </body>
</html>

The problem I am facing now is my old code was written using WMS which has getfeatureinfo as an option, which WMTS does not have in the same form. I now need to look into using the WMTS REST API to get the same option. I am having a lot of difficulty getting information about the API or any good examples of how it is used to getfeatureinfo, like with WMS.

  • Thank you Trashmonk. I am experiencing the same results you have encountered. I am still trying to understand this whole process, what the meaning of "Compute from maximum extent of CRS" and how the coordinates that fill those boxes are generated etc. Thanks for your question and follow-up comments. I think we may need to start some new questions as well. – cm1 May 24 '18 at 16:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.