Does Leaflet actually ask for images in tile shapes when adding WMS layers

Question

I am learning to use Leaflet. I tried adding a WMS layer of schools from GeoServer like this:

 L.tileLayer.wms("http://localhost:8080/geoserver/geog585/wms?", {
        layers: 'geog585:TaipeiSchoolUTF8',
        format: 'image/png',
        transparent: true,
    }).addTo(map);

When I look at the network tab in the developer's tool, I saw the the number of request sent and the number of png files returned from GeoServer is the same as the number of png files returned from the tile base map source I'm using, and the size of these school images returned are what I would expect from OSM/Google Map tiles (256*256). This suggests that the school layer may be returning in the form of tiles. But from the developer's tool, I was also able to see that the requests sent are in the from of WMS request. Here's a sample

Request URL:http://localhost:8080/geoserver/geog585/wms?&service=WMS&request=GetMap&layers=geog585%3ATaipeiSchoolUTF8&styles=&format=image%2Fpng&transparent=true&version=1.1.1&height=256&width=256&srs=EPSG%3A3857&bbox=13521404.55553454,2876478.248427754,13531188.495155042,2886262.188048257
Request Method:GET

So now I am a bit confused. In my understanding, WMS server takes the bbox, crs/srs, height, width requested (and layer and style), draws an image based on these, and sends it to the client. So one might think that Leaflet would sent a WMS request with the bbox of the map view, and width, height, and crs/srs of the map parameters and get a single image in return.

Is it the case that when adding layers to Leaflet, Leaflet want to put everything into tile forms? And so that L.tileLayer.wms() actually sends multiple request that matches the bbox of the tiles the map area covers, and using the conventional width and height of OSM/Google Maps tiles?

Answer 1

And so that L.tileLayer.wms() actually sends multiple request that matches the bbox of the tiles the map area covers, and using the conventional width and height of OSM/Google Maps tiles?

Yes, that's exactly the case.

In my understanding, WMS server takes the bbox, crs/srs, height, width requested (and layer and style), draws an image based on these, and sends it to the client.

Yes.

So one might think that Leaflet would sent a WMS request with the bbox of the map view, and width, height, and crs/srs of the map parameters and get a single image in return.

Unfortunately that line of reasoning is a bit naïve. Since each tile has a corresponding bounding box, it's perfectly feasible to perform one WMS request per tile.

This is done for performance purposes; by requesting the exact same WMS URLs each time that the map is panned or zoomed, the web browser is able to cache the images and not re-request them. In contrast, every time a user pans (even by a few pixels) a single-image WMS map, the WMS server must re-render the entire image, all over again.

It is possible to perform single-image WMS requests via Leaflet (useful in some cases of tile edge artifacts such as clipped labels), by using the plugin at https://github.com/heigeo/leaflet.wms

Answer 2

What Leaflet calls a L.tileLayer.wms is in fact a cheap attempt to implement WMTS using the WMS protocol. It is hoping that the end user will get the benefits of caching the smaller images it is requesting in the browser without giving the server the same chance to save time by being able to cache the tiles at the server.

Leaflet can also use WMTS rest endpoints, then the tiles being requested will be asked for based on the row and column number of the grid that is defined at a zoom level. You can find this end point by looking at the WMTS capabilities of your GeoServer.

Or finally, to complete the set of competing standards there is TMS (see getCapabilities):

var tms_example = L.tileLayer('http://base_url/tms/1.0.0/example_layer@png/{z}/{x}/{y}.png', {
    tms: true
}).addTo(map);