Como usar o Leaflet para mostrar com eficiência partes de um conjunto de dados massivo?

Continuo vendo desenvolvedores da Web que não são de GIS enfrentando esse problema e não tenho certeza de qual é a solução.

1. Há alguns conjuntos de dados de milhares de itens.
2. Queremos mostrar um mapa para o usuário, com o subconjunto visível dele mostrado como elementos interativos e clicáveis.

Que métodos existem para fazer isso?

Eu posso pensar nelas, mas elas não são muito satisfatórias, então estou me perguntando o que mais há:

1. Armazene todos os dados em um arquivo GeoJSON, transfira-os para o navegador e deixe o Leaflet exibi-los. Problema: realmente não funciona com grandes conjuntos de dados. TopoJSON aumenta um pouco o limite. Isso também causa um grande atraso no carregamento da página.

2. Use o Mapbox, armazene todos os dados em uma camada interativa no Mapbox e use o Mapbox.js para exibi-lo. Funciona muito bem, mas custa dinheiro e você não pode hospedá-lo.

3. Use o GeoServer para acessar um banco de dados PostGIS, use o plug-in de folheto WFS-geojson para acessar os dados a partir daí. Provavelmente funciona, mas o plugin WFS-geojson Leaflet não parece mais ser mantido.

4. Use o CartoDB, armazene todos os dados em uma tabela CartoDB e use o CartoDB.js para exibi-lo. Funciona muito bem, mas pode ficar muito caro. É possível hospedá-lo você mesmo, mas a instalação do CartoDB não é trivial.

Tudo isso me faz pensar que deve estar faltando uma maneira muito melhor e livre. O que é isso?

EDITAR

Talvez eu tenha baixado o plug-in WFS-geojson com muita facilidade. Há uma bifurcação que ainda vê alguma atividade (4 meses atrás): https://github.com/johanlahti/azgs-leaflet

Ok, minhas suposições em 2 estavam incorretas. Você pode usar o mapbox.js. O resultado final será um pouco diferente, acredito - os marcadores em si serão uma camada raster estática, mas serão clicáveis.

A especificação que faz a interatividade em grande escala funcionar é https://github.com/mapbox/utfgrid-spec

Ele foi implementado no lado do cliente em https://github.com/danzel/Leaflet.utfgrid (plug-in de folheto) e também no mapbox.js.

O servidor está implementado em https://github.com/mapbox/tilelive.js e, portanto, no TileMill, por exemplo: http://tilemill-server/tile/projectname/7/115/78.grid.json

Também é implementado no TileStache, mas não no tilestream ou no mbtiles-server. Os dados UTFgrid parecem estar armazenados no arquivo mbtiles pelo TileMill, mas são ignorados por eles.

Portanto, além de você não precisar do mapbox.com, também não precisa do mapbox.js. O Mapbox.js parece, na maioria das vezes, unir coisas por conveniência: uma única chamada que instancia um mapa, busca blocos e adiciona interatividade.

Mas se você usa o mapbox.js, falta um pouco do quebra-cabeça, que é o tilejson. Você fornece ao mapbox.json o arquivo tilejson correspondente ao seu mapa.

Desculpe pela resposta tardia, mas também há o plug-in leaflet-vetor-camadas que suporta os serviços postGIS http://jasonsanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/

Pelo que parece, você pode filtrar o serviço.

Eu usei este plugin para serviços ArcGIS e tem sido muito bom.

Espero que ajude, Rowan

Se você ainda não encontrou a solução, aqui está uma: 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);
    }
});

A maneira mais rápida de fazer isso é https://mangomap.com , você poderá configurar tudo em cerca de 10 minutos sem escrever uma única linha de código.

A seguir, uma apresentação mostra como fazer o mapeamento on-line da Web usando o Node.js e o PostgreSQL com o PostGIS.