Beispiele für Linien

Darstellung einer einfachen roten Linie.

line {
    line-width: 10m;
    line-min-width: 10;
    line-max-width: 10;
    line-color: red;
    line-join: miter;
    line-miter-limit: 10px;
    line-cap: round;
}

Strich-Punkt-Linie

line {			
        line-width: 3px;			
        line-color: RGBA(144, 30, 120, 1);
        line-join: round;
        line-cap: flat;
        line-dash-style: dash_dot;
    }

Darstellung einer gestrichelten grünen Linie.

line {
    line-width: 5px;
    line-color: green;
    line-join: round;
    line-cap: flat;
    line-dash-style: dash_dot_dot;
}

Darstellung einer blauen Linie mit benutzerdefiniertem Muster.

line {
    line-width: 5px;
    line-color: RGB(0, 0, 255);
    line-join: round;
    line-cap: flat;
    line-dash-style: custom;
    line-dash-pattern: 40px, 20px;	
}

Das folgende Beispiel kombiniert mehrere Linien CSS Blöcke, um ein Linienmuster zu erzeugen (Beispiel Schiene).

line::default {
        line-join: round;
        line-cap: flat;
        line-dash-style: solid;
    }
    line {
        id0 {
            line-width: 3.0m;
            line-min-width: 20;
            line-max-width: 40;
            line-color: black;
        }
        id1 {
            line-width: 2.5m;
            line-min-width: 15;
            line-max-width: 35;
            line-color: white;
        }
        id2 {
            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;
        }
    }

Das folgende Beispiel zeigt eine Linie mit parallel verlaufender Linie (zum Beispiel Straße mit Fahrradweg).

line::default {
    line-join: round;
    line-cap: flat;
}
line {
    id0 {
        line-width: [MeterToPixel(3.0)+4];
        line-min-width: 5;
        line-max-width: 20;
        line-color: RGB(200, 200, 200);
    }
    id1 {
        line-width: 3.0m;
        line-min-width: 3;
        line-max-width: 16;
        line-color: RGB(255, 255, 0);
    }
    id2 {
        line-width: 1.0m;
        line-min-width: 2;
        line-max-width: 6;
        line-color: RGB(150, 150, 150);
        line-offset: 3.0m;
        line-min-offset: 7;
        line-max-offset: 15;
    }
}

Im Beispiel wird eine gelbe Linie über eine braune Linie gezeichnet.

line {
    Landstraße1 [Signatur  == "1305"]{
        line-width: [MeterToPixel(6.0)+4];
        line-min-width: 2;
        line-max-width: 16;
        line-color: RGB(112, 39, 42);
    }			
    Landstraße2 [Signatur  == "1305"]{
        line-width: 7.0m;
        line-min-width: 2;
        line-max-width: 14;
        line-color: RGB(255, 255, 0);
    }
}

Im Beispiel wird eine rote Linie über eine braune Linie gezeichnet.

line {
    Landstraße1 [Signatur  == "1305"]{
        line-width: [MeterToPixel(6.0)+4];
        line-min-width: 2;
        line-max-width: 16;
        line-color: RGB(112, 39, 42);
    }			
    Landstraße2 [Signatur  == "1305"]{
        line-width: 7.0m;
        line-min-width: 2;
        line-max-width: 14;
        line-color: red;
    }
}

Das folgende Beispiel zeigt eine Linie mit einem komplexen Muster.

line {
            line-width: 3px;
            line-color: red;
            line-join: round;
            line-cap: round;
            complex-fill-pattern-bbox-width: 1000.0;
            complex-fill-pattern-bbox-height: 1000.0;
            complex-fill-pattern-width: 40.0px;
            complex-fill-pattern-min-width: 40.0;
            complex-fill-pattern-max-width: 40.0;
            complex-fill-pattern-height: 40.0px;
            complex-fill-pattern-min-height: 40.0;
            complex-fill-pattern-max-height: 40.0;
            complex-fill-pattern-rendering-quality: high;
            complex-fill-pattern-join: round;
            complex-fill-pattern:
                line {
                    line-width: 3px;
                    line-color: red;
                    line-cap: round;
                    x1: 500m;
                    y1: 0m;
                    x2: 500m;
                    y2: 1000m;
                },
                arc {
                    line-width: 3px;
                    line-color: green;
                    position-x: 500.0m;
                    position-y: 500.0m;
                    radius: 400.0m;
                    start-angle: 0;
                    sweep-angle: 360;
                };
        }

