Ограничения производительности в OpenLayers 4.6.5 с использованием нескольких слоев

Question

В настоящее время я работаю над ГИС, содержащей большое количество слоев (до 20 / 30). Карта рендерит тайлы очень медленно.

Ранее он был написан для OpenLayers 2.x, и мы не столкнулись с этим узким местом производительности.

Наши слои используют WMS-источники и тайлы, которые объявлены следующим образом

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;
}

Объявление карты само по себе довольно просто:

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'
    });
}

Проблема этого подхода заключается в том, что браузер тратит слишком много времени на рисование каждого слоя. Вот профиль некоторых тестов на Chrome:

Результаты - почти непригодная карта. Я знаю, что количество слоев велико, но проблема не была в OpenLayers 2.x (или, по крайней мере, производительность была лучше).

Один из возможных обходных путей - использовать только один источник TileWMS и передать ему список всех наших слоев в параметре "LAYERS". Это значительно повышает скорость, поскольку GeoServer выполняет всю работу по визуализации, но мы теряем некоторые возможности, такие как управление прозрачностью каждого слоя.

Я мог бы сделать что-то не так в запросе / рендеринге плиток таким образом, о котором я не знаю. Спасибо за любую помощь.

Answer 1

Наиболее вероятная проблема заключается в том, что вы не выходите за границы тайлов, которые GeoWebCache (что и использует GeoServer) для рендеринга тайлов. Смотрите эту страницу в руководстве, где перечислены критерии, которые должны быть выполнены, чтобы это работало.

Лучший способ сделать это - использовать запрос WMTS (где решетки и т. Д. Согласовываются между клиентом и сервером, а не предполагаются). Вы даже можете заставить OpenLayers провести переговоры за вас, запросив документ getCapabilities.