Come utilizzare Leaflet per mostrare in modo efficiente parti di un enorme set di dati?

Continuo a vedere sviluppatori web non GIS che si imbattono in questo problema e non sono sicuro di quale sia la soluzione.

1. Esistono alcuni set di dati di migliaia di articoli.
2. Vogliamo mostrare una mappa all'utente, con il suo sottoinsieme visibile mostrato come elementi interattivi e cliccabili.

Quali metodi ci sono per farlo?

Posso pensare a questi, ma non sono molto soddisfacenti, quindi mi chiedo cos'altro c'è:

1. Memorizza tutti i dati in un file GeoJSON, trasferiscili nel browser e lascia che Leaflet li visualizzi. Problema: non funziona davvero con set di dati di grandi dimensioni. TopoJSON aumenta un po 'il limite. Inoltre provoca un grande ritardo al caricamento della pagina.

2. Usa Mapbox, archivia tutti i dati in un livello interattivo su Mapbox e usa Mapbox.js per visualizzarli. Funziona alla grande, ma costa denaro e non puoi ospitarti da solo.

3. Utilizzare GeoServer per accedere a un database PostGIS, utilizzare il plug-in leaflet WFS-geojson per accedere ai dati da lì. Probabilmente funziona, ma il plug-in Leaflet WFS-geojson non sembra più essere mantenuto.

4. Utilizzare CartoDB, archiviare tutti i dati in una tabella CartoDB e utilizzare CartoDB.js per visualizzarli. Funziona alla grande, ma può diventare molto costoso. È possibile ospitarlo da soli, ma l'installazione di CartoDB non è banale.

Tutto ciò mi fa pensare che ci debba essere un modo molto migliore e libero che mi manca. Che cos'è?

MODIFICARE

Forse ho cancellato il plugin WFS-geojson troppo facilmente. C'è un fork che vede ancora qualche attività (4 mesi fa): https://github.com/johanlahti/azgs-leaflet

Ok, i miei presupposti in 2 erano errati. È possibile utilizzare mapbox.js. Il risultato finale sarà un po 'diverso, credo: i marker stessi saranno un layer raster statico, ma saranno cliccabili.

Le specifiche che consentono l'interattività su larga scala sono https://github.com/mapbox/utfgrid-spec

È implementato sul lato client in https://github.com/danzel/Leaflet.utfgrid (plug-in leaflet) e anche mapbox.js.

Server è implementato in https://github.com/mapbox/tilelive.js e quindi TileMill ad esempio: http://tilemill-server/tile/projectname/7/115/78.grid.json

È anche implementato in TileStache, ma non tilestream o mbtiles-server. I dati UTFgrid sembrano essere memorizzati nel file mbtiles da TileMill, ma vengono ignorati da quelli.

Quindi non solo non hai bisogno di mapbox.com, ma non hai nemmeno bisogno di mapbox.js. Mapbox.js sembra quasi incollare cose insieme per comodità: una singola chiamata che crea un'istanza di una mappa, recupera riquadri e aggiunge interattività.

Ma se usi mapbox.js, c'è un po 'del puzzle che mi manca, e questo è tilejson. Dai a mapbox.json il file tilejson corrispondente alla tua mappa.

Ci scusiamo per la risposta tardiva, ma esiste anche il plug-in leaflet-vector-layer che supporta i servizi postGIS http://jasonsanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/

A quanto pare puoi filtrare il servizio.

Ho usato questo plugin per i servizi ArcGIS ed è stato davvero buono.

Spero che ti aiuti, Rowan

Se non hai ancora trovato la soluzione, eccone una: 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);
    }
});

Il modo più rapido per farlo è https://mangomap.com , dovresti essere in grado di impostare tutto in circa 10 minuti senza scrivere una singola riga di codice.

Ecco una presentazione che mostra come eseguire il mapping Web online utilizzando Node.js e PostgreSQL con PostGIS.