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 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,
  • cssFile : Name einer Datei mit dem CSS-Code (der Inhalt wird in diesem Fall bei Änderungen automatisch neu gelesen),
  • fallbackStyle: 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 Attrtibute 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. 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 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 muß eindeutig sein. Die mehrmalige Verwendung ein und der selben BlockId führt zu einer Fehlermeldung.

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

Im folgenden Beispiel ist der Block vom Typ "line" und die Id 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
*/

Beispiele

Beispiele mit Bildern

Beispiele ohne Bilder

Das folgende Beispiel füllt Polygone, wenn die Spalte "GEOTYPE" den Wert "Wald" hat und die Spalte "SUB_GEOTYPE" entweder den Wert "Laubwald", "Nadelwald", "Mischwald" oder "Regenwald" hat. Das "Laubwald" Polygon hat eine Schraffur und Text, sowie sichtbare äußere und innere Begrenzungslinien. Das "Nadelwald" Polygon wird mit einem komplexen Muster gefüllt. Das "Mischwald" Polygon wird mit einem Bildmuster gefüllt. Das "Regenwald" Polygon wird mit einer festen Farbe ausgefüllt.

unordered {
    polygon {
        [GEOTYPE=="Wald"] {
            id0 [SUB_GEOTYPE=="Laubwald"] {
                // Farben definieren
                fill-color: brown;
                fill-color-opacity: 1.0;
                background-color: red;
                background-color-opacity: 1.0;

                // Muster definieren
                fill-pattern: hatch_style_diagonal_cross;
                distance-between-pattern-lines: 20m;
                min-distance-between-pattern-lines: 10;
                max-distance-between-pattern-lines: 50;
                pattern-lines-width: 5m;
                min-pattern-lines-width: 3;
                max-pattern-lines-width: 5;
                fill-pattern-texture-opacity: 1.0;
                fill-pattern-texture-displacement-x: 5m;
                min-fill-pattern-texture-displacement-x: 3;
                max-fill-pattern-texture-displacement-x: 10;
                fill-pattern-texture-displacement-y: 5m;
                min-fill-pattern-texture-displacement-y: 3;
                max-fill-pattern-texture-displacement-y: 10;

                // Text definieren
                text: [LABEL];
                text-color: #FF0000FF;
                text-color-opacity: 1.0;
                text-font-name: "Times New Roman";
                text-font-type: standard;
                text-height: 10m;
                min-text-height: 40;
                max-text-height: 80;
                text-height-measurement: cardo;
                text-weight: 400;
                text-style: underline;
                text-quality: antialiased;

                // Äußere Begrenzungslinie definieren
                outer-border-line:
                {
                    line-width: 2.5m;
                    line-min-width: 15;
                    line-max-width: 35;
                    line-color: black;
                    line-dash-style: custom;
                    line-dash-pattern: 4m, 4m;
                    line-min-dash-pattern: 10, 10;
                    line-max-dash-pattern: 20, 20;
                };

                // Innere Begrenzungslinie definieren
                inner-border-line:
                {
                    line-width: 3px;
                    line-color: yellow;
                };
            }

            id1 [SUB_GEOTYPE=="Nadelwald"] {
                background-color: RGB(168, 213, 143);
                fill-pattern: complex;
                complex-fill-pattern-bbox-width: 1000.0;
                complex-fill-pattern-bbox-height: 1000.0;
                complex-fill-pattern-width: 100px;
                complex-fill-pattern-min-width: 100.0;
                complex-fill-pattern-max-width: 100.0;
                complex-fill-pattern-height: 100px;
                complex-fill-pattern-min-height: 100;
                complex-fill-pattern-max-height: 100;
                complex-fill-pattern:
                    arc {
                        line-width: 50m;
                        line-color: RGB(0, 146, 64);
                        position-x: 250.0m;
                        position-y: 250.0m;
                        radius: 200.0m;
                        start-angle: 0;
                        sweep-angle: 360;
                    },
                    polyline {
                        line-width: 3px;
                        line-color: red;
                        line-start-cap: round;
                        line-end-cap: round;
                        position-x: 250m;
                        position-y: 250m;
                        points: (-20px, -20px), (20px, -20px), (20px, 20px), (-20px, 20px), (-20px, -20px);
                    },
                    pixmap {
                        file-name: "D:\\Temp\\CSS\\TestPixmap.bmp";
                        width: 20px;
                        height: 20px;
                        min-width: 20;
                        max-width: 1000;
                        min-height: 20;
                        max-height: 1000;
                        opacity: 1.0;
                        rotation: 45.0;
                        vertical-alignment: center;
                        horizontal-alignment: center;
                        position-x: 250m;
                        position-y: 250m;
                    },
                    polygon {
                        line-width: 3px;
                        line-min-width: 0;
                        line-max-width: 20;
                        line-color: blue;
                        line-color-opacity: 1.0;
                        line-join: round;
                        line-miter-limit: 10;
                        line-dash-cap: flat;
                        line-dash-style: custom;
                        line-dash-pattern: 2px, 10px, 10px, 5px;
                        fill-color: green;
                        fill-color-opacity: 1.0;
                        background-color: red;
                        background-color-opacity: 1.0;
                        fill-pattern: custom;
                        custom-fill-pattern-width: 8;
                        custom-fill-pattern-height: 8;
                        custom-fill-pattern: 
                            0, 0, 0, 0, 1, 1, 1, 1,
                            0, 0, 0, 0, 1, 1, 1, 1,
                            0, 0, 0, 0, 1, 1, 1, 1,
                            0, 0, 0, 0, 1, 1, 1, 1,
                            1, 1, 1, 1, 0, 0, 0, 0,
                            1, 1, 1, 1, 0, 0, 0, 0,
                            1, 1, 1, 1, 0, 0, 0, 0,
                            1, 1, 1, 1, 0, 0, 0, 0;
                        fill-pattern-texture-opacity: 1.0;
                        position-x: 750m;
                        position-y: 750m;
                        points: (-20px, -20px), (20px, -20px), (20px, 20px), (-20px, 20px);
                    },
                    arc {
                        line-width: 50m;
                        line-color: RGB(0, 146, 64);
                        position-x: 750.0m;
                        position-y: 750.0m;
                        radius: 200.0m;
                        start-angle: 0;
                        sweep-angle: 360;
                    },
                    line {
                        line-width: 3px;
                        line-color: red;
                        line-start-cap: round;
                        line-end-cap: round;
                        x1: 600m;
                        y1: 250m;
                        x2: 900m;
                        y2: 250m;
                    },
                    text {
                        text: "A";
                        text-color: red;
                        text-font-name: "Times New Roman";
                        text-font-type: standard;
                        text-height: 30px;
                        text-weight: 400;
                        text-quality: antialiased;
                        text-horizontal-alignment: center;
                        text-vertical-alignment: center;
                        position-x: 250m;
                        position-y: 750m;
                    };
            }

            id2 [SUB_GEOTYPE=="Mischwald"] {
                fill-pattern: pixmap;
                fill-pattern-pixmap: "D:\\Temp\\CSS\\TestPixmap.bmp";
                fill-pattern-pixmap-width: 10m;
                min-fill-pattern-pixmap-width: 100;
                max-fill-pattern-pixmap-width: 500;
                fill-pattern-pixmap-height: 10m;
                min-fill-pattern-pixmap-height: 100;
                max-fill-pattern-pixmap-height: 500;
            }

            id3 [SUB_GEOTYPE=="Regenwald"] {
                fill-color: green;
                fill-pattern: solid;
            }
        }
    }
}

