Leaflet.js und komplexe Polygone

Question

Für ein kleines Projekt erlaube ich Benutzern, Bereiche zur Datenbank hinzuzufügen. Ihre Anfrage wird an http://nominatim.openstreetmap.org gesendet und ich speichere den Längen- und Breitengrad. Wenn verfügbar, speichere ich auch die geoJSON-Polygon-Umrissdaten.

Beispiel Ausgang: http://nominatim.openstreetmap.org/search?q=wyoming&format=xml&polygon_geojson=1&addressdetails=1

Dieser umrissenen Bereich wird dann auf einer Karte angezeigt leaflet.js verwenden. Für viele Polygone funktioniert das gut, aber es scheint, dass die Datenmenge, die die Bibliothek verarbeiten kann, begrenzt ist. Einige ziemlich komplexe Bereiche (die einen Longtext zur Speicherung in mysql benötigen) werden einfach nicht angezeigt, ohne dass ein Fehler ausgelöst wird.

Ich denke, meine Frage hat zwei Teile: 1 - Bin ich richtig, dass die großen Datensätze die Wurzel des Problems sind oder sollte flaglet.js mit denen umgehen können? 2 - Was wäre der beste Weg, solche Datensätze zu vereinfachen? Leaflet hat einen solchen Algorithmus zum Anzeigen von Bereichen, aber das scheint bereits der Punkt zu sein, an dem es scheitert.

Und während wir auf dem Thema sind: Im Moment konvertiere ich Nominatims Inglat Polygone zu Faltblättern, indem ich die Daten aufspalte und sie wieder in Javascript zusammenfüge. Gibt es einen einfacheren/sichereren Weg dies zu tun? Soll ich diese Aufgabe lieber auf den Server verschieben und eine PHP-Bibliothek/-Funktion verwenden?

Ich schätze Ihre Hilfe!

Edit: vergessen zu erwähnen: Anlässlich dass das Polygon, meine Konsole gibt mir diesen Fehler zu machen, scheitert: Typeerror: t ist null

Answer 1

are the large datasets the root of the problem or should leaflet.js be able to handle those?

Leaflet.js wird handhaben, was Sie werfen auf es. Es gibt jedoch eine Grenze für das, was Ihr Web-Browser verarbeiten kann, ohne zu verlangsamen.

Denken Sie daran, dass jeder moderne Webbrowser über Tools zur Leistungsanalyse verfügt, mit denen Sie feststellen können, welche Teile des Leaflet-Codes (oder der Interna des Browsers) die meiste Zeit in Anspruch nehmen.

What would be the best way of simplifying such datasets?

Sie wollen wahrscheinlich am Douglas-Peucker algorithm für einen Ausgangspunkt in diesen Algorithmen suchen.

Beachten Sie, dass Leaflet diesen Algorithmus intern verwendet Polygone auf jeder Zoomstufe zu vereinfachen, zu einem Pixel auf.

Für einige große komplexe Polygone, wie sie mit etwas schneiden Leaflet.VectorGrid kann die Leistung verbessern.

Es gibt keinen Königsweg für Datensätze zu vereinfachen, jedoch. Der beste Weg hängt von den spezifischen Daten ab, die Sie verwenden.

on the occasion that the polygon fails to render, my console gives me this error: TypeError: t is null

Dies ist eine andere Sache, und könnte ein Symptom für fehlerhafte Daten sein.

Um schönere Fehlermeldungen anzuzeigen, verwenden Sie die Datei leaflet-src.js anstelle der Datei leaflet.js. Beginnend mit Leaflet 1.0.0-beta2, leaflet-src.js, gibt es eine Quellentabelle, die auf die einzelnen Originaldateien verweisen kann, um ein besseres Debugging zu ermöglichen.