GeoJSON zu sperrig - was tun?

Ich verwende leaflet.js , um Webbenutzern die Auswahl einer Region zu ermöglichen. Gültige Regionen sind US-Bundesstaaten, kanadische Provinzen und Weltländer (außer USA und Kanada). Ich habe selbst ein Shapefile mit Qgis erstellt und es als Geojson gespeichert. Ich habe die Geometrien so weit wie möglich vereinfacht.

Das resultierende Shapefile hat eine Größe von 400 KB, der Geojson ist jedoch größer als ein Megabyte. Das ist größer als ich möchte. Ich muss den Netzwerkaufwand für die Übertragung dieser Informationen reduzieren.

Was ist der richtige Weg, um dies zu tun? Die Optionen, die ich mir vorstellen kann, sind:

1. Servieren Sie die Geojson-Datei, entpacken Sie sie auf dem Client.
2. Analysieren Sie das Shapefile auf dem Client in Geojson
3. Generiere meine eigenen Kacheln aus dem Shapefile und bediene sie

Wenn mir jemand sagen könnte, welche Option die beste ist (oder keine der oben genannten), würde ich es begrüßen!

Bevor Sie mühsamere Wege beschreiten, besteht die einfachste Möglichkeit darin, die Geometrie zu reduzieren. Was sind Ihre Quelldatensätze? Wie haben Sie sie vereinfacht? Um wie viel hat sich dadurch die Größe der Geojson-Datei verringert?

Wenn Sie zuversichtlich sind, dass Sie alles getan haben, was Sie können, dann ist die niedrigste hängende Frucht Ihrer Optionen

1. Servieren Sie die Geojson-Datei gzip, entpacken Sie sie auf dem Client.

Alle modernen Browser entpacken komprimierte Daten automatisch. Sie müssen also lediglich Ihren Webserver so einrichten, dass die Daten vor dem Senden gepackt werden. Dies ist normalerweise relativ einfach, mit viel Material für Apache , IIS oder Nginx

Mein Tipp wäre, zuerst dies zu versuchen, dann zu testen, wenn Latenz / Antwort / Datengröße nicht akzeptabel ist, dann zu anderen Optionen zu wechseln. Ich wäre auch vorsichtig, wenn ich versuchen würde, vorzeitig zu optimieren. Ich würde versuchen, herauszufinden, warum Sie die Datengröße reduzieren müssen, und wenn Sie harte Gründe (und Zahlen) dafür haben, dann würde ich iterativ Änderungen implementieren und erneut testen, um zu sehen, was passiert Gewinne, die Sie bekommen.

Mapshaper.org ist ein praktisches kostenloses Online-Tool, mit dem Sie eine Geojson-Datei hochladen, als Karte anzeigen und dann einen von drei Vereinfachungsalogrithmen auswählen können, deren Stärke Sie mit einem Schieberegler anpassen können.

Es aktualisiert die Karte und hebt alle Stellen rot hervor, an denen es zu einem Integritätsverlust kommt, z. B. zu einer Überlappung zwischen zwei Regionen. Es gibt eine Schaltfläche zum Beheben von Problemen, die normalerweise (aber nicht immer) solche Probleme behebt.

Sie können einen akzeptablen Vereinfachungsgrad finden und die neu vereinfachte Geojson-Datei exportieren.

Dies hängt natürlich davon ab, welche Detailstufe Sie benötigen, aber die Ergebnisse können beeindruckend sein. Hier ist beispielsweise eine Karte von Schottland aus einer 40-MB-Geojson-Datei:

Eine 99% -Anwendung reduziert es auf eine 441-KB-Datei ohne Überlappungen und Detailverlust, die in dieser Zoomstufe nicht sichtbar ist:

Eine 99,95% -Anwendung (bis zu 29 KB) zeigt, welche Art von Pfadvereinfachung angewendet wird (und dennoch Überschneidungen vermeidet und sich perfekt für Anwendungen wie Chloropleth auf nationaler Ebene eignet):

Ich frage mich, ob Sie die in dieser Antwort enthaltene Komprimierung nutzen können, in der es um die Komprimierung des GeoJSON mit Topojson geht .

Ich weiß nicht, ob Leaflet das GeoJSON noch lesen kann - etwas zum Ausprobieren =)

Weitere Informationen zu topojson: https://github.com/mbostock/topojson/

Ich stimme mit @Kelso oben über die Vereinfachung Ihrer Geometrie überein.

Wenn Sie keinen Zugriff auf den Server haben , um die Daten mit gzip abzulassen leicht konnte man einen Blick auf die nehmen Message Bibliothek Ihre GeoJSON in binäre Daten zu serialise (ich glaube , es ist eine Implementierung der BSON spec , die durch Dinge wie MongoDB verwendet wird Daten speichern, aber ich könnte mich irren) . Es gibt Bibliotheken in Python und Javascript (unter anderem), mit denen Sie die Daten serialisieren / deserialisieren können.

Ich würde vorschlagen, nur Ihr eigenes prozedurales Array von Leaflet-Polygon-Objekten zu erstellen. Ich bin damit einverstanden, dass GeoJSON viel zu groß ist. Die Objektschlüsselnamen sind sehr beschreibend, aber möglicherweise auch unnötig lang. Ich mache so etwas:

objects = [];
objects.push( new L.polygon([[1,1],[1,2],[3,4]],options );
objects.push( new L.polygon([[4,7],[8,27],[35,66]],options );
objects.push( new L.polygon([[3,5],[56,24],[13,49]],options );
objects.push( new L.polygon([[13,7],[7,68],[23,9]],options );
layerGroup = L.layerGroup(objects).addTo(map);

Es ist ganz einfach. Es ist viel leichter als GeoJSON wie folgt:

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Polygon",
      "coordinates": [1,1],[1,2],[3,4]},
      },

    //etc...

Und für jedes einzelne Polygon wiederholen ... ugh ... viel zu aufgebläht imo. Fügt Ihrem JS viele Bytes hinzu. Wie ich schon sagte, die Schlüsselnamen sind nett und beschreibend ... aber sie sind lang und fügen Ihrer JS eine Menge unnötiger Tschüss hinzu.