GeoStyler

Ein generischer grafischer Stileditor für Geodaten

Jan Suleiman, terrestris GmbH & Co. KG Christian Mayer, meggsimum - Büro für Geoinformatik

FOSSGIS 2019, Dresden, 14.03.2019

Gliederung

• Über…
• Architektur
• Features
• Beispiele
• Stand & Ausblick

Jan Suleiman

suleiman@terrestris.de
@jansule

• B. Sc. Geoinformatik
• Developer @terrestris
• Kernentwickler GeoStyler
• Studentische Hilfskraft

terrestris

info@terrestris.de
@terrestris
@terrestrisde

• terrestris.de
• OpenSource GIS aus Bonn
• Entwicklung, Projekte & Support/Schulung
• Beratung, Planung, Implementierung & Wartung

Christian Mayer

chris@meggsimum.de
@chrismayer
@geofootballer

• Geoinformatiker
• Softwareentwickler & -architekt
• Kernentwickler und PSC Mitglied GeoExt
• Sprecher & Trainer
  national & international
• OSGeo Foundation Charter Member

meggsimum

info@meggsimum.de
@meggsimum
@meggsimum

• meggsimum.de
• Dienstleistungen im Bereich GIS, Webmapping & GDI
• Maßgeschneiderte WebGIS-Lösungen
• Softwarekonzepte und Softwareentwicklung
• Geodaten
• Beratung und Schulung

GeoStyler

Motivation

Das kartographische Stylen von Geodaten im Web ist seit Jahren ein wiederkehrendes Thema...

GeoStyler

• Open Source (BSD)
• ES6 & TypeScript
• React
• Ant Design

GeoStyler

• Komponenten basiert
• Stilformat unabhängig
• Datenformat unabhängig
• Framework unabhängig
• Vollständig anpassbar

Architektur

GeoStyler Core

UI-Komponenten

GeoStyler Core

Stil Definition

• Ein JSON-Objekt pro Stil
• Regelbasierte Stile
• Inspiriert durch SLD und Mapbox
• Typisiert
• Lingua Franca d. GeoStylers

{
  "name": "Demo Style",
  "rules": [
    {
      "name": "Rule 1",
      "symbolizers": [
        {
          "kind": "Mark",
          "color": "#0E1058",
          "wellKnownName": "Triangle"
        }
      ]
    }
  ]
}
            

GeoStyler

Features

• Regelbasierte Stile (inkl. Symbolizer)
• Einfache bis komplexe Komponenten
• Previews der Stile
• Klassifikationen
• ScaleDenominator & komplexe Filter
• Berechnung überschneidender Regeln

GeoStyler

Features

• Einbindung in bestehende Web(GIS) Projekte
• Nutzung ohne UI-Komponenten
• Verschiedene Layouts
• i18n

Installation

              $ npm i geostyler

              $ npm i geostyler-style
              $ npm i geostyler-data

              $ npm i geostyler-sld-parser
              $ npm i geostyler-openlayers-parser
              $ npm i geostyler-qgis-parser
              $ npm i geostyler-mapbox-parser (*)

              $ npm i geostyler-wfs-parser
              $ npm i geostyler-geojson-parser
            

Beispiel

Default Line Editor

              <LineEditor
                symbolizer={symbolizer}
                onSymbolizerChange={this.onSymbolizerChange}
              />
            

Beispiel

Custom Line Editor

              class CustomLineEditor extends React.Component {
                // ...
                render() {
                  return (
                    <ColorField
                      color={color}
                      onChange={this.onColorChange}
                    />
                    <WidthField
                      width={width}
                      onChange={this.onWidthChange}
                    />
                  );
                }
              }
            

Beispiel

Custom Line Editor

              <CustomLineEditor
                symbolizer={symbolizer}
                onSymbolizerChange={this.onSymbolizerChange}
              />
            

Beispiel

Klassifikationen

Beispiel

Browser Extension

Beispiel

Vollständig Anpassbar

Beispiel

Nutzung von SLDs in OpenLayers

Beispiel

Nutzung von SLDs in OpenLayers

              const sldParser = new GeoStylerSLDParser.SldStyleParser();
              const olParser =
                new GeoStylerOpenlayersParser.OlStyleParser(ol);

              sldParser.readStyle(sldXml)
                  .then(function (gs) {
                      olParser.writeStyle(gs).then(function (olStyle) {
                          mapLayer.setStyle(olStyle);
                      });
                  }, function() {
                      // handle error
                  });

          

GeoStyler Demo App

https://terrestris.github.io/geostyler-demo/

Stand

• Aktuell: v3.1.1, 01.03.2019
• 43 Releases
• >1600 Commits im Main-Repository
• 10 Contributors

Ausblick

• Weitere UI-Komponenten
• Weitere Stilparser
• Unterstützung FontIcons
• Unterstützung Rasterdaten
• GeoServer Plugin

Vielen Dank

Fragen & Anmerkungen?

Impressum

Impressum

Autoren

Lizenz

Diese Folien sind unter CC BY-SA veröffentlicht.

Vortragsfolien, PDF-Version, git repository