Symbolik

Die Beschreibung der Darstellung des Karteninhaltes erfolgt in einer an CSS angelehnten Syntax.

Es gibt derzeit drei verschiedene Varianten, die abhängig von der Art der Datenquelle zum Einsatz kommen

• Stile für Vektor-Daten

• Stile für Raster-Daten

• Stile für Grid-Daten

Stile zuweisen

Für die meisten Ebenentypen^(*1) kann bei der Definition ein Standard-Stil zugewiesen werden. Bei der Zuweisung innerhalb der JSON Definition erfolgt dies durch eines der Attribute:

• style : der CSS-Code direkt (bitte beachten Sie hier, dass nur 4000 Zeichen eingegeben werden können)
• cssFile : Name einer Datei mit dem CSS-Code (der Inhalt wird in diesem Fall bei Änderungen automatisch neu gelesen),
• fallbackStyle (beim Ebenentyp GML): der CSS-Code direkt, dieser wird intern als "Notlösung" markiert, d.h. wenn die Datenquelle selber ein eigenes CSS mitbringt, wird das der Datenquelle bevorzugt verwendet.

Sind alle Attribute angegeben, wird cssFile gegenüber style gegenüber fallbackStyle bevorzugt ausgewertet, d.h. effektiv kommt nur eine der Angaben zum Einsatz.

Der an der Quelle definierte Stil wird als Standard für Zeichenanforderungen verwendet. Optional kann im Zeichenrequest jederzeit ein alternativer Stil übergeben werden.

^*1 ausgenommen solche, wo die Darstellung in den Daten enthalten ist, bspw. DXF oder EMF

Konzept

CSS-Code besteht immer aus Blöcken, in denen Eigenschaften Werte zugewiesen werden.

Ein Block besteht mindestens aus einer öffnenden und einer schließenden geschweiften Klammer.

Innerhalb des Blocks werden die Eigenschaften/Wert oder als Tupel (Wertesammlung) angegeben. Diese bestehen aus einem Eigenschaftsnamen, gefolgt von einem Doppelpunkt. Dann folgt der Wert der Eigenschaft, der mit einem Semikolon abgeschlossen wird.

Eigenschaft: Wert;

Ein und dieselbe Eigenschaft sollte in einem Block nicht mehrfach angegeben werden. Ist dies doch der Fall wird immer der zu letzt angegebene Wert verwendet.

Blocktyp::BlockId {
    Eigenschaft1: Wert;
    Eigenschaft2: Wert;
}

Der Blocktyp (point, line, polygon) bestimmt welche Eigenschaften zulässig sind. Nach dem Blocktyp kann durch zwei Doppelpunkte getrennt eine BlockId folgen. Dies ist ein vom Nutzer frei wählbarer Name der, wenn vorhanden, bei Fehlermeldungen mit ausgegeben wird und auch für die manuelle Erstellung einer Kartenlegende benötigt wird.

Die BlockId darf kein Schlüsselwort sein (wie ein zulässiger Blocktypname oder "default") und muss eindeutig sein. Die mehrmalige Verwendung ein und der selben BlockId führt zu einer Fehlermeldung. Die BlockID darf ebenfalls nur ein Wort sein und kein Leerzeichen enthalten.

Der Bereich aus Blocktyp und BlockId wird auch als Selektor bezeichnet.

Im folgenden Beispiel ist der Blocktyp "line" und die BlockId ist "Hauptstraße". Innerhalb des Blocks wird der Eigenschaft "line-width" der Wert 2 zugewiesen.

line::Hauptstraße {
    line-width: 2;
}

Blöcke können ineinander geschachtelt werden. In diesem Fall erbt der innere Block den Blocktyp des äußeren Blocks, wenn der innere Block selbst keinen Blocktyp definiert.

Der äußere Block darf selbst keine Eigenschaften definieren.

Im folgenden Beispiel sind die beiden inneren Blöcke vom Typ "line". Der zweite innere Block ist ein anonymer Block, ohne BlockId.

line {
    Hauptstraße {
        line-width: 2;
    }

    {
        line-width: 5;
    }
}

Kommentare

Es ist möglich im CSS-Code Kommentare anzugeben. Es werden einzeilige und mehrzeilige Kommentare unterstützt.

line::Hauptstraße {
    line-width: 2; // Dies ist ein einzeiliger Kommentar
}

/*
Dies ist ein mehrzeiliger Kommentar
*/

Farbangaben

Farben können im CSS in verschiedenen Varianten notiert werden. Der Farbkanal selber hat Werte im Bereich 0...255, der Alpha-Wert 0...1. Hier die Möglichkeiten für die Farbzuweisung einer grünen Linie:

