CSS Beispiele für Linien

Beispiel 0

Das folgende Beispiel zeigt eine einfache Linie.

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 10px;
	line-min-width: 10;
	line-max-width: 10;
	line-color: red;
	line-color-opacity: 1.0;
	line-join: miter;
	line-miter-limit: 10px;
	line-min-miter-limit: 10;
	line-max-miter-limit: 10;
	line-cap: round;
}

Beispiel 1

Das folgende Beispiel zeigt eine Linie mit vordefiniertem Muster.

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 10px;
	line-color: RGB(0, 255, 0);
	line-join: round;
	line-cap: flat;
	line-dash-style: dash_dot_dot;
}

Beispiel 2

Das folgende Beispiel zeigt eine Linie mit benutzerdefiniertem Muster.

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 10px;
	line-color: RGB(0, 0, 255);
	line-join: round;
	line-cap: flat;
	line-dash-style: custom;
	line-dash-pattern: 40px, 10px;
	line-min-dash-pattern: 40, 10;
	line-max-dash-pattern: 40, 10;
}

Beispiel 3

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

Beispiel Linie

line::default {
	render-quality: antialiased;
	line-color-opacity: 1.0;
	line-join: round;
	line-cap: flat;
	line-dash-style: solid;
}

unordered {
	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;
		}
	}
}

Beispie 4

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

Beispiel Linie

line::default {
	render-quality: antialiased;
	line-color-opacity: 1.0;
	line-join: round;
	line-cap: flat;
	line-dash-style: solid;
}

unordered {
	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;
		}
	}
}

Beispiel 5

Das folgende Beispiel zeigt zwei sich kreuzende Linien, die "ordered" gezeichnet werden für eine korrekte Darstellung (zum Beispiel eine Nebenstraße kreuzt eine Hauptstraße). Achtung in diesem Beispiel wird die Spalte "GEOTYPE" der Datenquelle verwendet!

Beispiel Linie

line::default {
	render-quality: antialiased;
	line-color-opacity: 1.0;
	line-join: round;
	line-cap: flat;
	line-dash-style: solid;
}

ordered {
	line {
		id0 [GEOTYPE=="Hauptstraße"] {
			line-width: [MeterToPixel(3.0)+4];
			line-min-width: 5;
			line-max-width: 20;
			line-color: RGB(200, 200, 200);
		}

		id1 [GEOTYPE=="Nebenstraße"] {
			line-width: 2.0m;
			line-min-width: 2;
			line-max-width: 10;
			line-color: RGB(255, 255, 200);
		}

		id2 [GEOTYPE=="Hauptstraße"] {
			line-width: 3.0m;
			line-min-width: 3;
			line-max-width: 16;
			line-color: RGB(255, 255, 0);
		}
	}
}

Beispiel 6

Das folgende Beispiel zeigt eine Linie mit einem komplexen Muster.

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	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;
		};
}

Beispiel 7

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".

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 2px;
	line-color: red;
	line-join: round;
	line-cap: round;
	text: ["Long Text@" // FirstChar(LABEL) // "_" // ToString(PARAM)];
	text-line-break-character: @;
	text-color: red;
	text-color-opacity: 1;
	text-background-color: green;
	text-background-color-opacity: 1;
	text-halo-color: blue;
	text-halo-color-opacity: 1;
	text-halo-width: 4px;
	min-text-halo-width: 0;
	max-text-halo-width: 0;
	draw-text-halo-first: true;
	text-font-name: "Arial";
	text-font-type: standard;
	text-height: 20px;
	min-text-height: 0;
	max-text-height: 0;
	text-height-measurement: cardo;
	text-weight: 400;
	text-style: italic;
	text-quality: antialiased;
	text-horizontal-content-alignment: right;
	text-line-spacing: 3px;
	min-text-line-spacing: 0;
	max-text-line-spacing: 0;
	text-letter-spacing: 3px;
	min-text-letter-spacing: 0;
	max-text-letter-spacing: 0;
	text-horizontal-padding: 5px;
	min-text-horizontal-padding: 0;
	max-text-horizontal-padding: 0;
	text-vertical-padding: 5px;
	min-text-vertical-padding: 0;
	max-text-vertical-padding: 0;
	text-start-location: center;
	text-orientation: parallel;
	text-horizontal-alignment: center;
	text-vertical-alignment: bottom;
	text-horizontal-offset: 0px;
	text-min-horizontal-offset: 0;
	text-max-horizontal-offset: 0;
	text-vertical-offset: 10px;
	text-min-vertical-offset: 0;
	text-max-vertical-offset: 0;
	text-repeat-distance: 0px;
	text-min-repeat-distance: 0;
	text-max-repeat-distance: 0;
}

