Openlayers-3 似乎比带有大 JSON 文件的传单更快。
Leaflet 似乎比带有少量 JSON 文件的 Openlayers-3 更快。
此外,Leaflet 似乎比 Openlayers-3 消耗更多的 RAM (x2-x3)。
使用 Firefox Inspector 的快照内存为 Openlayers-3 提供 30 Mo,为 Leaflet 提供 500 Mo。
如果您查看语言结构,这似乎很正常。但是我仍然想知道我给你的这些数字是否没有问题......这似乎是一个巨大的差异。
如果数字不错,就像普通汽车和跑车一样,你可以用跑车跑得更快,但它们的成本要高得多,而且你必须多照顾它们。但对我来说没有“更好”,这取决于你需要什么。
以下是我所说的来源:
传单示例:
var timerStart = Date.now();
var timerStop;
var timerDelta;
// MAP
var mymap = L.map('map').setView([20, 0], 3);
// BIG JSON
var bigJSON = new L.geoJson();
bigJSON.addTo(mymap);
$.getJSON({
dataType: "json",
url: "data/countries.geojson", // big JSON file
success: function(data) {
var nb=1;
for(var i=0; i<nb; i++) {
console.info("add n°" + i);
$(data.features).each(function(key, data) {
bigJSON.addData(data);
});
}
console.info("Number of features loaded = " + bigJSON.getLayers().length);
timerStop = Date.now();
timerDelta = timerStop - timerStart;
console.info("Start at " + timerStart);
console.info("Stopped at " + timerStop );
console.info("Loading time = " + timerDelta );
}
});
Openlayers-3 示例:
var timerStart = Date.now();
var timerStop;
var timerDelta;
// MAP
var myMap = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat( [20, 0] ),
zoom: 3
})
});
var SRC_bigJSON = new ol.source.Vector({
url: 'data/countries.geojson', // big JSON file
format: new ol.format.GeoJSON()
});
var bigJSON = new ol.layer.Vector({
source: SRC_bigJSON
});
var nb=1;
for (var i=0; i<nb; i++) {
console.info("add n°" + i);
myMap.addLayer(bigJSON);
}
bigJSON.on('change', function(e) {
console.info("Number of features loaded = " + bigJSON.getSource().getFeatures().length * myMap.getLayers().getLength());
timerStop = Date.now();
timerDelta = timerStop - timerStart;
console.info("Start at " + timerStart);
console.info("Stopped at " + timerStop );
console.info("Loading time = " + timerDelta );
});