Wie verwendet man Leaflet, um Teile eines massiven Datensatzes effizient anzuzeigen?

Ich sehe immer wieder Nicht-GIS-Webentwickler, die auf dieses Problem stoßen, und ich bin mir nicht sicher, welche Lösung das ist.

1. Es gibt einen Datensatz mit Tausenden von Elementen.
2. Wir möchten dem Benutzer eine Karte anzeigen, von der die sichtbare Teilmenge als interaktive, anklickbare Elemente angezeigt wird.

Welche Methoden gibt es dafür?

Ich kann mir diese vorstellen, aber sie sind nicht sehr zufriedenstellend, also frage ich mich, was es sonst noch gibt:

1. Speichern Sie alle Daten in einer GeoJSON-Datei, übertragen Sie sie an den Browser und lassen Sie die Broschüre anzeigen. Problem: Funktioniert nicht wirklich mit großen Datenmengen. TopoJSON erhöht das Limit ein wenig. Es verursacht auch eine große Verzögerung beim Laden der Seite.

2. Verwenden Sie Mapbox, speichern Sie alle Daten in einer interaktiven Ebene in Mapbox und verwenden Sie Mapbox.js, um sie anzuzeigen. Funktioniert hervorragend, kostet aber Geld und kann nicht selbst gehostet werden.

3. Verwenden Sie GeoServer, um auf eine PostGIS-Datenbank zuzugreifen, und verwenden Sie das WFS-Geojson-Broschüren-Plugin, um von dort aus auf die Daten zuzugreifen. Es funktioniert wahrscheinlich, aber das WFS-Geojson Leaflet-Plugin scheint nicht mehr gepflegt zu sein.

4. Verwenden Sie CartoDB, speichern Sie alle Daten in einer CartoDB-Tabelle und zeigen Sie sie mit CartoDB.js an. Funktioniert super, kann aber sehr teuer werden. Es ist möglich, es selbst zu hosten, aber die Installation von CartoDB ist nicht trivial.

All dies lässt mich denken, dass es einen viel besseren, freien Weg geben muss, auf dem ich vermisse. Was ist es?

BEARBEITEN

Vielleicht habe ich das WFS-Geojson-Plugin zu einfach abgeschrieben. Es gibt eine Gabel, die noch Aktivität aufweist (vor 4 Monaten): https://github.com/johanlahti/azgs-leaflet

Ok, meine Annahmen in 2 waren falsch. Sie können mapbox.js verwenden. Ich glaube, das Endergebnis wird ein wenig anders ausfallen - die Marker selbst werden eine statische Rasterebene sein, aber sie können angeklickt werden.

Die Spezifikation, die Interaktivität in großem Maßstab ermöglicht, lautet https://github.com/mapbox/utfgrid-spec

Es ist clientseitig in https://github.com/danzel/Leaflet.utfgrid ( Leaflet- Plugin) und auch in mapbox.js implementiert.

Serverseitig ist es in https://github.com/mapbox/tilelive.js und damit in TileMill implementiert, zB: http://tilemill-server/tile/projectname/7/115/78.grid.json

Es ist auch in TileStache implementiert, jedoch nicht in tilestream oder mbtiles-server. Die UTFgrid-Daten scheinen von TileMill in der Datei mbtiles gespeichert worden zu sein, werden jedoch von diesen ignoriert.

Sie brauchen also nicht nur mapbox.com, sondern auch mapbox.js nicht. Mapbox.js scheint die Dinge aus Bequemlichkeitsgründen meistens zusammenzufügen: Ein einzelner Aufruf, der eine Karte instanziiert, Kacheln abruft und Interaktivität hinzufügt.

Wenn Sie jedoch "mapbox.js" verwenden, fehlt ein Teil des Puzzles, und das ist "tilejson". Sie geben mapbox.json die Ihrer Karte entsprechende Kacheldatei.

Entschuldigen Sie die verspätete Antwort, aber es gibt auch das Flugblatt-Vektor-Layer-Plugin, das PostGIS-Dienste unterstützt http://jasonsanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/

So wie es aussieht, können Sie den Dienst filtern.

Ich habe dieses Plugin für ArcGIS-Services verwendet und es war wirklich gut.

Hoffe das hilft, Rowan

Wenn Sie die Lösung noch nicht gefunden haben, finden Sie hier eine: http://gis.xyz/leaflet.html#

 var owsrootUrl = 'http://217.8.255.188:8080/geoserver/opengeo/ows';

 var defaultParameters = {
     service : 'WFS',
     version : '2.0',
     request : 'GetFeature',
     typeName : 'opengeo:evernote_geom',
     outputFormat : 'text/javascript',
     format_options : 'callback:getJson',
     SrsName : 'EPSG:4326'
};

var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);

var WFSLayer = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : 'getJson',
    success : function (response) {
       WFSLayer = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 600};
                layer.bindPopup('<h4>'+feature.properties.url+'</h4><br>'+feature.properties.title
                    ,popupOptions);
            }
        }).addTo(map);
    }
});

Der schnellste Weg, dies zu tun, ist https://mangomap.com . Sie sollten in der Lage sein, das Ganze in ungefähr 10 Minuten einzurichten, ohne eine einzige Codezeile zu schreiben.

In der folgenden Präsentation erfahren Sie, wie Sie mithilfe von Node.js und PostgreSQL mit PostGIS Online-Web-Mapping durchführen.