Das folgende Beispiel zeigt eine einfache Linie mit Text. Der Text besteht aus dem ersten Buchstaben des Wertes der Spalte "LABEL" kombiniert mit einer Zahl aus der Spalte "PARAM".

line {
            line-width: 2px;
            line-color: red;
            line-join: round;
            line-cap: round;
            text: ["Long Text@" // FirstChar(Label) // "_" // (Param)];
            text-line-break-character: @;
            text-color: red;
            text-background-color: green;
            text-halo-color: blue;
            text-halo-width: 4px;
            draw-text-halo-first: true;
            text-font-name: "Arial";
            text-height: 20px;
            text-weight: 400;
            text-style: italic;
            text-horizontal-content-alignment: right;
            text-line-spacing: 3px;
            text-letter-spacing: 3px;
            text-horizontal-padding: 5px;
            text-vertical-padding: 5px;
            text-start-location: center;
            text-orientation: parallel;
            text-horizontal-alignment: center;
            text-vertical-alignment: bottom;
            text-vertical-offset: 10px;
        }

Das folgende Beispiel zeigt eine einfache Linie, die am Linienanfang einen Kreis und am Linienende einen Pfeil hat.

line {
            line-width: 2px;
            line-color: red;
            line-join: round;
            line-cap: round;
            line-start-point-geometry-type: circle;
            circle-radius: 20px;
            line-end-point-geometry-type: arrow;
            arrow-angle: 30;
            arrow-length: 30px;
        }

Das folgende Beispiel zeigt eine einfache Linie mit einer Puffer-Geometrie (Polygon).

line {
            line-width: 5px;
            line-color: red;
            line-join: round;
            line-cap: round;
            buffer-distance: 30px;	
            buffer-arc-segments: 10;
            buffer-polygon:
            {
                fill-pattern: hatch_style_diagonal_cross;
                distance-between-pattern-lines: 20px;
                pattern-lines-width: 2px;
                fill-color: RGB(0, 255, 0);
                background-color: RGB(200, 200, 200);
                border-line:
                {
                    line-width: 3px;
                    line-color: blue;
                    line-join: round;
                };
            };
        }

Das folgende Beispiel zeigt eine Linie nur mit einer Puffer-Geometrie (Polygon).

line {
    buffer-distance: 30px;
    buffer-arc-segments: 10;
    buffer-polygon:
    {
        fill-pattern: hatch_style_diagonal_cross;
        distance-between-pattern-lines: 20px;
        pattern-lines-width: 2px;
        fill-color: RGB(0, 255, 0);
        background-color: RGB(200, 200, 200);
        border-line:
        {
            line-width: 3px;
            line-color: blue;
            line-join: round;
        };
    };
}

Das folgende Beispiel zeigt eine einfache Linie nur mit einem Punkt als Label.

line {
    line-width: 5px;
    line-color: red;
    line-join: round;
    line-cap: round;
    point-placement: centroid;
    point:	{
        complex-graphics:
            polygon {
                line-width: 2px;
                line-color: blue;
                line-join: round;
                fill-pattern: solid;
                fill-color: yellow;
                points: (-60px, -40px), (-60px, 40px), (60px, 40px), (60px, -40px);
            },
            text {
                text: "Text";
                text-color: green;
                text-font-name: "Arial";
                text-font-type: standard;
                text-height: 40px;
                text-weight: 400;
            };
    };
}

Das folgende Beispiel zeigt eine einfache Linie mit Punkten, die auf der Linie in einem festen Interval verteilt sind.

line {
    line-width: 5px;
    line-color: red;
    line-join: round;
    line-cap: round;
    point-placement: interval;
    point-interval: 50.0px;
    point:
    {
        complex-graphics:
        circle {
            line-width: 4px;
            line-color: blue;
            fill-pattern: solid;
            fill-color: yellow;
            radius: 10.0px;
        };
    };
}

Das folgende Beispiel zeigt eine Linie nur mit Punkten, die auf der Linie in einem festen Interval verteilt sind.

line {
    point-placement: interval;
    point-interval: 50.0px;	
    point:{
        complex-graphics:
        circle {
            line-width: 4px;
            line-color: blue;
            fill-pattern: solid;
            fill-color: yellow;
            radius: 10.0px;
        };
    };
}

Das folgende Beispiel zeigt eine Linie mit einer SVG Pfad (Path) Geometrie.

line {
    line-width: 0px;
    complex-fill-pattern-bbox-width: 1000.0;
    complex-fill-pattern-bbox-height: 800.0;
    complex-fill-pattern-width: 40.0px;
    complex-fill-pattern-height: 32.0px;
    complex-fill-pattern:
    path {
        path-top: -4;
        path-left: -5;
        path-width: 10;
        path-height: 8;
        flip-y: false;
        target-position-x: 500.0m;			
        target-position-y: 400.0m;			
        target-width: 1000.0m;		
        target-height: 800.0m;			
        line-width: 1.0px;
        line-color: black;
        line-join: round;
        line-cap: round;
        fill-pattern: solid;
        fill-color: RGB(0, 128, 0);
        path-commands: M -4 -1 Q -2 -3 0 -1 T 4 -1 L 4 1 Q 2 3 0 1 T -4 1 Z;
    };
}

Das folgende Beispiel zeigt eine Linie mit sich wiederholender Beschriftung.

line {
    line-width: 2px;
    line-color: red;
    line-join: round;
    line-cap: round;
    text: "Label";
    text-color: red;
    text-background-color: green;
    text-halo-color: blue;
    text-halo-width: 4px;
    draw-text-halo-first: true;
    text-font-name: "Arial";
    text-height: 20px;
    text-weight: 400;
    text-style: italic;
    text-line-spacing: 3px;
    text-letter-spacing: 3px;	
    text-horizontal-padding: 5px;	
    text-vertical-padding: 5px;	
    text-orientation: horizontal;
    text-horizontal-alignment: center;
    text-vertical-alignment: center;
    text-horizontal-offset: 100px;
    text-vertical-offset: 0px;
    text-repeat-distance: 100px;
}

Das folgende Beispiel zeigt eine Linie mit zwei Punkten unterschiedlicher Größe. Hier werden zwei Punktlinien mit unterschiedlichem Intervall gezeichnet.

line {
    point-placement: interval;
    point-interval: 20m;		
    point:	{
        render-quality: antialiased;
        complex-graphics:
        circle::01 {
            fill-pattern: solid;					
            radius: 4m;
            fill-color: RGBA(0, 146, 64, 1);
        };				
    };
}
line {
    point-placement: interval;
    point-interval: 40m;		
    point: {
        render-quality: antialiased;
        complex-graphics:
        circle::02 {					
            fill-pattern: solid;				
            radius: 8m;
            fill-color: RGBA(0, 146, 64, 1);
        };
    };
}

Das folgende Beispiel zeigt eine Linie als Bachlauf mit SVG Path.

line {    
    line-width: 0px;
    complex-fill-pattern-bbox-width: 40.0;
    complex-fill-pattern-bbox-height: 40.0;
    complex-fill-pattern-width: 40m;	
    complex-fill-pattern-height: 40m;
    complex-fill-pattern:
        path {		
            path-width: 40;
            path-height: 40;		
            horizontal-alignment: center;
            vertical-alignment: center;
            target-position-x: 20m;			
            target-position-y: 20m;			
            target-width: 40.0m;			
            target-height: 40.0m;			
            line-width: 2px;
            line-color: blue;
            line-join: round;
            line-cap: round;			
            path-commands: M 24 20 H 36 M 4 20 A 4.600000 4.600000 0 0 0 12 20 M 12 20 A 4.550000 4.550000 0 0 1 20 20;
            //Zweiter Pfad für größere Kreisbögen
            //path-commands:M 24 20 H 36 M 4 20 A 4.025000 4.025000 0 0 0 12 20 M 12 20 A 4.025000 4.025000 0 0 1 20 20;
        };
}

Das folgende Beispiel zeigt eine Linie als Wuchsgebietsgrenze. Erstellt für einen Maßstab von 1:1000.

line {    
            line-width: 0px;
            complex-fill-pattern-bbox-width: 40.0;
            complex-fill-pattern-bbox-height: 40.0;
            complex-fill-pattern-width: 40m;	
            complex-fill-pattern-height: 40m;
            complex-fill-pattern:
            //Rechteck
                path {		
                    path-width: 40;
                    path-height: 40;			
                    horizontal-alignment: center;
                    vertical-alignment: center;
                    target-position-x: 20m;			
                    target-position-y: 20m;			
                    target-width: 40.0m;			
                    target-height: 40.0m;
                    fill-color: red;
                    fill-pattern:solid;	
                    path-commands: M 12 24 H 28 V 16 H 12 V 24 Z;		
                },
                //Linie links
                path {		
                    path-width: 40;
                    path-height: 40;			
                    horizontal-alignment: center;
                    vertical-alignment: center;
                    target-position-x: 23m;			
                    target-position-y: 20m;			
                    target-width: 40.0m;			
                    target-height: 40.0m;
                    line-color: red;
                    line-width: 1m;
                    path-commands: M 26 25 V 15;      
                },
                //Linie rechts
                path {		
                    path-width: 40;
                    path-height: 40;			
                    horizontal-alignment: center;
                    vertical-alignment: center;
                    target-position-x: 23m;			
                    target-position-y: 20m;			
                    target-width: 40.0m;			
                    target-height: 40.0m;
                    line-color: red;
                    line-width: 1m;
                    path-commands: M 8 25 V 15;
                };
        }

Das folgende Beispiel zeigt eine Linie als Wuchsgebietsgrenze. Erstellt für einen Maßstab von 1:1000.

line {    
            line-width: 0px;
            complex-fill-pattern-bbox-width: 40.0;
            complex-fill-pattern-bbox-height: 40.0;
            complex-fill-pattern-width: 40m;	
            complex-fill-pattern-height: 40m;
            complex-fill-pattern:
                path::linieoben {		
                    path-width: 40;
                    path-height: 40;			
                    horizontal-alignment: center;
                    vertical-alignment: center;
                    target-position-x: 20m;			
                    target-position-y: 20m;			
                    target-width: 40.0m;			
                    target-height: 40.0m;								
                    line-color: red;
                    line-width: 2m;
                    path-commands: M 11 18 H 29;		
                },
                path::linieunten {		
                    path-width: 40;
                    path-height: 40;			
                    horizontal-alignment: center;
                    vertical-alignment: center;
                    target-position-x: 20m;			
                    target-position-y: 20m;			
                    target-width: 40.0m;			
                    target-height: 40.0m;								
                    line-color: red;
                    line-width: 2m;
                    path-commands: M 11 22 H 29;		
                },
                path::linielinks {		
                    path-width: 40;
                    path-height: 40;			
                    horizontal-alignment: center;
                    vertical-alignment: center;
                    target-position-x: 23m;			
                    target-position-y: 20m;			
                    target-width: 40.0m;			
                    target-height: 40.0m;
                line-color: red;
                line-width: 1m;
                    path-commands: M 26 25 V 15;      
                },
                path::linierechts {		
                    path-width: 40;
                    path-height: 40;			
                    horizontal-alignment: center;
                    vertical-alignment: center;
                    target-position-x: 23m;			
                    target-position-y: 20m;			
                    target-width: 40.0m;			
                    target-height: 40.0m;
                    line-color: red;
                    line-width: 1m;
                    path-commands: M 8 25 V 15;
                };
        }

Pfeile am Linienanfang und -ende.

line {
    line-width: 2px; 
    line-color: red; 
    line-join: round; 
    line-cap: round; 
    line-start-point-complex-graphics:
    path {
        path-top: 0; 
        path-left: 0; 
        path-width: 14; 
        path-height: 10; 
        target-width: 14m; 
        target-height: 10m; 
        target-max-width: 28; 
        target-max-height: 20; 
        horizontal-alignment: left;
        vertical-alignment: center; 
        fill-pattern: solid; 
        fill-color: red; 
        path-commands: M 0 5 L 14 10 14 0 Z;
    };
    line-end-point-complex-graphics:
    path {
        path-top: 0;
        path-left: 0;
        path-width: 14;
        path-height: 10;
        target-width: 14m;
        target-height: 10m;
        target-max-width: 28;
        target-max-height: 20;
        horizontal-alignment: right;
        vertical-alignment: center;
        fill-pattern: solid;
        fill-color: green;
        path-commands: M 14 5 L 0 10 0 0 Z;
    };
}

Das folgende Beispiel zeigt eine Linie mit individueller Start- und Endpunkt Geometrie.

line {
    line-width: 2px;
    line-color: red;
    line-join: round;
    line-cap: round;
    line-start-point-complex-graphics:
        path {
            path-top: 0;
            path-left: 0;
            path-width: 2;
            path-height: 3;
            horizontal-alignment: right;
            vertical-alignment: top;
            target-width: 10m;
            target-height: 15m;
            fill-pattern: solid;
            fill-color: red;
            path-commands: M 0 0 H 2 V 3 Z;
        };
    line-end-point-complex-graphics:
        path {
            path-top: 0;
            path-left: 0;
            path-width: 2;
            path-height: 3;
            horizontal-alignment: left;
            vertical-alignment: top;
            target-width: 10m;
            target-height: 15m;
            fill-pattern: solid;
            fill-color: red;
            path-commands: M 0 3 V 0 H 2 Z;
        };
}

Gemeinde-, Kreisstraße mit Beschriftung

ordered {    
    line {
        [mapscale6 < 40000] {
            GemeindeKreisstraße1 [Signatur == "1306" or Signatur=="1307" or Signatur == "9997" or Signatur == "9999"] {
                line-width:[MeterToPixel(6.0)+4];
                line-min-width: 6;
                line-max-width: 14;
                line-color: RGB(200, 200, 200);
                map-legend-label: "Gemeinde-, Kreisstraße";
                map-legend-scale-factor: 0.5;
            }				
            GemeindeKreisstraße2 [Signatur == "1306" or Signatur=="1307" or Signatur == "9997" or Signatur == "9999"] {
                line-width: 5.0m;
                line-min-width: 4;
                line-max-width: 10;
                line-color: RGB(255, 255, 255);				
            }						
            GemeindeKreisstraße3 [(Signatur == "1306" or Signatur=="1307" or Signatur == "9997" or Signatur == "9999") and mapscale6 < 7000] {
                line-offset: -5.5px;
                text: [IsNull(Name)?"":Name];
                text-color: black;
                text-color-opacity: 1;
                text-font-name: "Arial";
                text-font-type: standard;
                text-start-location: center;				
                text-orientation: alongline;
                text-repeat-distance: 150px;
                text-height: 8px;
                min-text-height: 5;
                max-text-height: 8;
                text-horizontal-alignment: center;
                text-vertical-alignment: center;					
                }
            }
    }
}

Signatur für Düker.

ordered {   
    line {
        line-width:2m;
        line-color: black;
        line-cap: flat;
    }
    line {
        line-width:1m;
        line-color: white;
        line-cap: flat;
    }		
    line {			
        point-placement: interval;
        point-interval: 7m;		
        point:	{
            complex-graphics:
            circle::01 {
                fill-pattern: solid;					
                radius: 1m;
                fill-color: RGB(0,147,221);
            };				
        };
    }
}

Signatur mit Quadraten.

line {    
            line-width: 0px;
            complex-fill-pattern-bbox-width: 10.0;
            complex-fill-pattern-bbox-height: 10.0;
            complex-fill-pattern-width: 10m;	
            complex-fill-pattern-height: 10m;
            complex-fill-pattern:   
                path {		
                    path-width: 10;
                    path-height: 10;			
                    horizontal-alignment: center;
                    vertical-alignment: center;
                    target-position-x: 5m;			
                    target-position-y: 5m;			
                    target-width: 10.0m;			
                    target-height: 10.0m;
                    fill-color: red;
                    fill-pattern:solid;	
                    path-commands: M 3 6 H 6 V 3 H 3 V 6;		
                };
        }

Signatur mit 2 Linien.

line {
            line-width: 2px;
            line-color: ARGB(1,02,153,0);
            line-join: round;
            line-start-cap: flat;
            line-end-cap: flat;
            line-cap: flat;
            line-offset: 5px;
        }
        line {
            line-width: 12px;
            line-color: ARGB(0.2,02,153,0);
            line-cap: flat;
        }

Signatur mit einer gezackten Linien und zusätzlich roten Kreuzen (Bergbausignatur).

line {
			line-width: 10m;
			line-color: black;
			line-min-width: 2;
			line-max-width: 2;
			line-join: round;
			line-cap: round;
			complex-fill-pattern-bbox-width: 10;
			complex-fill-pattern-bbox-height: 10;
			complex-fill-pattern-width: 10m;
			complex-fill-pattern-min-width: 15;
			complex-fill-pattern-max-width: 20;
			complex-fill-pattern-height: 10m;
			complex-fill-pattern-min-height: 15;
			complex-fill-pattern-max-height: 20;
			complex-fill-pattern:
				path {
					path-width: 10;
					path-height: 10;
					target-position-x: 5m;
					target-position-y: 5m;
					target-width: 10m;
					target-height: 10m;
					path-commands: M0 4 L5 10 10 4 H 0;
					fill-color: black;
					fill-pattern: solid;
				};
		}
	

	line {
			complex-fill-pattern-bbox-width: 400;
			complex-fill-pattern-bbox-height: 100;
			complex-fill-pattern-width: 200m;
			complex-fill-pattern-min-width: 60;
			complex-fill-pattern-max-width: 50;
			complex-fill-pattern-height: 50m;
			complex-fill-pattern-min-height: 7.5;
			complex-fill-pattern-max-height: 12.5;
			complex-fill-pattern:
				line {
					line-width: 1px;
					line-color: red;
					line-cap: round;
					x1: 0m;
					y1: 0m;
					x2: 100m;
					y2: 100m;
				},
				line {
					line-width: 1px;
					line-color: red;
					line-cap: round;
					x1: 0m;
					y1: 100m;
					x2: 100m;
					y2: 0m;
				};
		}

Punkt und Strichsignatur im Wechsel.

line {
                point-placement: interval;
                point-interval: 45m;
                point-interval-start: 32m;
                point:
                {
                    complex-graphics:
                        circle {
                            radius: 5m;
                            fill-color: RGB(86,171,255);
                            fill-pattern: solid;
                        };
                };
            }
            line {
                line-width: 5m;
                line-color: green;
                line-dash-style: custom;
                line-dash-pattern: 20m, 25m;
            }

Zuletzt geändert: 20.09.2024 07:22:06 (erstmals erstellt 27.02.2020)

Beispiele für Linien

Datenschutz

Kontakt