OpenLayers 测量地图渲染时间

Question

我正在使用 OpenLayers 版本 3（版本 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);

OpenLayers 测量地图渲染时间

OpenLayers measure map rendering time

javascript

time

render

openlayers