• line-color: rgb(0,255,0); //Farbwert als RGB – Angabe
• line-color: ARGB(0.5, 0, 255,0); //Farbwert – Opazität 50%, RGB
• line-color: green; //Farbwert als Farbname
• line-color: green(0.8); //Farbwert als Farbname mit Transparenz
• line-color: #00ff00; //Hexadezimal ohne Transparenz
• line-color: #00ff00FF; //Hexadezimal – Opazität* der Fläche

Weitere Informationen finden Sie hier.

Darstellung einer Linie

Im Folgenden ein einfaches Beispiel für die Darstellung einer Linie, wobei die Linienbreite zwingend notwendig ist.

line { //Blocktyp
    // Linienbreite in px oder m (Standard ist px, 
    daher muss diese Einheit nicht angegeben werden)
    line-width: 2;
    // Linienfarbe als RGB Code, blau
    line-color: RGB(0, 143, 255);
}

Darstellung einer Fläche

Um eine Fläche zu zeichnen ist die Eigenschaft fill-pattern (die Füllart) zwingend notwendig.

polygon { //Blocktyp
  // Füllfarbe gelb, Alphawert 0.8
  fill-color: yellow(0.8);
  // Füllart: flächig
  fill-pattern: solid;
}

Da für eine flächige Darstellung meist auch der Rand der Fläche farbig gezeichnet werden soll, muss hier eine weitere Eigenschaft notiert werden. Hierbei handelt es sich um die border-line Eigenschaft. Diese wird, wie die anderen Eigenschaften auch mit Eigenschaftsname: {Wert1, Wert 2}; geschrieben. Da es sich bei border-line um eine komplexe Eigenschaft handelt, können hier mehrere Werte innerhalb der geschweiften Klammer notiert werden.

polygon { //Blocktyp
  //Füllfarbe gelb
  fill-color: yellow;
  //Füllart flächig
  fill-pattern: solid;
  //Grenzlinie grün, 1px breit
  border-line: 
	{
	line-width: 1px;
	line-color: green;  
	};

}

Beachten Sie das ; am Ende der border-line Eigenschaft.

Um die Innenlinien und Außenlinien von Flächen verschieden darzustellen, gibt es die Eigenschaften outer-border-line und inner-border-line. Diese sind wie die border-line komplexe Eigenschaften und können mehrere Werte enthalten.

polygon { //Blocktyp
  //Füllfarbe gelb
  fill-color: yellow;
  //Füllart flächig
  fill-pattern: solid;
  //Außenlinie
   outer-border-line:
   {
        line-width: 2px;
        line-color: blue;
    };
    //Innenlinie
    inner-border-line:    
    {
        line-width: 3px;
        line-color: red;
        //gestrichelter Linienstil
        line-dash-style: dot;
    };
}

Darstellung eines Punktes

Einen Punkt, wie aus dem Symboleditor bekannt, gibt es im CSS nicht. Im CSS wird der Punkt als komplexe Graphik gezeichnet. Eine komplexe Graphik kann verschiedene Blöcke enthalten. Für die Darstellung eines Punktes ist ein circle Block zu erstellen. Für die Zeichnung eines Punktes ist der Radius und die Füllart zwingend erforderlich.

point {     //Blocktyp
   complex-graphics:
        circle {
            //Füllfarbe
	        fill-color: green;
            //Füllart
	        fill-pattern: solid; 
            //Radius
      	     radius: 10px;
  };
}

Um einen Punkt auch mit einer Außenlinie zu zeichnen, können weitere Eigenschaften dem circle Block hinzugefügt werden:

point {
   complex-graphics:
    circle {
        //Linienbreite
      line-width: 2px;
      //Linienfarbe
      line-color: red;
      //Füllfarbe
      fill-color: green;
      //Transparenz der Füllfarbe
      fill-color-opacity: 0.8;
      //Füllart
      fill-pattern: solid;    
      //Radius
      radius: 10px;
  };
}

weiteres Beispiel für die Darstellung von Punkt, Linie und Fläche

unordered {
 point {
   complex-graphics:
    circle {
      line-width: 1px;
      line-color: black;
      fill-color: RGB(128, 128, 128);
      fill-color-opacity: 0.5;
      fill-pattern: solid;      
      radius: 8px;
  };
}
 line {
     line-width: 1px;
     line-color: black;    
 }
 polygon {
     fill-color: RGB(128, 128, 128);
     fill-color-opacity: 0.33;
     fill-pattern: solid;
     border-line:
     {
       line-width: 1px;
       line-color: black;       
     };
 }
}

weitere Beispiele mit Bildern