Reduce HTTP requests in Openlayers

Question

I have many tile layers in a map.So when I zoom or move the map,all layers will send wms request to the server.How can I reduce HTTP requests when zoom the map by merging different layer's request to a single request?

Answer 1

If all your WMS layers come from the same server, you can combine them into a single ol.layer.Layer object, more precisely in one source object by definining each layer in a comma separated list (under the 'LAYERS' parameter):

    new ol.layer.Image({
      extent: [-13884991, 2870341, -7455066, 6338219],
      source: new ol.source.ImageWMS({
        url: 'https://ahocevar.com/geoserver/wms',
        params: {'LAYERS': 'topp:states,topp:population'}, // <---
        ratio: 1,
        serverType: 'geoserver'
      })
    })

There are other things you could try to reduce the number of requests / to enhance the overall performance:

• you mentioned "many tile layers", and then WMS requests. If you're not using a tile caching method, you could look into that. Example: MapCache.
• you could also do a single big tile request instead of many small ones to render you layer(s) (the example above does that). This kind of approach reduces the number of requests, but you'll have the impression that the map is slower to render. It also make it less possible to "cache" the result, as the request of the tile is very often unique (depends on the extent of the map view).