Das folgende Beispiel zeichnet Text auf einer nicht sichtbaren Linie, wenn die Kartenskalierung kleiner als 1:4000 ist.

unordered::line::Textausrichtung [mapscale<4000] {
 line-offset: 1m;
 text: [txt];
 text-color: black;
 text-font-name: "Arial";
 text-height: 3m;
 text-weight: 400;
 text-quality: antialiased;
}

Das folgende Beispiel zeichnet zwei Symbole und einen gefüllten Kreis an einen Punkt.

unordered::point::gpsLocation {
        render-quality: antialiased;
	complex-graphics:
		text {
			text: 57810;
			text-color: black;
			text-font-name: "Segoe MDL2 Assets";
			text-font-type: symbols;
			text-height-measurement: windows;
			text-height: 20px;
			text-weight: 400;
			text-quality: antialiased;
			text-horizontal-alignment: center;
			text-vertical-alignment: center;
			position-x: 0;
			position-y: 0;
		},
		text {
			text: 57657;
			text-color: black;
			text-font-name: "Segoe MDL2 Assets";
			text-font-type: symbols;
			text-height-measurement: windows;
			text-height: 30px;
			text-weight: 400;
			text-quality: antialiased;
			text-horizontal-alignment: center;
			text-vertical-alignment: center;
			position-x: 1;
			position-y: 15;
		},
		circle {
			fill-color: red;
			fill-pattern: solid;
			position-x: 0;
			position-y: 0;
			radius: 3px;
		};
}

Zuletzt geändert: 06.09.2018 16:56:57 (erstmals erstellt 19.03.2017)