Beispiel 8

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

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 2px;
	line-color: red;
	line-join: round;
	line-cap: round;
	line-start-point-geometry-type: circle;
	circle-radius: 20px;
	circle-min-radius: 0;
	circle-max-radius: 0;
	line-end-point-geometry-type: arrow;
	arrow-angle: 30;
	arrow-length: 30px;
	arrow-min-length: 0;
	arrow-max-length: 0;
}

Beispiel 9

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

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 5px;
	line-color: red;
	line-join: round;
	line-cap: round;
	buffer-distance: 30px;
	min-buffer-distance: 0;
	max-buffer-distance: 0;
	buffer-arc-segments: 10;
	buffer-polygon:
	{
		render-quality: antialiased;
		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:
		{
			render-quality: antialiased;
			line-width: 3px;
			line-color: blue;
			line-join: round;
		};
	};
}

Beispiel 10

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

Beispiel Linie

unordered::line::id0 {
	buffer-distance: 30px;
	min-buffer-distance: 0;
	max-buffer-distance: 0;
	buffer-arc-segments: 10;
	buffer-polygon:
	{
		render-quality: antialiased;
		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:
		{
			render-quality: antialiased;
			line-width: 3px;
			line-color: blue;
			line-join: round;
		};
	};
}

Beispiel 11

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

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 5px;
	line-color: red;
	line-join: round;
	line-cap: round;
	point-placement: centroid;
	point:
	{
		render-quality: antialiased;
		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-height-measurement: cardo;
				text-weight: 400;
				text-quality: antialiased;
				text-horizontal-alignment: center;
				text-vertical-alignment: center;
			};
	};
}

Beispiel 12

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

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 5px;
	line-color: red;
	line-join: round;
	line-cap: round;
	point-placement: interval;
	point-interval: 50.0px;
	min-point-interval: 0.0;
	max-point-interval: 0.0;
	point:
	{
		render-quality: antialiased;
		complex-graphics:
			circle {
				line-width: 4px;
				line-color: blue;
				fill-pattern: solid;
				fill-color: yellow;
				radius: 10.0px;
			};
	};
}

Beispiel 13

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

Beispiel Linie

unordered::line::id0 {
	point-placement: interval;
	point-interval: 50.0px;
	min-point-interval: 0.0;
	max-point-interval: 0.0;
	point:
	{
		render-quality: antialiased;
		complex-graphics:
			circle {
				line-width: 4px;
				line-color: blue;
				fill-pattern: solid;
				fill-color: yellow;
				radius: 10.0px;
			};
	};
}

Beispiel 14

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

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	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-min-width: 0.0;
	complex-fill-pattern-max-width: 0.0;
	complex-fill-pattern-height: 32.0px;
	complex-fill-pattern-min-height: 0.0;
	complex-fill-pattern-max-height: 0.0;
	complex-fill-pattern:
		path {
			path-top: -4;
			path-left: -5;
			path-width: 10;
			path-height: 8;
			flip-y: false;
			horizontal-alignment: center;
			vertical-alignment: center;
			target-position-x: 500.0m;
			target-min-position-x: 0.0;
			target-max-position-x: 0.0;
			target-position-y: 400.0m;
			target-min-position-y: 0.0;
			target-max-position-y: 0.0;
			target-width: 1000.0m;
			target-min-width: 0.0;
			target-max-width: 0.0;
			target-height: 800.0m;
			target-min-height: 0.0;
			target-max-height: 0.0;
			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;
		};
}

Beispiel 15

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

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	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;
		};
}

Beispiel 16

Das folgende Beispiel zeigt eine Linie mit sich wiederholender Beschriftung.

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 2px;
	line-color: red;
	line-color-opacity: 1;
	line-join: round;
	line-cap: round;
	text: "Label";
	text-line-break-character: @;
	text-color: red;
	text-color-opacity: 1;
	text-background-color: green;
	text-background-color-opacity: 1;
	text-halo-color: blue;
	text-halo-color-opacity: 1;
	text-halo-width: 4px;
	min-text-halo-width: 0;
	max-text-halo-width: 0;
	draw-text-halo-first: true;
	text-font-name: "Arial";
	text-font-type: standard;
	text-height: 20px;
	min-text-height: 0;
	max-text-height: 0;
	text-height-measurement: cardo;
	text-weight: 400;
	text-style: italic;
	text-quality: antialiased;
	text-horizontal-content-alignment: left;
	text-line-spacing: 3px;
	min-text-line-spacing: 0;
	max-text-line-spacing: 0;
	text-letter-spacing: 3px;
	min-text-letter-spacing: 0;
	max-text-letter-spacing: 0;
	text-horizontal-padding: 5px;
	min-text-horizontal-padding: 0;
	max-text-horizontal-padding: 0;
	text-vertical-padding: 5px;
	min-text-vertical-padding: 0;
	max-text-vertical-padding: 0;
	text-start-location: start;
	text-orientation: horizontal;
	text-horizontal-alignment: center;
	text-vertical-alignment: center;
	text-horizontal-offset: 100px;
	text-min-horizontal-offset: 0;
	text-max-horizontal-offset: 0;
	text-vertical-offset: 0px;
	text-min-vertical-offset: 0;
	text-max-vertical-offset: 0;
	text-repeat-distance: 200px;
	text-min-repeat-distance: 0;
	text-max-repeat-distance: 0;
}

Beispiel 17

Das folgende Beispiel zeigt eine Linie mit sich wiederholender Beschriftung.

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 2px;
	line-color: red;
	line-color-opacity: 1;
	line-join: round;
	line-cap: round;
	text: "Label";
	text-line-break-character: @;
	text-color: red;
	text-color-opacity: 1;
	text-background-color: green;
	text-background-color-opacity: 1;
	text-halo-color: blue;
	text-halo-color-opacity: 1;
	text-halo-width: 4px;
	min-text-halo-width: 0;
	max-text-halo-width: 0;
	draw-text-halo-first: true;
	text-font-name: "Arial";
	text-font-type: standard;
	text-height: 20px;
	min-text-height: 0;
	max-text-height: 0;
	text-height-measurement: cardo;
	text-weight: 400;
	text-style: italic;
	text-quality: antialiased;
	text-horizontal-content-alignment: left;
	text-line-spacing: 3px;
	min-text-line-spacing: 0;
	max-text-line-spacing: 0;
	text-letter-spacing: 3px;
	min-text-letter-spacing: 0;
	max-text-letter-spacing: 0;
	text-horizontal-padding: 5px;
	min-text-horizontal-padding: 0;
	max-text-horizontal-padding: 0;
	text-vertical-padding: 5px;
	min-text-vertical-padding: 0;
	max-text-vertical-padding: 0;
	text-start-location: center;
	text-orientation: parallel;
	text-horizontal-alignment: center;
	text-vertical-alignment: bottom;
	text-horizontal-offset: 0px;
	text-min-horizontal-offset: 0;
	text-max-horizontal-offset: 0;
	text-vertical-offset: 5px;
	text-min-vertical-offset: 0;
	text-max-vertical-offset: 0;
	text-repeat-distance: 200px;
	text-min-repeat-distance: 0;
	text-max-repeat-distance: 0;
}

Beispiel 18

Das folgende Beispiel zeigt eine Linie mit sich wiederholender Beschriftung.

Beispiel Linie

