OpenLayers测量地图渲染时间

Question

我正在使用OpenLayers版本3（ver 2的答案也可以）并且想要测量渲染矢量图层所需的时间。所以，我有一个带有特征的矢量图层：

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});

我的地图对象：

var map = new ol.Map({
        renderer: 'canvas',
        target: document.getElementById('map'),
        view: new ol.View({
            center: [550000, 6520000],
            resolution: 500,
            minZoom: 1,
            maxZoom: 10,
            zoom: 1,
            resolutions: [500.0, 250.0, 125.0, 62.5, 31.25, 15.625, 7.8125, 3.90625, 1.953125, 0.9765625, 0.48828125],
            projection: projection
        })
    });

我想测量从图层渲染所有要素所需的时间。如果我喜欢这个

 var start=performance.now();
 map.addLayer(vectorLayer);
 var time=performance.now()-start;
 console.log(time)

然后我在控制台上看到的时间远远早于地图上的点数。我想在所有点渲染后立即看到时间。我怎么能这样做？

Answer 1

尝试强制OpenLayers像这样执行同步渲染：

 var start=performance.now();
 map.addLayer(vectorLayer);
 map.renderSync();
 var time=performance.now()-start;
 console.log(time)

Answer 2

要衡量渲染功能所需的时间，您可以为图层触发的render事件注册一个侦听器。只有在渲染了这些特征后才会触发它。

示例代码：

var startTime = window.performance.now();
vectorLayer.once("render", function () {
    var endTime = window.performance.now();
    var elapsed = endTime - startTime;
    console.log("time to render: ", elapsed);
});
map.addLayer(vectorLayer);