openlayers 3 - Serve GeoServer Tiles in XYZ format

Question

I am using GeoServer and seed tiles on my server. The tiles are created successfully but i dont know which pattern the directory structure is following... (i.e. .../EPSG_4326_05/0_0/00_06.png) I want to use the tiles in a OpenLayers application and there i want to use a OSM source which is using the XYZ-pattern which is commonly used as URL pattern for tile-serving. Is there a way to tell the geoserver it should create the tiles with the XYZ structure?

Answer 1

Cool, I had the same question one hour ago. Here goes the summary.

Note:

What the OP calls XYZ format is the format popularized by Google Maps where a global/basemap is server-side split and served as tiles in a {z}/{x}/{y} format where zoom, latitude and longitude are represented internally [1]. Effectively, the name of the service providing such "format" is Tile Map Service (TMS)[2], and GeoServer does provide such service [3]. XYZ is just the name of the class in OpenLayers used to access a TMS server [4].

That being said, here is how you'd do to have a TMS service running between your GeoServer and OpenLayers:

• Check if your GeoServer' Caching Defaults has GeoWebCache and the TMS service enabled. I am currently using GS-2.14.3 and those are enabled by default.

With GWC and TMS enabled you should see your raster layers listed under http://localhost:8080/gwc/service/tms/1.0.0 (or, in general, <geoserver-path>/gmc/service/tms/1.0.0).

Then, you just have to call one of those TileMaps from OpenLayer:

var tileURL = "<tilemap-from-gwc-list-above>" + "/{z}/{x}/{-y}.jpg" // or '.png'

var map = new ol.Map(<your params here>);

var bm = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: tileURL
  })
})
map.addLayer(bm)

Hope that helps. Cheers.

---

Refs:

1. Google/TMS format: https://www.maptiler.com/google-maps-coordinates-tile-bounds-projection/
2. TMS specification: https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification
3. TMS in Leaflet: https://leafletjs.com/examples/wms/wms.html#tms-in-leaflet
4. TMS/XYZ OpenLayers: https://openlayers.org/en/latest/apidoc/module-ol_source_XYZ-XYZ.html