在映射API中查找层渲染时间's

Find layer rendering time in mapping API's

本文关键字:时间 API 映射 查找      更新时间:2024-02-15

我正在尝试比较映射API的性能-Google Maps、OpenLayers、Leaflet和ArcGis API,我想比较每个API中向量层渲染的时间。我想要时间,当所有矢量特征都已经在屏幕上了。尝试了performance.now();,但这给出了错误的时间。当我试图比较API时,我希望这种方法能使每个地图的渲染时间相同。有可能做到用一些通用的方法??

例如,在OL中,矢量层是这样定义的,我想要所有特征都在屏幕上的时间。

var vectorSource = new ol.source.ServerVector({
        format: new ol.format.GeoJSON(),
        loader: function (extent, resolution, projection) {
            var url = '--------';
            $.ajax({
                url: url,
                dataType: 'jsonp'
            });
        },
        strategy: ol.loadingstrategy.all
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    var loadFeatures = function (response) {
        vectorSource.addFeatures(vectorSource.readFeatures(response));
    };

window.性能非常好。这样使用:

// Set start mark
window.performance.mark('myStart');
// Do stuff
for (i = 0; i < 100000; i++) {
  var test = i * 3 / 2;
}
// Set another time mark
window.performance.mark('mySub');
// Do more stuff
for (i = 0; i < 5000; i++) {
  var test = i * 3 / 2;
}
// Set end mark
window.performance.mark('myEnd');
// Calculate time from start to sub
window.performance.measure('startSubMeasure', 'myStart', 'mySub');
// Calculate time from sub to end
window.performance.measure('subEndMeasure', 'mySub', 'myEnd');
// Calculate time from start to end
window.performance.measure('startEndMeasure', 'myStart', 'myEnd');
// Fetch the measurements
var measurements = window.performance.getEntriesByType('measure');

这里的测量将保持这样的阵列:

[{
    "duration":2.0000000076834112,
    "startTime":261.9999999878928,
    "entryType":"measure",
    "name":"startSubMeasure"
},{
    "duration":2.9999999969732016,
    "startTime":261.9999999878928,
    "entryType":"measure",
    "name":"startEndMeasure"
},{
    "duration":0.9999999892897904,
    "startTime":263.9999999955762,
    "entryType":"measure",
    "name":"subEndMeasure"
}]

请在此处查看其实际操作:http://plnkr.co/edit/cmDovvjR3ZyLiCThp26O?p=preview

您可以使用Javascript的Date对象来计算加载时间。

Date.now()方法返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。

首先,您可以在函数调用之前执行以下操作:

var timerStart = Date.now();

其次,在函数的回调中执行以下操作:

var diff = Date.now()-timerStart;
console.log("Time in millisecond: ", diff);

JSFiddle示例:https://jsfiddle.net/qfgpb728/

对于您的特定情况,您可以执行以下操作:

var timerStart = Date.now();
var vectorSource = new ol.source.ServerVector({
        format: new ol.format.GeoJSON(),
        loader: function (extent, resolution, projection) {
            var url = '--------';
            $.ajax({
                url: url,
                dataType: 'jsonp'
            });
        },
        strategy: ol.loadingstrategy.all
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    var loadFeatures = function (response) {
        vectorSource.addFeatures(vectorSource.readFeatures(response));
        var diff = Date.now()-timerStart;
        console.log("Time in millisecond: ", diff);
    };