Serving png image tiles using geoserver

Question

I have managed to :

1) Create layers
2) Applied SLD Styles
3) Group the layers together and able to preview

What I have is this(layer preview):

I would now want to serve this layer via tiles. Something like what open street map does, an example would be, https://a.tile.openstreetmap.org/14/12917/8131.png as my mobile application will be getting the map tiles from this server itself.

How do I go about doing this? Leaflet?

Based on BradHards's Suggestion, I have installed geowebcache and am trying to serve tms /wtms with some problems.

This is my WMTS get capabilties file Link here, and TMS is here

<TileMap title="OSM layerGroup" srs="EPSG:900913" profile="global-mercator" href="http://10.18.144.176:8181/geowebcache/service/tms/1.0.0/OSM+layerGroup@EPSG%3A900913@png"/>
<TileMap title="OSM layerGroup" srs="EPSG:4326" profile="global-geodetic" href="http://10.18.144.176:8181/geowebcache/service/tms/1.0.0/OSM+layerGroup@EPSG%3A4326@png"/>

---

I have tried using TMS, for example a working link in my local client produces something like this: http://localhost:8181/geowebcache/service/tms/1.0.0/osm_sgmy@EPSG%3A900913@png%22/1/1/1.png

using another test link would result in this: http://localhost:8181/geowebcache/service/tms/1.0.0/osm_sgmy@EPSG%3A900913@png%22/1/2/2.png

Coverage [minx,miny,maxx,maxy] is [-1, 0, 2, 1, 1], index [x,y,z] is [2, 2, 1]

This is my geowebcache-core-context.xml file config snippet:

 <bean id="gwcWMSConfig" class="org.geowebcache.config.GetCapabilitiesConfiguration">
    <constructor-arg ref="gwcGridSetBroker">
    </constructor-arg>
    <!-- <constructor-arg value="http://10.18.144.176:8080/geoserver/osm/wms?service=WMS&amp;version=1.1.0&amp;request=GetCapabilities"> -->
     <constructor-arg value="http://10.18.144.176:8080/geoserver/osm_sgmy/wms?service=WMS&amp;version=1.1.0&amp;request=GetCapabilities">
      <description>The URL to the WMS GetCapabilities document, notice &amp; , port is normally 8080</description>
    </constructor-arg>
    <constructor-arg value="image/png">
      <description>The formats to support for all layers read for the above document</description>
    </constructor-arg>
    <constructor-arg value="3x3">
      <description>Metatiling factors, 3x3 is usually a good compromise for vector data</description>
    </constructor-arg>
    <constructor-arg value="map=/osgeo/mapserver/msautotest/world/world.map">
      <description>
          Vendor parameters, these are appended to every request sent to the backend.
          If you use MapServer you probably want to set this to "map=name". Leave the value attribute empty if you don't need
          to add any vendor specific parameter.
      </description>
    </constructor-arg>
    <constructor-arg value="false">
      <description>Whether to allow cached=false to specificed for certain requests</description>
    </constructor-arg>

    <property name="primaryConfig" ref="gwcXmlConfig">
      <description>The configuration object with the global defaults to use for new layers</description>
    </property>

In summary, I want to make my geoserver/geowebcache able to serve tiles in a X/Y/Z format like:

http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}

Answer 1

If you're happy to use Leaflet, you can get the best, and cached, performance by using the GeoWebCache endpoint, like this:

var leafletLayer = new L.TileLayer.WMS(rootURL + "geoserver/gwc/service/wms", {
    layers: 'workspace:layer_name',
    format: 'image/png',
    transparent: true
});

The /gwc endpoint will include all the fancy caching and what not to make it faster. You will need to invalidate that cache if you change the underlying data, but you can do that using the REST API without too much effort.

Answer 2

The best option I've come across previously is Create a custom webmap with custom raster overlay from multiples PNGs.

The author, Xavier Raffin, provides an in-depth tutorial to provide the steps in serving your png tiles on GeoServer. Where he develops:

A fully cached web maps tiled and served within TMS urls.

The general principle follow several steps:

• Change color channels to merge Red Green Blue into one channels
• Merge overlapping images
• Add geographical data into images transforming PNGs into geotiff
• Remove geotiff RGB palette
• Build an Image pyramid from Geotiff images
• Transform images in pyramid into 1 color band images
• Loading images into Geoserver
• Finalize layer style: apply final color, merge with other layers
• Build TMS directory tree with Mapproxy
• Serve tile from this directory with NGINX
• Built a leaflet map on a webpage

Answer 3

I used leaflet to serve WMS instead.

http://leafletjs.com/examples/wms/wms.html

An example of the HTML I used would be:

function loadWMS(){

  var map = L.map('mapid', {zoom:15, zoomControl:false});
  map.setView(new L.LatLng(1.3404853,103.8154618),15);
  var wmsLayer = L.tileLayer.wms('http://10.18.144.176:8080/geoserver/osm/wms?'
  , { layers: 'Your Layer name/Your LayerGroup name'}).addTo(map);

}