Librerie per il rendering di mappe basate su vettori nel browser

13

Esiste una libreria JavaScript open source come Leaflet o OpenLayers che può essere utilizzata in un'applicazione web o mobile e carica mappe basate su vettori anziché immagini? Ho solo bisogno delle informazioni sulla strada e di alcuni PDI.

L'unica libreria che ho trovato era polymaps , ma avrei comunque bisogno di un server o di un servizio che serva i dati SVG vettoriali (preferibilmente da OpenStreetMap). Inoltre c'è il bel progetto Android chiamato Mapsforge ma ne avrei bisogno per un'applicazione web o altri dispositivi mobili.

— Karussell
fonte

4

Abbiamo avviato una pagina per raccogliere collegamenti e informazioni sui riquadri vettoriali nel Wiki OpenStreetMap (lavori in corso):

http://wiki.openstreetmap.org/wiki/Vector_tiles

— Norbert Renner
fonte

10

Per il solo disegno di vettori, Leaflet o OpenLayers andranno bene. Niente di nuovo lì.

Per le mappe piastrellate vettoriali (ovvero diverse risoluzioni / livelli di dettaglio a diversi livelli di zoom), TileStache è un server semplice e valido. Ho usato molti esperimenti con Polymaps (AFAIK, l'unico visualizzatore di piastrellature js funzionante per scopi generici). Alcune persone hanno usato OpenLayer per aggiungere il supporto vettoriale piastrellato , ma AFAIK, non è stato integrato nel trunk in un anno, quindi probabilmente non lo farà nel prossimo futuro per mancanza di interesse.

TileStache (il server) stesso funziona molto bene. Tuttavia, ho trovato diversi bug con Polymaps e poiché non viene più aggiornato (progetto abbandonato), non riesco a convincermi ad usarlo in produzione (dovrei mantenerlo da solo ... Non posso giustificarlo a me stesso ancora.)

La mia soluzione per me è stata quella di scrivere un renderer vettoriale nativo OpenGL personalizzato utilizzato in AmigoCloud . In effetti, è così che vengono visualizzate tutte le mappe nel nostro servizio. A tale scopo, TileStache ha fornito abbastanza bene.

Vuoi dare un'occhiata al Provider vettoriale TileStache . Per esempi su come usarlo, puoi guardare una suite di test vettoriali molto semplice che ho scritto .

Purtroppo, non credo che Leaflet abbia il supporto per i vettori piastrellati.

— Ragi Yaser Burhum
fonte

Grazie! Esiste una semplice demo di tilestache nel Web?

— Karussell,

La densità di popolazione delle polymaps utilizza una cache del provider vettoriale piastrellata (ovvero non esegue il server tilestache, ma solo una copia di come apparirebbe l'uscita). Guardare il codice dovrebbe rendere ovvio che si tratta di un vettore piastrellato polymaps.org/ex/population.html . Purtroppo, le demo di tilestache disponibili online non utilizzano il provider di vettori. Tuttavia, se si esegue localmente tilestache-server e si sostituiscono gli URL demo per localhost con un'origine dati vettoriale (shapefile, postgis, ecc.) Configurata, funzionerà. Messaggio qui per aiuto se necessario.

— Ragi Yaser Burhum,

Non sono d'accordo con questa risposta, specialmente questa. For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there.Funzionerà se i vettori devono essere sovrapposti, ma che ne dici se l'intera mappa (tutto il livello base) è organizzata come vettori?

— Giser,

@giser Ecco perché faccio una distinzione tra "solo disegnando vettori" e "mappe piastrellate vettoriali". La seconda risposta è stata il termine che ho usato mappe "intere" fatte esclusivamente da vettori. Ecco un esempio di una cosa del genere: bl.ocks.org/mbostock/5593150

— Ragi Yaser Burhum,

@RagiYaserBurhum: mi dispiace, l'ho frainteso.

— giser

10

Aggiornamento: da quando è stato pubblicato, Mapbox ha rilasciato Mapbox GL JS , che esegue il rendering della mappa di base vettoriale basata su WebGL nel browser.

A questo punto, non esiste un'opzione stabilita. L'unica mappa in produzione completamente vettoriale disponibile è Google MapsGL, che è molto limitata a causa del supporto e delle prestazioni del browser.

Il più vicino che otterrai con open source al momento è Kothic.js e rotola le tue tessere con la sceneggiatura di Kothic.

— tmcw
fonte

+1 ehi, è fantastico! non capisco perché sei stato sottratto!

— Karussell,

6

Se capisco correttamente la tua domanda, sia OpenLayers che Leaflet caricheranno / mostreranno i dati vettoriali.

Per esempio

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

questo carica un file GeoJSON sulla mappa del volantino che utilizza OSM tramite CloudMade in background.

OpenLayers probabilmente supporta più diversi tipi di formati vettoriali, come KML

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

Se vuoi dire che stai cercando un server per fornire dati vettoriali sulla mappa, allora guarda MapServer, GeoServer e ESRI ArcGIS Server che tutti servereranno i dati vettoriali sulla tua mappa come Web Feature Server (WFS).

— tjmgis
fonte

Intendo di più la mappa stessa come dati vettoriali non alcune funzionalità che carico sulla mappa.

— Karussell,

la pubblicazione di molti dati tramite il tipo vettoriale può bloccare o addirittura uccidere il browser, a causa di troppi <svg>elementi, è necessario tenerlo presente

— Krystian

@Krystian Cioè se si esegue il rendering della mappa con SVG. Chiaramente potresti renderlo con OpenGL / WebGL (come fa Google Maps su Android / iOS e nelle mappe javascript WebGL sperimentali).

— Ragi Yaser Burhum

@RagiYaserBurhum sì, non ci ho pensato, ma in questo caso particolare non puoi usare webGL, a causa della limitazione delle API ect ..

— Krystian

1

L'OP non ha menzionato l'API ArcGIS, quindi non lo immaginavo (un sacco di GIS può essere fatto senza ArcGIS). Sì, sono d'accordo che mescolare ArcGIS JS con WebGL sarebbe una seccatura. I vettori piastrellati sono nuovi, ma hanno buone probabilità di essere il futuro. Forse

— Ragi Yaser Burhum il

2

Ho trovato un altro progetto interessante chiamato GL-Solar basato sulla tecnologia webgl piuttosto che su SVG o canvas. Anche se è nel suo sviluppo iniziale, questo sembra promettente.

Dovrebbero essere menzionati anche MapCSS , Cartagen e d3.js. d3.js è utilizzato nell'editor osm online iD . C'è anche un post sul blog sul rendering di volantini e html5.

— Karussell
fonte