javascript - 使用多个图层的 OpenLayers 4.6.5 的性能限制

Question

我目前正在处理包含大量图层(最多 20/30)的 GIS。 map 以非常慢的方式渲染图 block 。

它之前是用 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 上的一些测试的配置文件:

结果是一张几乎无法使用的 map 。我知道层数很高，但问题不在 OpenLayers 2.x 中(或者至少，性能更好)。

一种可能的解决方法是仅使用一个 TileWMS 源并将我们所有图层的列表传递给它的 'LAYERS' 参数。这显着提高了速度，因为 GeoServer 完成了所有渲染工作，但我们失去了一些可能性，例如管理每一层透明度。

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

Answer 1

最有可能的问题是您没有触及 GeoWebCache(这是 GeoServer)用于呈现图 block 的图 block 边界。看这个page在手册中列出了必须才能工作的标准。

更好的方法是使用 WMTS request (其中瓷砖网格等在客户端和服务器之间达成一致而不是猜测)。您甚至可以通过请求 getCapabilities document 让 OpenLayers 为您进行协商。 .