Leaflet: Schlechte Leistung mit vielen Markern

Erstellt am 26. Aug. 2018 · 3Kommentare · Quelle: Leaflet/Leaflet

[x] Ich melde einen Fehler, bitte nicht um Hilfe; Support-Fragen wie "Wie kann ich X mit Leaflet machen?" wird geschlossen (benutze Stack Overflow oder gis.stackexchange.com für Fragen)
[x] Ich habe mir die Dokumentation angesehen , um sicherzustellen, dass das Verhalten dokumentiert und erwartet wird
[x] Ich bin mir sicher, dass dies ein Problem mit dem Leaflet-Code ist, kein Problem mit meinem eigenen Code oder dem von mir verwendeten Framework (Cordova, Ionic, Angular, React…)
[x] Ich habe die Probleme durchsucht, um sicherzustellen, dass sie noch nicht gemeldet wurden

So reproduzieren Sie

Prospektversion, die ich verwende: 1.3.4
Browser (mit Version) Ich verwende: Chromium 68
Betriebssystem/Plattform (mit Version) Ich verwende: Debian Buster
Platzieren Sie viele Markierungen auf der Karte (z. B. 1000)
Verschieben oder zoomen Sie die Karte

Welches Verhalten erwarte ich und welches Verhalten sehe ich

Der Start der Bewegung wird verzögert und frisst 100 % des CPU-Kerns. Das gleiche für den Zoom. Verzögerung si verursacht durch getBoundingClientRect :

Minimalbeispiel, das das Problem reproduziert

[x] dieses Beispiel ist so einfach wie möglich
[x] Dieses Beispiel basiert nicht auf Code von Drittanbietern

https://codepen.io/zdila/pen/YOwoEd

Quelle

zdila

Hilfreichster Kommentar

Wenn Sie viele Markierungen zeichnen müssen, können Sie das Leaflet.PixiOverlay- Plugin ausprobieren.
(ich bin übrigens der Plugin-Autor)

manubb am 27. Aug. 2018

👍4

Alle 3 Kommentare

Hallo @zdila ,

Leider ist das eine bekannte Einschränkung von Leaflet.
Siehe https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740

Leaflet verwendet normale DOM-Elemente für Standardmarker.
Diese Einfachheit hat einen Nachteil: Browser haben Schwierigkeiten, Tausende von ihnen zu verarbeiten.

Für den allgemeinen Gebrauch (wenige Marker) ist die Einfachheit von Vorteil.

Für komplexere Anwendungsfälle besteht die Problemumgehung darin, zu Canvas zu wechseln.
Es sollte einige Plugins geben, die andere Canvas-basierte Marker bereitstellen, falls Sie etwas ausgefalleneres als Circle Marker benötigen.

ghybs am 27. Aug. 2018

👍1

Wenn Sie viele Markierungen zeichnen müssen, können Sie das Leaflet.PixiOverlay- Plugin ausprobieren.
(ich bin übrigens der Plugin-Autor)

manubb am 27. Aug. 2018

👍4

@ghybs danke für die Erklärung. Ich frage mich nur, ob das Aufrufen von getBoundingClientRect wirklich notwendig ist und wofür es in Leaflet verwendet wird.

@manubb danke für die Info. Wir verwenden bereits Canvas zum Anzeigen von Bildpositionen auf der Karte: https://www.freemap.sk/?map=9/48.821333/20.126953 &layers=TI

zdila am 27. Aug. 2018

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen