Bibliothèques pour restituer des cartes vectorielles dans le navigateur

13

Existe-t-il une bibliothèque JavaScript open source comme Leaflet ou OpenLayers qui peut être utilisée dans une application Web ou mobile et qui charge des cartes vectorielles au lieu d'images? Je n'ai besoin que des informations routières et de certains POI.

La seule bibliothèque que j'ai trouvée était des polymaps - mais j'aurais toujours besoin d'un serveur ou d'un service qui sert les données vectorielles SVG (de préférence d'OpenStreetMap). Il y a aussi le joli projet Android appelé Mapsforge mais j'en aurais besoin pour une application web ou d'autres appareils mobiles.

openstreetmap web-mapping vector web-service vector-tiles Karussell
la source

Réponses:

10

Pour simplement dessiner des vecteurs, Leaflet ou OpenLayers feront très bien l'affaire. Rien de nouveau là-bas.

Pour les cartes vectorielles en mosaïque (c'est-à-dire différentes résolutions / niveaux de détail à différents niveaux de zoom), TileStache est un serveur simple et efficace. J'ai utilisé de nombreuses expériences avec Polymaps (AFAIK, le seul visualiseur vectoriel js en mosaïque de travail à usage général). Certaines personnes ont utilisé OpenLayers pour ajouter un support vectoriel carrelé , mais AFAIK, il n'a pas été intégré au tronc depuis un an, donc il ne le sera probablement pas dans un avenir proche par manque d'intérêt.

TileStache (le serveur) lui-même fonctionne très bien. Néanmoins, j'ai trouvé plusieurs bugs avec Polymaps et comme il n'est plus mis à jour (projet abandonné), je ne peux pas me convaincre de l'utiliser en production (je devrais le maintenir moi-même ... je ne peux pas le justifier moi encore.)

Ma solution pour moi a été d'écrire un rendu vectoriel natif OpenGL personnalisé qui est utilisé dans AmigoCloud . En fait, c'est ainsi que toutes les cartes sont rendues dans notre service. À cet effet, TileStache a très bien livré.

Vous souhaitez consulter le fournisseur de vecteur TileStache . Pour des exemples d'utilisation, vous pouvez consulter une suite de tests vectoriels très basique que j'ai écrite .

Malheureusement, je ne pense pas que Leaflet supporte les vecteurs en mosaïque.

Ragi Yaser Burhum
la source
Merci! Existe-t-il une simple démonstration de tilestache sur le Web?
Karussell
La densité de population polymaps utilise un cache de fournisseur de vecteur en mosaïque (c'est-à-dire ne pas exécuter le serveur tilestache, mais juste une copie de ce à quoi ressemblerait la sortie). En regardant le code, il devrait être évident qu'il s'agit d'un polymaps.org/ex/population.html en mosaïque vectorielle . Malheureusement, les démos de tilestache qui sont disponibles en ligne n'utilisent pas le fournisseur de vecteur. Néanmoins, si vous exécutez tilestache-server localement et remplacez les URL de démonstration de votre hôte local par une source de données vectorielle (shapefile, postgis, etc.) configurée, cela fonctionnera. Msg ici pour de l'aide si besoin est.
Ragi Yaser Burhum
Je ne suis pas d'accord avec cette réponse, en particulier celle-ci. For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there.Cela fonctionnera si les vecteurs doivent être superposés, mais que diriez-vous si la carte entière (toute la couche de base) est organisée en vecteurs?
giser
@giser C'est pourquoi je fais une distinction entre "juste dessiner des vecteurs" et "vectorielles en mosaïque". La deuxième réponse a été le terme que j'ai utilisé des cartes "entières" faites de vecteurs purs. Voici un exemple d'une telle chose: bl.ocks.org/mbostock/5593150
Ragi Yaser Burhum
@RagiYaserBurhum: Je suis désolé, je le comprends mal.
giser
10

Mise à jour: depuis la publication de ce document, Mapbox a publié Mapbox GL JS , qui effectue un rendu de fond de carte vectoriel basé sur WebGL dans le navigateur.

À ce stade, il n'y a pas d'option établie. La seule carte en production entièrement vectorielle est Google MapsGL, et c'est très limité en raison de la prise en charge et des performances du navigateur.

Le plus proche que vous obtiendrez avec l'open source en ce moment est Kothic.js et rouler vos propres tuiles avec le script de Kothic.

tmcw
la source
+1 hé, c'est cool! ne comprenez pas pourquoi vous avez voté contre!
Karussell
6

Si je comprends bien votre question, OpenLayers et Leaflet chargeront / afficheront les données vectorielles.

Par exemple

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

cela charge un fichier GeoJSON sur la carte du dépliant qui utilise OSM via CloudMade en arrière-plan.

OpenLayers prend probablement en charge différents types de formats vectoriels, comme KML

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

Si vous voulez que vous recherchiez un serveur pour servir des données vectorielles sur la carte, regardez MapServer, GeoServer et ESRI ArcGIS Server qui vont tous servir des données vectorielles sur votre carte en tant que serveur d'entités Web (WFS).

tjmgis
la source
Je veux dire plus la carte elle-même en tant que données vectorielles et non certaines entités que je charge sur la carte.
Karussell
le fait de traiter un grand nombre de données via un type de vecteur peut bloquer ou même tuer le navigateur, en raison de trop d' <svg>éléments, vous devez garder cela à l'esprit
Krystian
@Krystian C'est-à-dire si vous rendez la carte avec SVG. De toute évidence, vous pouvez le rendre avec OpenGL / WebGL (comme le fait Google Maps sur Android / iOS et dans les cartes javascript WebGL expérimentales).
Ragi Yaser Burhum
@RagiYaserBurhum oui, je n'y ai pas pensé, mais quand même, dans ce cas particulier, vous ne pouvez pas utiliser webGL, à cause des limitations dans les API ect ..
Krystian
1
L'OP ne mentionnait pas l'API ArcGIS, donc je ne pensais pas que (beaucoup de SIG peuvent être réalisés sans ArcGIS). Oui, je suis d'accord que mélanger ArcGIS JS avec WebGL serait une douleur. Les vecteurs en mosaïque sont nouveaux - mais ils ont de bonnes chances d'être l'avenir. Peut
Ragi Yaser Burhum
2

J'ai trouvé un autre projet intéressant appelé GL-Solar qui est basé sur la technologie webgl plutôt que sur SVG ou canvas. Bien qu'il en soit à ses débuts, cela semble prometteur.

En outre MapCSS , Cartagen et d3.js doivent être mentionnés. d3.js est utilisé dans l'éditeur osm en ligne iD . Il y a aussi un article de blog sur le rendu des dépliants et html5.

Karussell
la source