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

13

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

Steve Bennett
fonte
1
basta perguntar ao geoserver wfs json?
Ian Turton
Bem, se bem entendi, se você codifica uma solicitação para JSON, então você está basicamente dizendo para transferir todo o conjunto de dados como um único blob JSON - assim como a solução 1. Você precisa de um WFS real para obter solicitações limitadas para a viewport atual, não?
21440 Steve Steve Steve
wfs filtro solicitar por Bounds de mapa (não se folheto fazer isso automaticamente?)
Ian Turton
Para fazer isso, seria necessário falar WFS, não? E o que existe apenas no plug-in WFS-geojson (não mantido)?
21440 Steve Steve Steve
1
O WFS não é tão difícil - talvez o problema seja o folheto>
Ian Turton

Respostas:

4

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.

Steve Bennett
fonte
0

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);
    }
});
Tamas Kosa
fonte
Não vejo como isso limita a solicitação à viewport atual?
alphabetasoup
0

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.

ChrisInCambo
fonte
1
Interessante, eu nunca tinha ouvido falar disso antes. Mas a US $ 29 / mês, isso está definitivamente fora da faixa de preço do hobby ou da maioria dos pequenos projetos de pesquisa.
21814 Steve Bennett
4
Isso realmente não responde à pergunta e parece um anúncio. Parece que o solicitante deseja um método que promova a exibição eficiente de grandes conjuntos de dados. Simplesmente fornecer seu produto sem explicação sobre por que ele é mais eficiente parece insuficiente.
Conor
1
O OP apresentou um problema, eu apresentei uma possível solução. Todas as soluções para esse problema terão um custo em tempo ou dinheiro.
23414 ChrisInCambo
@Conor, embora este post pareça responder à pergunta, e seja perfeitamente claro sobre a natureza da solução e a conexão do pôster com o produto, ele se beneficiaria com alguma elaboração do motivo pelo qual poderia ser recomendado.
whuber
0

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

Vanni Zhang
fonte
Você poderia extrair os pontos relevantes para fazer desta uma resposta completa?
21816 Steve Bennett #