3

I want to compare performance of my OL app using tiles from GWC and compared to loading them locally from the HD.

Usually I load local tiles that were generated using GDAL with the following code :

var trails= new ol.layer.Tile({
title: 'Bike Trails',
type: 'base',
visible: false,
source: new ol.source.XYZ({
    tileUrlFunction: function(coordinate) {
        if (coordinate == null) {
            return "";
        }
        var z = coordinate[0];
        var x = coordinate[1];
        var y = -coordinate[2] - 1; //3.7.0

        return 'tiles/trailes/' + z + '/' + x + '/' + y + '.png';
    }
})

});

but GWC tiles are generated in different structure / numbers.

GWC struct is :

EPSG4226_Zoom/NNN_NNN/NNNNNN_NNNNNN.png

below the root folder there are many folders named like 076_042 and below them the tiles are named 12 digits with underscore in the middile like :

019470_010907.png

Any idea how to adapt the function to support GWC local tiles ?

  • GeoWebCache creates a directory structure so that subdirectories have less files than with the z/x/y structure. I suppose that for adapting your function you should find out how GWC builds the cache tree. Perhaps the place to read is github.com/GeoWebCache/geowebcache/tree/master/geowebcache/core/… – user30184 Aug 21 '18 at 8:46
  • I've read somehwhere that someone found a way to adapt the js code to show the GWC offline tiles using openlayers , but couldn't find the source to download the js code. – Alophind Aug 26 '18 at 11:42
1

I've not used GWC but it appears to work as a cached tiled WMS service http://docs.geoserver.org/latest/en/user/geowebcache/troubleshooting.html

While that would normally be set up as a TileWMS source I have also had occasions where for compatiblility with other processing everything was needed as an XYZ with a tileUrlFunction. Here's my code for setting up an OSM cached WMS service by both methods. You will need to refer to the GWC documentation for exactly which WMS parameters you will need, but mostly the WMS parameters will be fixed and only the BBOX needs to be calculated from the tileUrlFunction coordinates.

var projection = ol.proj.get('EPSG:900913');
var origin = ol.extent.getTopLeft(projection.getExtent());
var maxResolution = ol.extent.getWidth(projection.getExtent()) / 256;

var resolutions = [];
for (var i = 0; i < 23; i++) {
    resolutions[i] = maxResolution / Math.pow(2, i);
}

var attribs = [ "<a href='http://www.osm-wms.de/' target='_blank'>World OSM WMS</a> " +
                "Map data &copy; <a href='http://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> " +
                "contributors,  CC BY-SA The data is licensed as Creative Commons Attribution-Share Alike 2.0" ]

var layer = new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'http://129.206.228.72/cached/osm',
        params: {
            'VERSION': '1.1.1',
            'LAYERS': 'osm_auto:all'
        },
        attributions: attribs,
        tileGrid: new ol.tilegrid.TileGrid({ resolutions: resolutions,
                                             tileSize: 256,
                                             origin: origin })
    }),
});


var layerX = new ol.layer.Tile({
    source: new ol.source.XYZ({
        attributions: attribs,
        tileGrid: new ol.tilegrid.TileGrid({ resolutions: resolutions,
                                             tileSize: 256,
                                             origin: origin }),
        tileUrlFunction: function(tileCoord) {
            return "http://129.206.228.72/cached/osm?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng" +
                   "&TRANSPARENT=true&LAYERS=osm_auto%3Aall&WIDTH=256&HEIGHT=256&SRS=EPSG%3A900913&STYLES=&BBOX=" +
                   this.getTileGrid().getTileCoordExtent(tileCoord).toString();
        }
    }),
});

Good point @user30184. A google search quickly found what might be part of the answer to that http://geowebcache.org/docs/current/configuration/storage.html

This is the sample in that documentation.

var map = new ol.Map({
  target: 'map',
  controls: ol.control.defaults(),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        projection: "EPSG:4326",
        url: 'http://my-geowebcache-bucket.s3.amazonaws.com/test-cache/topp%3Astates/EPSG%3A4326/png8/default/{z}/{x}/{-y}.png'
      })
    })
  ],
  view: new ol.View({
    projection: "EPSG:4326",
    center: [-104, 39],
    zoom: 2
  })
});

While the exact location of my-geowebcache-bucket.s3.amazonaws.com on the disk would be a configuration issue, the equivalent code for a TMS structure (tiles ascending from a botton left origin) using a tileUrlFunction (and changed to 3857 for consistency with the sample in the question) would be

source: new ol.source.XYZ({
    tileGrid: new ol.tilegrid.TileGrid({
        resolutions: ol.tilegrid.createXYZ().getResolutions(),
        tileSizes: ol.tilegrid.createXYZ().getTileSizes(),
        origin: ol.extent.getBottomLeft(ol.proj.get('EPSG:3857').getExtent())
     }),
     tileUrlFunction: function(coordinate) {
        if (coordinate == null) {
            return "";
        }
        var z = coordinate[0];
        var x = coordinate[1];
        var y = coordinate[2];

        return 'test-cache/topp%3Astates/EPSG%3A3857/png8/default/' + z + '/' + x + '/' + y + '.png';
    }
})
  • 1
    Your answer does not answer the question that was about how to read the cached tiles directly from file system. – user30184 Aug 30 '18 at 13:52
  • This is not working because the folder structure using GWC is different than what you wrote , the Z is part of the root folder and below that there are many folders in the format XXX_XXX and the tiles are names NNNNNN_NNNNNN.png – Alophind Sep 2 '18 at 8:36
  • I've added folder name and files in main question – Alophind Sep 2 '18 at 8:39

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.