Performance limitations with OpenLayers 4.6.5 using several layers

Question

I am currently working on a GIS holding a large amount of layers (up to 20 / 30). The map is rendering tiles in a really slow way.

It was previously written with OpenLayers 2.x, and we didn't face this performance bottleneck.

Our layers are using WMS sources & tiles, which are declared as follow

function createTileLayer(options){
    let source = new ol.source.TileWMS({
        url: serverURL, // Our GeoServer instance
        params: {
            'LAYERS': options.id
            'BGCOLOR': options.backgroundColor,
            'TRANSPARENT': options.transparent,
            'VERSION': options.version,
            'FORMAT': 'image/png'
        },
        serverType: 'geoserver',
        projection: 'EPSG:2100', // Managed by Proj4J
        transition: 0
    });

    let layerTile = new ol.layer.Tile({
        source: source,
        visible: options.visible,
    });

    return layerTile;
}

The map declaration in itself is quite simple:

let map = new ol.Map({
        target: document.getElementById('app'),
        layers: Layers, // All the layers we created before
        view: new ol.View({
            center: ol.proj.fromLonLat([5.497853028599662, 34.82203273834541]),
            zoom: 18,
            projection: 'EPSG:2100'
        }),
        loadTilesWhileAnimating: true,
        loadTilesWhileInteracting: true,
        renderer: 'canvas'
    });
}

Problem with this approach is that the browser seems to spend far too much time in drawing every layer. Here is the profile of some tests on Chrome:

Results are an almost unusable map. I am aware that the amount of layers is high, but the issue was not in OpenLayers 2.x (or at least, performances were better).

One possible workaround is using only one TileWMS source and pass it the list of all our layers in its 'LAYERS' param. This dramatically improve the speed because GeoServer does all the rendering work, but we lose some possibilities such as managing each layer transparency.

I might be doing something wrong in querying / rendering tiles this way, that I am not aware of. Thanks for any help.

Answer 1

The most likely issue is that you are not hitting the tile boundaries that GeoWebCache (which is what GeoServer) uses to render the tiles. See this page in the manual which lists the criteria that must be met for this to work.

A better way to do this is to use a WMTS request (where the tile grids etc are agreed on between the client and server rather than guessed at). You can even get OpenLayers to do the negotiation for you by asking for the getCapabilities document .