KlassischInteraktiv
DEEN
Alle Referenzen

vectorstream

Eigenes Produkt

KI-ProjektIch habe vectorstream mit Hilfe von KI gebaut.

Überblick

vectorstream ist ein Werkzeug zum Zeichnen und Bearbeiten auf Web-Karten. Es läuft auf Leaflet, OpenLayers und MapLibre. Formen importiert und exportiert es als GeoJSON. Eine Grenze zwischen zwei Flächen speichert es nur einmal, darum gilt eine Änderung für beide Flächen. Das Produkt ist ein Pre-release.

Typ
Toolkit zum Zeichnen und Bearbeiten auf Web-Karten
Rolle
Produkt, Gestaltung und Aufbau mit KI

Projekt-Snapshot

Ziel

Entwickler sollen ihrer Web-Karte Werkzeuge zum Zeichnen und Bearbeiten hinzufügen und alle Formen als GeoJSON wieder auslesen können.

Ergebnis

vectorstream ist ein Pre-release und hat eine eigene Produktseite mit Features, Playground, Doku, Vergleich und FAQ. Die Pakete @vectorstream/* sind noch nicht veröffentlicht.

KI im Einsatz

Aufbau mit KI

  • Beim Bauen habe ich KI eingesetzt.

Das Produkt

Startseite

Startseite von vectorstream auf schwarzem Grund. Oben stehen das Logo und das Menü mit Features, Solutions, Playground, Docs, Compare und FAQ. Links sieht man das Etikett Pre-release und den Titel Drawing & editing tools for Leaflet. Rechts zeigt eine dunkle Karte eine Werkzeugleiste und ein Polygon, das gerade entsteht. Unten laufen die Namen OpenLayers, MapLibre GL, GeoJSON und Leaflet durch.

Editor

Editor auf einer Leaflet-Karte. Links liegt die Werkzeugleiste, rechts sitzen Document, Layers, Selection und History. Eine ausgewählte Fläche zeigt Griffe zum Skalieren und Drehen. Ein Maß nennt dazu Area, Perimeter, Width und Height.

Branchenseite

Branchenseite Cadastre & Land Registry auf schwarzem Grund mit dem Titel Parcel editing for cadastre and land registry. Rechts zeigt eine dunkle Karte zwei blaue Flurstücke, Parcel 114 und Parcel 115. Eine orangefarbene Linie markiert ihre gemeinsame Kante shared edge. Links neben der Werkzeugleiste ist das Werkzeug zum Bearbeiten aktiv.

Features

Die Funktionen

  • Auf der Features-Seite sind alle Werkzeuge nach Aufgaben sortiert.
  • Gezeichnet werden Punkte, Linien, Rechtecke, Polygone, Kreise, Textbeschriftungen und Freihandflächen.
  • Neue Punkte rasten an nahen Ecken und Kanten ein. Weil eine gemeinsame Grenze nur einmal gespeichert ist, ändert ein Zug an einer gemeinsamen Ecke beide Flächen.
  • Rückgängig stellt genau den vorherigen Zustand wieder her.

Playground

Der Playground

  • Auf der Playground-Seite läuft der echte Editor im Browser.
  • Dokumente bleiben im Browser: Der Editor speichert sie nur dort und sendet nichts an einen Server. Er läuft auf Leaflet, OpenLayers oder MapLibre GL.
  • Die Zeichnung lässt sich als GeoJSON exportieren.

Editor

Der Editor

  • Im Editor auf der Leaflet-Karte liegt links die Werkzeugleiste mit Zeichnen, Teilen, Vereinen und Schneiden, rechts sitzen Dokument, Ebenen, Auswahl und Verlauf.
  • Wählt man eine Fläche aus, erscheinen Griffe zum Verschieben, Skalieren und Drehen, dazu ihre Maße.
  • Die Statuszeile zählt Flächen, Ecken und Kanten. Unten wechselt man Karten-Bibliothek und Sprache.

Doku

Die Doku

  • Laut Doku bleiben die Daten topologisch sauber, weil der Editor die Karte als Aufteilung in Flächen speichert und jede Grenze nur einmal vorkommt.
  • Die Pakete heißen @vectorstream/*, das Paket core enthält das Modell, die Prüfung und den GeoJSON-Import und -Export.
  • Ein Hinweis in der Doku sagt, dass die Pakete noch nicht auf npm stehen. Für Leaflet, OpenLayers und MapLibre gibt es je eine Anleitung.

Branchen

Die Seite für Kataster und Grundbuch

  • Das Produkt hat eigene Seiten für einzelne Branchen. Ich zeige hier die für Kataster und Grundbuch: Sie führt vor, wie sich Flurstücke bearbeiten lassen.
  • Korrigiert man eine gemeinsame Grenze einmal, ziehen beide benachbarten Flurstücke mit. Teilen, Vereinen und Beschneiden geht direkt im Browser.
  • Der Export liefert GeoJSON fürs Register-System. Weitere Seiten gibt es zum Beispiel für Stadtplanung, Forstwirtschaft und Drohnen-Zonen.

Die Feature-Animationen

Auf der Produktseite hat jedes Werkzeug eine kleine Animation. Vier davon spiele ich hier in einer Schleife ab. Bei reduzierter Bewegung erscheint stattdessen ein Standbild.

  • Animation: Ein Zeiger setzt Ecke für Ecke ein Polygon auf eine dunkle Karte. Das Polygon schließt sich, füllt sich blau und zeigt seine Fläche. Danach beginnt ein neues.
    PolygoneMan klickt Ecke für Ecke und schließt den Ring.
  • Animation: Ein Zeiger zeichnet ein Polygon neben einer Fläche. Neue Punkte rasten an einer Kante und an einer Ecke ein. Zwei Tags nennen das Ziel: edge und corner.
    EinrastenEin neuer Punkt rastet an einer Ecke oder Kante in der Nähe ein.
  • Animation: Zwei blaue Flächen, A und B, teilen eine Grenze. Ein Zug an einer gemeinsamen Ecke verformt beide Flächen. Die Angaben zu A und B ändern sich mit.
    Gemeinsame GrenzenBenachbarte Flächen teilen eine Grenze, darum ändert ein Zug beide Flächen.
  • Animation: Zwei blaue Flächen liegen nebeneinander. Das Werkzeug Vereinen entfernt die gemeinsame Kante, sodass beide eine Fläche werden. Danach kehren die zwei Flächen zurück.
    Flächen vereinenVereinen macht aus Flächen mit gemeinsamer Kante eine einzige Fläche.