使用多層的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進行協商。