使用多层的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;
}

map声明本身非常简单：

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源并将其所有图层的列表传递给其“图层”参数。 由于GeoServer可以完成所有渲染工作，因此极大地提高了速度，但是我们却失去了诸如管理每一层透明度的功能。

我以这种方式在查询/渲染图块时可能做错了我不知道的事情。 谢谢你的帮助。

Answer 1

最可能的问题是您没有达到GeoWebCache（这是GeoServer）用来渲染图块的图块边界。 请参阅手册中的此页面 ，该页面列出了必须满足的标准才能起作用。

更好的方法是使用WMTS请求 （在客户端和服务器之间商定切片网格等，而不用猜测）。 您甚至可以通过要求getCapabilities文档来使OpenLayers进行协商。