Leaflet.js con un livello vettoriale è molto lento

Ho giocato con leaflet.js e l'ho trovato molto lento con un semplice livello vettoriale contenente circa 200 cerchi. Il caricamento della prima pagina richiede diversi secondi ed è più o meno impossibile ingrandire o scorrere la mappa, la reazione della pagina è incredibilmente lenta. Visto che ho visto esempi di volantini molto più complicati, sono abbastanza sicuro di aver fatto qualcosa di sbagliato. Qui il codice della mia pagina di prova:Leaflet.js con un livello vettoriale è molto lento

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <link 
     rel="stylesheet" 
     href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" 
     /> 
    </head> 
    <body> 
    <div id="map" style="width: 1100px; height: 550px"></div> 
    <script 
     src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> 
    </script> 
    <script> 

var points = [ 
[ 48.538385 , 11.166186 ], 
... 
]; 
     var map = L.map('map').setView([51.0, 10.20], 6); 
     mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'; 
     L.tileLayer(
     'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     attribution: 'Map data &copy; ' + mapLink, 
     maxZoom: 16, 
     }).addTo(map); 

    for (var i = 0; i < points.length; i++) { 
    var c = L.circle([points[i][0], points[i][1]], 20); 
    c.addTo(map); 
     } 
    </script> 
    </body> 
</html>

Qualche idea di cosa potrebbe causare il problema?

fonte

2014-05-19 Thomas W.

Il tuo codice sembra buono. È possibile provare una delle opzioni di override globali per forzare il disegno con canvas (L_PREFER_CANVAS). Il "caso d'uso" che è documentato nella pagina di riferimento sembra affrontare il problema esatto:

Da: http://leafletjs.com/reference.html#global

L_PREFER_CANVAS
Forze Volantino di utilizzare il back-end su tela (se disponibili) per i livelli vettoriali invece di SVG. Ciò può aumentare considerevolmente le prestazioni di in alcuni casi (, ad esempio, molte migliaia di cerchi sulla mappa).

fonte

2014-05-20 07:39:13 psousa

Grazie per il suggerimento! Questo risolve il problema. –

WOW! Questo rende le cose più veloci! – Richard

Si noti che questa opzione è ora parte della mappa anziché uno "switch" globale. – trysis

Leaflet.js con un livello vettoriale è molto lento

risposta

Problemi correlati