¿Cómo usar Leaflet para mostrar eficientemente partes de un conjunto de datos masivo?

13

Sigo viendo desarrolladores web que no son SIG que se encuentran con este problema, y ​​no estoy seguro de cuál es la solución.

  1. Hay un conjunto de datos de miles de elementos.
  2. Queremos mostrar un mapa al usuario, con el subconjunto visible de ellos como elementos interactivos y seleccionables.

¿Qué métodos hay para hacer esto?

Puedo pensar en estos, pero no son muy satisfactorios, así que me pregunto qué más hay:

  1. Almacene todos los datos en un archivo GeoJSON, transfiéralos al navegador y deje que Leaflet lo muestre. Problema: realmente no funciona con grandes conjuntos de datos. TopoJSON eleva el límite un poco. También causa un gran retraso en la carga de la página.

  2. Use Mapbox, almacene todos los datos en una capa interactiva en Mapbox y use Mapbox.js para mostrarlo. Funciona muy bien, pero cuesta dinero y no puedes alojarlo tú mismo.

  3. Use GeoServer para acceder a una base de datos PostGIS, use el complemento de folleto WFS-geojson para acceder a los datos desde allí. Probablemente funciona, pero el complemento WFS-geojson Leaflet ya no parece mantenerse.

  4. Use CartoDB, almacene todos los datos en una tabla CartoDB y use CartoDB.js para mostrarlo. Funciona muy bien, pero puede ser muy costoso. Es posible alojarlo usted mismo, pero instalar CartoDB no es trivial.

Todo esto me hace pensar que debe haber una forma mucho mejor y libre que me estoy perdiendo. ¿Qué es?

EDITAR

Tal vez descarté el complemento WFS-geojson con demasiada facilidad. Hay un tenedor que todavía ve algo de actividad (hace 4 meses): https://github.com/johanlahti/azgs-leaflet

geoserver web-mapping leaflet wfs geojson Steve Bennett
fuente
1
solo pregunte al geoserver wfs por json?
Ian Turton
Bueno, si entiendo correctamente, si codifica una solicitud para JSON, entonces esencialmente le está diciendo que transfiera todo el conjunto de datos como un solo blob JSON, al igual que la solución 1. Necesita WFS real para obtener solicitudes que están limitadas a la ventana gráfica actual, ¿no?
Steve Bennett
filtrar solicitud de wfs por límites del mapa (¿el folleto no hace eso automáticamente?)
Ian Turton
Para hacer eso necesitaría hablar WFS, ¿no? ¿Y afaik que existe solo en el complemento (no mantenido) WFS-geojson?
Steve Bennett
1
WFS no es tan difícil, tal vez el tema sea el folleto>
Ian Turton

Respuestas:

4

Ok, mis suposiciones en 2 eran incorrectas. Usted puede utilizar mapbox.js. Creo que el resultado final será un poco diferente: los marcadores en sí serán una capa ráster estática, pero se podrá hacer clic en ellos.

La especificación que hace que la interactividad a gran escala funcione es https://github.com/mapbox/utfgrid-spec

Se implementa en el lado del cliente en https://github.com/danzel/Leaflet.utfgrid (complemento de folleto) y también mapbox.js.

El servidor se implementa en https://github.com/mapbox/tilelive.js y, por lo tanto, en TileMill, por ejemplo: http://tilemill-server/tile/projectname/7/115/78.grid.json

También se implementa en TileStache, pero no en tilestream o mbtiles-server. Los datos de UTFgrid parecen estar almacenados en el archivo mbtiles por TileMill, pero estos los ignoran.

Así que no solo no necesitas mapbox.com, tampoco necesitas mapbox.js. Mapbox.js en su mayoría parece unir cosas por conveniencia: una sola llamada que crea una instancia de un mapa, recupera mosaicos y agrega interactividad.

Pero si usas mapbox.js, me falta un poco del rompecabezas, y ese es tilejson. Usted le da a mapbox.json el archivo tilejson correspondiente a su mapa.

Steve Bennett
fuente
0

Si aún no puede encontrar la solución, aquí hay 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);
    }
});
Tamas Kosa
fuente
No veo cómo esto limita la solicitud a la ventana gráfica actual.
alphabetasoup
-1

Aquí hay una presentación que muestra cómo hacer un mapeo web en línea usando Node.js y PostgreSQL con PostGIS.

Vanni Zhang
fuente
¿Podría quizás extraer los puntos relevantes para que esta sea una respuesta completa?
Steve Bennett