Leaflet.js z warstwą wektorową jest bardzo powolny

Grałem z użyciem pliku leaflet.js i stwierdziłem, że jest bardzo powolny z prostą warstwą wektorową zawierającą około 200 okręgów. Ładowanie pierwszej strony trwa kilka sekund, a przybliżenie lub przewinięcie mapy jest prawie niemożliwe, reakcja strony jest niesamowicie powolna. Jak widziałem dużo bardziej skomplikowane przykłady ulotek, jestem prawie pewien, że zrobiłem coś złego. Tutaj kod mojej strony testowej:Leaflet.js z warstwą wektorową jest bardzo powolny

<!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>

Jakieś pojęcie, co może spowodować problem?

Źródło

2014-05-19 Thomas W.

Twój kod wydaje się być w porządku. Możesz wypróbować jeden z globalnych przełączników nadpisywania, aby wymusić rysowanie za pomocą obszaru roboczego (L_PREFER_CANVAS). "Use-case", która jest udokumentowana na stronie odniesienia wydaje się rozwiązać dokładną problem:

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

L_PREFER_CANVAS
Siły Ulotka korzystania z płótna back-end (jeśli dostępnych) dla warstw wektorowych zamiast SVG. Może to znacznie zwiększyć wydajność w niektórych przypadkach (, np. Wiele tysięcy kółek znaczników na mapie).

Źródło

2014-05-20 07:39:13 psousa

Dzięki za podpowiedź! To rozwiązuje problem. –

WOW! To sprawia, że rzeczy stają się szybsze! – Richard

Należy zauważyć, że ten przełącznik jest teraz częścią mapy, a nie globalnym "przełącznikiem". – trysis

Leaflet.js z warstwą wektorową jest bardzo powolny

Odpowiedz

Powiązane problemy