Erstellen Sie eine interaktive Karte ohne Server

8

Ich habe es geschafft, eine großartige Web-Mapping-Anwendung mit aus GeoWebCache erstellten Kacheln und einem benutzerdefinierten Gridset zu erstellen, aber jetzt muss ich den Basiskarten eine Überlagerung hinzufügen. Die einzige Interaktivität, die ich benötige, ist ein einfaches Popup-Infofenster, das nur von einem der Attribute stammt.

Standardmäßig ist das Overlay-Dataset ein ESRI-Shapefile mit 180 MB. Seitdem ist es mir gelungen, das Dataset mithilfe von ST_SimplifyPreserverTopology zu vereinfachen, wodurch die ESRI-Shapefile-Größe auf 28 MB gesenkt wurde. Als GeoJSON-Datei sind dies jedoch immer noch 78 MB, was einfach zu groß ist.

Ich habe dann CartoDB ausprobiert und die Daten in eine Tabelle geladen und dann die Vektorebene in Openlayern hinzugefügt, aber das Datenvolumen ist immer noch zu groß und die HTML-Seite stürzt ab.

Ich habe dann GIS Cloud und ein externes WMS ausprobiert, aber das ist auf WGS84 beschränkt und hat keine Getfeature-Info-Option.

Ich habe dann angefangen, mir Topojson anzuschauen, was meiner Meinung nach sehr gut für meinen Datensatz geeignet ist, aber ich glaube nicht, dass es eine Möglichkeit gibt, einen Topojson in OpenLayers 2.12 auf eine Karte zu laden, die ich verwenden muss.

Meine andere Option war UTF-Grid, also habe ich die Daten in tilemill geladen und eine MbTiles exportiert, die ich mit mbutil extrahieren kann. Aber natürlich unterstützt UTF-Grid nur EPSG: 3857 (Web Mercator), was sich von meiner Projektion EPSG: 27700 unterscheidet. Daher werden alle .json-Dateien anders benannt als meine zugrunde liegenden zwischengespeicherten Kacheln von geowebcache.

Gibt es eine Möglichkeit, ein UTF-Raster zu erstellen, jedoch in einer anderen Projektion?

Das ist also der Hintergrund und das Gefühl, dass ich die meisten Optionen ausprobiert habe, die ich kenne.

Ich brauche also einfach eine interaktive Overlay-Ebene in einer OpenLayers 2.12-Map, aber ich kann keinen Server wie GeoServer / Mapserver oder TileStache usw. verwenden und ich kann kein serverseitiges Scripting wie PHP verwenden.

Kann jemand andere Ratschläge geben?

Vielen Dank

— tjmgis
quelle

topojson würde mit openlayers 2.10 gut funktionieren (Sie konvertieren topojson tatsächlich in geojson, bevor Sie es verwenden). Aber es würde Ihr Problem nicht lösen, da es in den meisten Browsern immer noch zu groß wäre, um es zu verarbeiten.

— Johanvdw

Versuchen Sie es mit d3js bl.ocks.org/mbostock/4965422 797M Shapefile für nationale Tabellierungsbereiche für Postleitzahlen. Vereinfacht mit TopoJSON (mit -q 1e5 -s 3e-7)

— Mapperz

@Mapperz das ist eine beeindruckende Verkleinerung. Kann sich Topojson in einer anderen Projektion befinden als ein sphärischer Mercator?

— tjmgis

@johanvdw Haben Sie ein Beispiel für Topojson in OpenLayer geladen?

— tjmgis

Projektion TopoJSON bl.ocks.org/mbostock/5557726

— Mapperz

3

Erweitern meines ursprünglichen Kommentars:

Topojson funktioniert gut mit Openlayern 2.10 (Sie konvertieren Topojson tatsächlich in Geojson, bevor Sie es verwenden). Ich bin mir jedoch nicht sicher, ob es Ihr Problem lösen würde, da es in den meisten Browsern möglicherweise noch zu groß ist, um verarbeitet zu werden. Ein Beispiel für die Verwendung von Topojson in Openlayers 2, basierend auf dem Geojson-Beispiel für Openlayers und einigen Daten, die ich in einem Blogbeitrag verwendet habe .

http://www.gisky.be/cyclists/ol-topojson.html

Das eigentliche wichtige Bit ist nur die zweite Zeile:

    $.getJSON('http://www.gisky.be/cyclists/f.json', function (data) {
        fusiegem = topojson.feature(data, data.objects.fusie);
        var geojson_format = new OpenLayers.Format.GeoJSON();
        var vector_layer = new OpenLayers.Layer.Vector();
        map.addLayer(vector_layer);
        vector_layer.addFeatures(geojson_format.read(fusiegem));
    });

Diese Zeile erstellt ein Geojson-Objekt (fusiegem) aus dem Datenobjekt topojson.

— johanvdw
quelle

@johanvwd, der D3 und Topojson nicht verwenden konnte, wird Ihr Beispiel ausprobieren. Vielen Dank für das Hinzufügen des Codes

— tjmgis

@johanvwd Ich habe Ihren Code geändert und erfolgreich zum Laufen gebracht, aber er ist selbst bei einem Topojson von 1,4 MB furchtbar langsam, geschweige denn derjenige, der 8 MB verwenden muss. Irgendwelche anderen Gedanken?

— tjmgis

Ich denke, das einzige, was noch zu tun bleibt, ist eine größere Verallgemeinerung der Übersichtsskalen und die Arbeit mit Kacheln für niedrigere Skalen. Ich kenne jedoch keine Werkzeuge, um diesen Job zu erledigen. Ich bin sicher, dass sie in naher Zukunft erscheinen werden oder vielleicht schon existieren werden.

— Johanvdw

1

Das klingt nach einem Job für D3 - http://bl.ocks.org/mbertrand/5218300

— ChrisInCambo
quelle

Wie würde D3 helfen, das Problem zu lösen?

— Johanvdw

@ChrisInCambo - vielen Dank für das Beispiel, das genau das tut, wonach ich suche, aber Schwierigkeiten hatte, D3 und meinen Topojson zum Laufen zu bringen, also habe ich eine andere Frage gestellt

— tjmgis

Der häufigste Fehler bei TopoJSON besteht darin, nicht in den JSON zu schauen und dessen Struktur zu verstehen, wenn er mit D3 verwendet wird. Wenn Sie den Beispielcode kopieren und dessen TopoJSON durch Ihren ersetzen, müssen Sie sicherstellen, dass Objekte, auf die in TopoJSON verwiesen wird, auch in Ihrem JSON vorhanden sind.

— ChrisInCambo

1

Sie können die Daten in GeoJSON-Dateien aufteilen und sie nach Kacheln benennen. Sobald die Karte geladen ist, können Sie die sichtbaren Kacheln abfragen und ihre Namen / URLs / Koordinaten verwenden, um die entsprechenden GeoJSON-Dateien anzufordern, die einer Datei pro Kachel entsprechen.

Der schwierige Teil ist das Erstellen der Dateien. Dafür müssen Sie unbedingt ein Werkzeug verwenden. Sobald die Dateien erstellt sind, werden sie nach Bedarf und in so kleinen Blöcken geladen, dass sie den Browser nicht überfordern. Ein weiterer Schmerz ist der Umgang mit Zoomstufen. Sie müssen entscheiden, welche Funktionen von welchen Ebenen aus sichtbar sind, und Ihre Dateien entsprechend erstellen.

— bstempi
quelle