Bibliotecas para representar mapas basados ​​en vectores en el navegador

13

¿Existe una biblioteca JavaScript de código abierto como Leaflet u OpenLayers que se puede usar en una aplicación web o móvil y carga mapas basados ​​en vectores en lugar de imágenes? Solo necesito la información del camino y algunos PDI.

La única biblioteca que encontré fue polymaps , pero aún así necesitaría un servidor o servicio que sirva los datos SVG vectoriales (preferiblemente de OpenStreetMap). También está el bonito proyecto de Android llamado Mapsforge, pero lo necesitaría para una aplicación web u otros dispositivos móviles.

openstreetmap  web-mapping  vector  web-service  vector-tiles 
— Karussell
fuente

Respuestas:

10

Solo para dibujar vectores, Leaflet u OpenLayers funcionarán bien. Nada nuevo allí.

Por vector de azulejos mapas (es decir, diferentes resoluciones / niveles de detalle en diferentes niveles de zoom), TileStache es un simple y buen servidor. He estado usando muchos experimentos con Polymaps (AFAIK, el único visor de vectores en mosaico js de trabajo de uso general). Algunas personas han usado OpenLayers para agregar soporte de vectores en mosaico , pero AFAIK, no se ha integrado al tronco en un año, por lo que probablemente no lo hará en el futuro cercano por falta de interés.

TileStache (el servidor) en sí mismo está funcionando muy bien. Sin embargo, he encontrado varios errores con Polymaps y dado que ya no se está actualizando (proyecto abandonado), no puedo convencerme de usarlo en la producción (tendría que mantenerlo yo mismo ... No puedo justificarlo para yo todavía.)

Mi solución para mí ha sido escribir un renderizador de vectores nativo OpenGL personalizado que se usa en AmigoCloud . De hecho, así es como se representan todos los mapas en nuestro servicio. Para ese propósito, TileStache ha funcionado bastante bien.

Desea ver el proveedor de vectores de TileStache . Para ver ejemplos sobre cómo usarlo, puede consultar un conjunto de pruebas de vectores muy básico que escribí .

Lamentablemente, no creo que Leaflet tenga soporte para vectores en mosaico.

— Ragi Yaser Burhum
fuente
¡Gracias! ¿Hay una demostración simple de tiletache en la web?
— Karussell
La densidad de población de polymaps utiliza un caché de proveedor de vectores en mosaico (es decir, no ejecuta el servidor de mosaico, sino solo una copia de cómo se vería la salida). Mirar el código debería hacer obvio que es un mosaico de vectores polymaps.org/ex/population.html . Lamentablemente, las demostraciones de tiletache que están disponibles en línea no utilizan el proveedor de vectores. Sin embargo, si ejecuta el servidor tilestache localmente y reemplaza las URL de demostración para su host local con un origen de datos vectorial (shapefile, postgis, etc.) configurado, funcionará. Msg aquí para obtener ayuda si es necesario.
— Ragi Yaser Burhum
No estoy de acuerdo con esta respuesta, especialmente esto. For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there.Esto funcionará si los vectores se van a superponer, pero ¿qué tal si todo el mapa (toda la capa base) se organiza como vectores?
— Giser
@giser Es por eso que hago una distinción entre "solo dibujar vectores" y "mapas de mosaicos vectoriales". La segunda respuesta fue el término que utilicé mapas "enteros" hechos exclusivamente de vectores. Aquí hay un ejemplo de tal cosa: bl.ocks.org/mbostock/5593150
— Ragi Yaser Burhum
@RagiYaserBurhum: Lo siento, no lo entiendo.
— Giser
10

Actualización: desde que publicó esto, Mapbox lanzó Mapbox GL JS , que realiza la representación del mapa base vectorial basado en WebGL en el navegador.

En este punto, no hay una opción establecida. El único mapa en producción completamente vectorial que existe es MapsGL de Google, y eso es muy limitado debido a la compatibilidad y el rendimiento del navegador.

Lo más cercano que tendrás con el código abierto en este momento es Kothic.js y rodar tus propios mosaicos con el script de Kothic.

— tmcw
fuente
+1 oye, esto es genial! ¡no entiendo por qué te votaron mal!
— Karussell
6

Si entiendo su pregunta correctamente, tanto OpenLayers como Leaflet cargarán / mostrarán datos vectoriales.

Por ejemplo

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

Esto carga un archivo GeoJSON en el mapa de folleto que utiliza OSM a través de CloudMade en segundo plano.

OpenLayers probablemente admite más tipos diferentes de formatos vectoriales, como KML

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

Si quiere decir que está buscando un servidor para servir datos vectoriales en el mapa, mire MapServer, GeoServer y ESRI ArcGIS Server, que todos los datos vectoriales del servidor se almacenarán en su mapa como un Servidor de entidades web (WFS).

— tjmgis
fuente
Más me refiero al mapa en sí como datos vectoriales, no a algunas características que cargo en el mapa.
— Karussell
servir muchos datos a través del tipo de vector puede bloquear o incluso matar el navegador, debido a demasiados <svg>elementos, debe tener esto en cuenta
— Krystian
@Krystian Eso es si renderizas el mapa con SVG. Claramente, puede renderizarlo con OpenGL / WebGL (como lo hace Google Maps en Android / iOS y en los mapas experimentales de JavaScript de WebGL).
— Ragi Yaser Burhum
@RagiYaserBurhum sí, no pensé en eso, pero aún así, en este caso particular, no puede usar webGL, debido a la limitación en las API, etc.
— Krystian
1
El OP no mencionó la API de ArcGIS, por lo que no estaba asumiendo eso (se pueden hacer muchos SIG sin ArcGIS). Sí, estoy de acuerdo en que mezclar ArcGIS JS con WebGL sería un dolor. Los vectores en mosaico son nuevos, pero tienen una buena posibilidad de ser el futuro. Tal vez
— Ragi Yaser Burhum
2

Encontré otro proyecto interesante llamado GL-Solar que se basa en tecnología webgl en lugar de SVG o lienzo. Aunque está en su desarrollo inicial, esto parece prometedor.

También se deben mencionar MapCSS , Cartagen y d3.js. d3.js se utiliza en el editor de osm en línea iD . También hay una publicación de blog sobre el procesamiento de folletos y html5.

— Karussell
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.