unordered::line::id0 {
	render-quality: antialiased;
	line-width: 2px;
	line-color: red;
	line-color-opacity: 1;
	line-join: round;
	line-cap: round;
	text: "Label";
	text-line-break-character: @;
	text-color: red;
	text-color-opacity: 1;
	text-halo-color: blue;
	text-halo-color-opacity: 1;
	text-halo-width: 4px;
	min-text-halo-width: 0;
	max-text-halo-width: 0;
	draw-text-halo-first: true;
	text-font-name: "Arial";
	text-font-type: standard;
	text-height: 20px;
	min-text-height: 0;
	max-text-height: 0;
	text-height-measurement: cardo;
	text-weight: 400;
	text-style: italic;
	text-quality: antialiased;
	text-start-location: end;
	text-orientation: alongline;
	text-horizontal-alignment: center;
	text-horizontal-offset: 50px;
	text-min-horizontal-offset: 0;
	text-max-horizontal-offset: 0;
	text-repeat-distance: 180px;
	text-min-repeat-distance: 0;
	text-max-repeat-distance: 0;
	text-letter-spacing: 3px;
	min-text-letter-spacing: 0;
	max-text-letter-spacing: 0;
}

Beispiel 19

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

Beispiel Linie

unordered::line::id1 [SIGNATUR === "43300_43301"] {
	line{
		point-placement: interval;
		point-interval: 20m;		
		point:	{
			render-quality: antialiased;
			complex-graphics:
			circle::01 {
				fill-pattern: solid;					
				radius: 2m;
				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: 4m;
				fill-color: RGBA(0, 146, 64, 1);
			};
		};
	}		
}

Beispiel 20

Das folgende Beispiel zeigt das Gewässernetz und dessen Beschriftung. Hier wird in drei unterschiedliche Maßstabsstufen unterschieden, in welchen jeweils andere Inhalte an das Gewässer geschrieben werden. Hierbei werden mehrere Spalten abgefragt. W_WDM (Widmung) enthält drei Werte 1501, 1502 oder 1503, W_GN1 enthält einen Gewässernamen und W_GN2 einen weiteren Namen. Beachten Sie, dass diese drei Spalten auch in der Legendendefinition vorhanden sein müssen.

Maßstabsbereich >= 30000

Hier wird geprüft, wenn die Widmung = 1501 ist und W_GN1 nicht leer ist, wird der Name aus W_GN1 an das Gewässer geschrieben.

Beispiel Linie

Maßstabsbereich >= 8000 und < 30000

Hier wird geprüft, wenn W_GN2 leer ist, wird W_GN1 an das Gewässer geschrieben, sonst der Inhalt aus W_GN1 und W_GN2.

Beispiel Linie Beispiel Linie

Maßstabsbereich < 8000

Hier wird nur der Wert aus W_GN1 an das Gewässer geschrieben.

Beispiel Linie

line::default {
	render-quality: antialiased;
	line-color-opacity: 1.0;
	line-join: round;
	line-cap: round;			
	text-color-opacity: 1;
	text-font-name: "Arial";
	text-font-type: standard;
	text-style: italic;
	text-orientation: alongline;	
	text-horizontal-alignment: center;
	text-vertical-alignment: top;					
	line-width:3m;
	line-min-width: 1.5;
	line-max-width: 8;
	line-color: blue;		
}
ordered {
	line {
	}		
	line [mapscale < 80000] {		
		single-choice {			
		    [mapscale >= 30000] {
			text: [(W_WDM === "1501") ? W_GN1 : "" ];					
			text-color:blue;
			text-height:8px;
			min-text-height: 10;
			max-text-height: 15;	
			text-start-location: center;	
			text-repeat-distance: 150px;			
			}				
			[mapscale >= 8000 and mapscale < 30000] {							
			text: [ IsNull(W_GN2) ? W_GN1 : W_GN1 // "  " // W_GN2];
			text-color: red;
			text-height: 20m;
			min-text-height: 10;
			max-text-height: 15;
			text-start-location: center;	
			text-repeat-distance: 120px;	
			}				
			[mapscale < 8000] {			
			text: [W_GN1];
			text-color:green;
			text-height: 20m;
			min-text-height: 10;
			max-text-height: 15;
			text-start-location: center;	
			text-repeat-distance: 120px;	
			}	
		}
	}
}

map_legend {
    Fließgewässer {
		label: "Fließgewässer";
		scale-factor: 0.5;
		geometry-type: line;	
		data: W_WDM = "1502", length=200, W_GN1="Name1", W_GN2="Name2";
	}
	
}

Beispiel 21

Strich-Punkt-Linie

Beispiel Linie

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

Zuletzt geändert: 26.11.2018 07:54:10 (erstmals erstellt 02.06.2017)