Bibliotecas para renderizar mapas baseados em vetores no navegador

13

Existe uma biblioteca JavaScript de código aberto, como o Leaflet ou o OpenLayers, que pode ser usada em um aplicativo da Web ou móvel e carrega mapas baseados em vetores em vez de imagens? Só preciso das informações da estrada e de alguns POIs.

A única biblioteca que encontrei foi o polymaps - mas ainda assim eu precisaria de um servidor ou serviço que atenda aos dados SVG vetoriais (de preferência no OpenStreetMap). Também existe o bom projeto Android chamado Mapsforge, mas eu precisaria dele para um aplicativo da Web ou outros dispositivos móveis.

openstreetmap web-mapping vector web-service vector-tiles Karussell
fonte

Respostas:

10

Apenas para desenhar vetores, o Leaflet ou o OpenLayers funcionam perfeitamente. Nada de novo lá.

Para mapas vetoriais lado a lado (ou seja, diferentes resoluções / níveis de detalhes em diferentes níveis de zoom), o TileStache é um servidor simples e bom. Tenho usado muitas experiências com o Polymaps (AFAIK, o único visualizador de vetores de uso geral em mosaico). Algumas pessoas usaram o OpenLayers para adicionar suporte a vetor lado a lado , mas o AFAIK não foi integrado ao tronco em um ano, portanto, provavelmente não será no futuro próximo por falta de interesse.

O TileStache (o servidor) está funcionando muito bem. No entanto, encontrei vários bugs no Polymaps e, como ele não está mais sendo atualizado (projeto abandonado), não consigo me convencer a usá-lo na produção (teria que mantê-lo sozinho ... Não posso justificar ainda.)

Minha solução para mim foi escrever um renderizador de vetor nativo OpenGL personalizado, usado no AmigoCloud . De fato, é assim que todos os mapas são renderizados em nosso serviço. Para esse efeito, o TileStache entregou muito bem.

Você deseja examinar o provedor de vetores TileStache . Para exemplos de como usá-lo, você pode ver um conjunto de testes vetoriais muito básico que escrevi .

Infelizmente, não acho que o Leaflet tenha suporte para vetores lado a lado.

Ragi Yaser Burhum
fonte
Obrigado! Existe uma demonstração simples do tilestache na Web?
quer
A densidade populacional dos polymaps usa um cache de provedor de vetor lado a lado (ou seja, não está executando o servidor tilestache, mas apenas uma cópia da aparência da saída). Observar o código deve tornar óbvio que é polymaps.org/ex/population.html de vetor lado a lado . Infelizmente, as demonstrações do tilestache disponíveis on-line não usam o provedor de vetores. No entanto, se você executar o tilestache-server localmente e substituir os URLs de demonstração do seu host local por uma fonte de dados vetorial (shapefile, postgis, etc) configurada, ele funcionará. Msg aqui para obter ajuda, se necessário.
Ragi Yaser Burhum
Não estou de acordo com esta resposta, especialmente isso For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there.Isso funcionará se os vetores forem sobrepostos, mas e se o mapa inteiro (toda a camada base) estiver organizado como vetores?
giser
@ giser É por isso que faço uma distinção entre "apenas desenhar vetores" e "mapas em mosaico de vetores". A segunda resposta foi o termo que usei mapas "inteiros" feitos de vetores puramente. Aqui está um exemplo disso: bl.ocks.org/mbostock/5593150
Ragi Yaser Burhum
@RagiYaserBurhum: Me desculpe, eu entendi errado.
giser
10

Atualização: desde a publicação, a Mapbox lançou o Mapbox GL JS , que faz a renderização do mapa base do vetor baseada em WebGL no navegador.

Neste ponto, não há opção estabelecida. O único mapa de produção totalmente vetorial existente no mercado é o MapsGL do Google, e isso é muito limitado devido ao suporte e desempenho do navegador.

O mais próximo que você conseguirá do código aberto no momento é o Kothic.js e rolar suas próprias peças com o script do Kothic.

tmcw
fonte
+1 ei, isso é legal! não entenda porque você foi votado!
26413 Karussell
6

Se entendi sua pergunta corretamente, o OpenLayers e o Leaflet carregarão / mostrarão os dados vetoriais.

Por exemplo

http://leafletjs.com/examples/geojson/

isso carrega um arquivo GeoJSON no mapa do folheto que usa o OSM via CloudMade em segundo plano.

O OpenLayers provavelmente suporta mais tipos diferentes de formatos vetoriais, como KML

http://dev.openlayers.org/examples/dynamic-text-layer.html

Se você quer dizer que você está atrás de um servidor para servir dados vetoriais no mapa, consulte MapServer, GeoServer e ESRI ArcGIS Server, que todos irão armazenar dados vetoriais em seu mapa como um Web Feature Server (WFS).

tjmgis
fonte
Quero dizer mais o mapa em si como dados vetoriais, não como alguns recursos que carrego no mapa.
26413 Karussell
servindo um monte de dados através do tipo vector pode pendurar ou mesmo matar navegador, por causa de muitos <svg>elementos, você deve manter isso em mente
Krystian
@ Krystian Ou seja, se você renderizar o mapa com SVG. Claramente, você pode renderizá-lo com o OpenGL / WebGL (como o Google Maps faz no Android / iOS e nos mapas javascript experimentais do WebGL).
Ragi Yaser Burhum
@RagiYaserBurhum sim, eu não pensei sobre isso, mas ainda assim, neste caso particular, você não pode usar WebGL, por causa da limitação no APIs ect ..
Krystian
1
O OP não mencionou a API do ArcGIS, então eu não estava assumindo que (muitos SIG podem ser feitos sem o ArcGIS). Sim, concordo que misturar o ArcGIS JS com o WebGL seria uma dor. Os vetores lado a lado são novos - mas eles têm uma boa chance de ser o futuro. Talvez
Ragi Yaser Burhum
2

Encontrei outro projeto interessante chamado GL-Solar, que é baseado na tecnologia webgl em vez de SVG ou canvas. Embora esteja em seu desenvolvimento inicial, isso parece promissor.

Também devem ser mencionados o MapCSS , Cartagen e d3.js. O d3.js é usado no editor osm online iD . Há também uma postagem no blog sobre renderização de folheto e html5.

Karussell
fonte