使用多层的OpenLayers 4.6.5的性能限制

Question

我目前正在处理包含大量图层（最多20/30）的GIS。 地图正在以非常慢的方式渲染图块。

它以前是用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）用来渲染图块的图块边界。请参见手册中的page，其中列出了必须才能使其正常工作的条件。

执行此操作的更好方法是使用WMTS request（其中，客户端和服务器之间商定了瓦片网格等，而不是猜测）。您甚至可以要求getCapabilities document来让OpenLayers为您进行协商。