Bibliotheken zum Rendern von vektorbasierten Karten im Browser

13

Gibt es eine Open-Source-JavaScript-Bibliothek wie Leaflet oder OpenLayers, die in einer Web- oder Mobilanwendung verwendet werden kann und vektorbasierte Karten anstelle von Bildern lädt? Ich brauche nur die Straßeninformationen und einige POIs.

Die einzige Bibliothek, die ich gefunden habe, waren Polymaps - aber ich würde trotzdem einen Server oder Dienst benötigen, der die Vektor-SVG-Daten liefert (vorzugsweise von OpenStreetMap). Es gibt auch das nette Android-Projekt namens Mapsforge, aber ich würde es für eine Webanwendung oder andere mobile Geräte benötigen.

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

Antworten:

10

Nur um Vektoren zu zeichnen, reichen Leaflet oder OpenLayers aus . Nichts neues da.

Für vektor gekachelten Karten (dh verschiedene Auflösungen / Detailstufen bei verschiedenen Zoomstufen), TileStache ist eine einfache und gute Server. Ich habe mit vielen Experimenten mit Polymaps gearbeitet (AFAIK, der einzige universell einsetzbare, gekachelte Vektor-Viewer). Einige Leute haben OpenLayers verwendet, um gekachelte Vektorunterstützung hinzuzufügen , aber AFAIK, es wurde in einem Jahr nicht in Trunk integriert, so dass es in naher Zukunft aus Mangel an Interesse wahrscheinlich nicht möglich sein wird.

TileStache (der Server) selbst funktioniert sehr gut. Trotzdem habe ich einige Fehler mit Polymaps gefunden und da es nicht mehr aktualisiert wird (aufgegebenes Projekt), kann ich mich nicht davon überzeugen, es in der Produktion zu verwenden (ich müsste es selbst warten ... Ich kann es nicht rechtfertigen ich gerade noch.)

Meine Lösung bestand darin, einen benutzerdefinierten OpenGL-Vektor-Renderer zu schreiben, der in AmigoCloud verwendet wird . Auf diese Weise werden alle Karten in unserem Service gerendert. Zu diesem Zweck hat TileStache recht gut geliefert.

Sie möchten sich den TileStache Vector Provider ansehen . Als Beispiel für die Verwendung können Sie ein sehr einfaches Beispiel ansehen Vektortestsuite, die ich geschrieben habe .

Leider glaube ich nicht, dass Leaflet gekachelte Vektoren unterstützt.

Ragi Yaser Burhum
quelle
Vielen Dank! Gibt es eine einfache Tilestache-Demo im Web?
Karussell
Die Polymaps-Bevölkerungsdichte verwendet einen gekachelten Vektoranbieter-Cache (dh, es wird nicht der Kachelserver ausgeführt, sondern nur eine Kopie dessen, wie die Ausgabe aussehen würde). Ein Blick auf den Code sollte deutlich machen, dass es sich um einen vektorgekachelten Code handelt . Polymaps.org/ex/population.html . Leider verwenden die online verfügbaren Tilestache-Demos nicht den Vektoranbieter. Wenn Sie jedoch den tilestache-server lokal ausführen und die Demo-URLs für Ihren localhost durch eine konfigurierte Vektordatenquelle (Shapefile, Postgis usw.) ersetzen, funktioniert dies. Msg hier für Hilfe, wenn nötig.
Ragi Yaser Burhum
Ich bin mit dieser Antwort nicht einverstanden, insbesondere mit dieser. For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there.Dies funktioniert, wenn die Vektoren überlagert werden sollen, aber wie wäre es, wenn die gesamte Karte (alle Basisebenen) als Vektoren organisiert sind?
giser
@giser Deswegen unterscheide ich zwischen "Nur Vektoren zeichnen" und "Vektor gekachelten Karten". Die zweite Antwort lautete, dass ich "ganze" Karten aus reinen Vektoren verwendete. Hier ist ein Beispiel für so etwas: bl.ocks.org/mbostock/5593150
Ragi Yaser Burhum
@ RagiYaserBurhum: Es tut mir leid, ich verstehe es falsch.
giser
10

Update: Seit dem Posten dieses Dokuments hat Mapbox Mapbox GL JS veröffentlicht , mit dem WebGL-basierte Vektorbasiskarten im Browser gerendert werden.

Derzeit gibt es keine festgelegte Option. Die einzige Karte, die in der Produktion vollständig vektorisiert ist, ist Google MapsGL. Dies ist aufgrund der Browserunterstützung und -leistung nur sehr begrenzt möglich.

Das, was Sie im Moment mit Open Source am ehesten erreichen, ist Kothic.js und das Rollen Ihrer eigenen Kacheln mit Kothics Skript.

tmcw
quelle
+1 Hey, das ist cool! Verstehe nicht, warum du herabgestimmt wurdest!
Karussell
6

Wenn ich Ihre Frage richtig verstehe, werden sowohl OpenLayers als auch Leaflet Vektordaten laden / anzeigen.

Beispielsweise

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

Dadurch wird eine GeoJSON-Datei auf die Flugblattkarte geladen, die OSM über CloudMade im Hintergrund verwendet.

OpenLayers unterstützt wahrscheinlich mehr verschiedene Arten von Vektorformaten, wie KML

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

Wenn Sie nach einem Server suchen, der Vektordaten auf der Karte bereitstellt, sehen Sie sich MapServer, GeoServer und ESRI ArcGIS Server an, die alle Vektordaten als Web Feature Server (WFS) auf Ihrer Karte speichern.

tjmgis
quelle
Ich meine eher die Karte selbst als Vektordaten, nicht einige Features, die ich auf die Karte lade.
Karussell
dient , kann eine Menge von Daten , die durch Vektortyp hängen oder sogar Browser zu töten, weil zu viele <svg>halten Sie sollten Elemente, dies im Auge
Krystian
@Krystian Das ist, wenn Sie die Karte mit SVG rendern. Natürlich können Sie es mit OpenGL / WebGL rendern (wie Google Maps auf Android / iOS und in den experimentellen WebGL-Javascript-Karten).
Ragi Yaser Burhum
@RagiYaserBurhum ja, ich habe nicht darüber nachgedacht, aber in diesem speziellen Fall können Sie WebGL nicht verwenden, da die APIs usw. eingeschränkt sind.
Krystian
1
Das OP erwähnte die ArcGIS-API nicht, so dass ich nicht davon ausgegangen bin (viel GIS kann ohne ArcGIS ausgeführt werden). Ja, ich bin damit einverstanden, dass das Mischen von ArcGIS JS mit WebGL schmerzhaft wäre. Gekachelte Vektoren sind neu - aber sie haben eine gute Chance, die Zukunft zu sein. Vielleicht
Ragi Yaser Burhum
2

Ich habe ein weiteres interessantes Projekt namens GL-Solar gefunden, das auf der Webgl-Technologie und nicht auf SVG oder Canvas basiert. Obwohl es sich in seiner frühen Entwicklung befindet, sieht dies vielversprechend aus.

Auch MapCSS , Cartagen und d3.js sollten erwähnt werden. d3.js wird im Online-Osm-Editor iD verwendet . Es gibt auch eine Blog - Post über Faltblatt und html5 - Rendering.

Karussell
quelle