Themen-Übersicht

Beispiele für Punkte

point {
    complex-graphics:
    circle {			
        fill-pattern: solid;
        fill-color: red;
        radius: 15m;
        min-radius: 8;
        max-radius: 15;
        };
}

Dargestellt wird ein roter Punkt.

point {
    complex-graphics:
    circle {						
        radius: 10m;
        min-radius: 8;
        max-radius: 12;
        fill-color: black;
        fill-pattern: solid;
        },
        text {		
        /*Spalte, wo die Beschriftung her kommt*/
        text: [name];
        text-color: black;
        text-font-name: "arial";
        text-height: 10px;			
        /*Verschiebung des Textes in px oder m möglich*/
        position-x:0px;
        position-y:20px;			
    };
}

Zeigt einen einfachen schwarzen Punkt mit Beschriftung. Diese wird über dem Punkt angezeigt. Die Beschriftung kann aus einer Spalte kommen. Die Beschriftung wird mit position-y possitioniert.

point {
    complex-graphics:
    circle {
        line-width: 2px;
        line-color: black;			
        radius: 50m;
        min-radius: 8;
        max-radius: 15;
        fill-color: white;
        fill-pattern: solid;
    },
    text {		
        /*Spalte, wo die Nummer her kommt*/
        text: [nummer];    
        text-font-name: "arial";
        text-height: 10px;	
    };	
}

Zeigt einen weißen Punkt mit schwarzem Umring. Die Nummer des Punktes wird in den Punkt geschrieben.

point {
	complex-graphics:
		circle::01 {				
			fill-color: RGBA(255, 0, 0, 1);
			fill-pattern: solid;
			radius: 10m;
		}, 
		circle::02 {
			fill-color: RGBA(128, 255, 0, 1);
			fill-pattern: solid;
			radius: 8m;
		},
		circle {				
			fill-color: RGBA(255, 0, 0, 1);
			fill-pattern: solid;
			radius: 4m;
		},	
		circle {
			fill-color: RGBA(128, 255, 0, 1);
			fill-pattern: solid;
			radius: 2m;
		};
}

Im Beispiel werden 4 Kreise unterschiedlicher Größe gezeichnet.

point {
	complex-graphics:
		line {
			line-width: 5px;
			line-color: red;
			line-cap: round;
			x1: -20px;
			y1: 0px;
			x2: 20px;
			y2: 0;
		},
		line {
			line-width: 5px;
			line-color: red;
			line-cap: round;
			x1: 0px;
			y1: -20px;
			x2: 0px;
			y2: 20px;
		};
}

Darstellung eines Punktes als Kreuz.

point { 			
    complex-graphics:
        text {
            text: "F";
            text-color: RGBA(0, 0, 0, 1);
            text-font-name: "ATKIS_1";
            text-height: 15m;
        },
        text {
            text: "G";
            text-color: RGBA(255, 255, 255, 1);
            text-font-name: "ATKIS_1";
            text-height: 15m;
        },
        text {
            text: "H";
            text-color: RGBA(0, 0, 0, 1);
            text-font-name: "ATKIS_1";
            text-height: 15m;					
        };    
}

Das folgende Beispiel zeichnet das Symbol für Kraftwerke aus der Schriftart Atkis. Dieses Symbol wird aus 3 Zeichen der Schriftart zusammengesetzt.

point{
	buffer-distance: 50m;	
	buffer-polygon:
	{
		fill-pattern: hatch_style_diagonal_cross;
		distance-between-pattern-lines: 15px;
		pattern-lines-width: 2px;
		fill-color: RGB(0, 255, 0);
		background-color: RGB(200, 200, 200);
		border-line:
		{
			line-width: 3px;
			line-color: blue;
		};
	};
}

Dargestellt wird ein Punkt mit Puffergeometrie (Polygon).

point{
	buffer-distance: 50m;
    buffer-arc-segments: 2;	
	buffer-polygon:
	{
		fill-pattern: hatch_style_diagonal_cross;
		distance-between-pattern-lines: 15px;
		pattern-lines-width: 2px;
		fill-color: RGB(0, 255, 0);
		background-color: RGB(200, 200, 200);
		border-line:
		{
			line-width: 3px;
			line-color: blue;
		};
	};
}

Dargestellt wird ein Punkt mit Puffergeometrie (Polygon). Mit dem Parameter buffer-arc-segments kann man die Form des Puffers beeinflussen.

point {
	complex-graphics:
		line {
			line-width: 5px;
			line-color: red;
			line-cap: round;
			x1: -10px;
			y1: 0px;
			x2: 10px;
			y2: 0;
		},
		line {
			line-width: 5px;
			line-color: red;
			line-cap: round;
			x1: 0px;
			y1: -10px;
			x2: 0px;
			y2: 10px;
		};
	buffer-distance: 50px;
	buffer-polygon:
	{		
		fill-pattern: hatch_style_diagonal_cross;
		distance-between-pattern-lines: 15px;
		pattern-lines-width: 2px;
		fill-color: RGB(0, 255, 0);
		background-color: RGB(200, 200, 200);
		border-line:
		{			
			line-width: 3px;
			line-color: blue;			
		};
	};
}

Dargestellt wird ein Punkt mit Puffergeometrie (Polygon) und Marker.

point::gpsLocation {
	complex-graphics:
		text {
			text: 57810;
			text-color: black;
			text-font-name: "Segoe MDL2 Assets";
			text-font-type: symbols;			
			text-height: 20px;
			text-weight: 400;			
		},
		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;
			position-x: 1;
			position-y: 15;
		},
		circle {
			fill-color: red;
			fill-pattern: solid;			
			radius: 3px;
		};

}

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

point {
	complex-graphics:
		path {
			path-top: -4;
			path-left: -4;
			path-width: 8;
			path-height: 8;
			flip-y: false;			
			target-position-x: 0.0px;			
			target-position-y: 0.0px;			
			target-width: 40.0m;			
			target-height: 40.0m;			
			line-width: 1.0m;
			line-color: black;			
			fill-pattern: solid;
			fill-color: RGB(0, 128, 0);
			path-commands: M -2 -3 A 2 2 0 1 1 2 -3 L 3 -2 A 2 2 0 1 1 3 2 L 2 3 A 2 2 0 1 1 -2 3 L -3 2 A 2 2 0 1 1 -3 -2 Z M -2 0 A 2 2 0 1 1 2 0 A 2 2 0 1 1 -2 -0;
		};
}

Das folgende Beispiel zeigt einen Punkt mit SVG Path.

point::Löschwasserteich {
	complex-graphics:
        text {
			text: "100"; 
            // Die Zahl hier würde in der Praxis aus einer Datenbank kommen
            // z.B. text: [Area];
			text-color: black;
			text-font-name: "Arial";
			text-height: 3.5m;
			min-text-height: 4.2;
			max-text-height: 33.6;
			position-x: -3m;
			min-position-x: -28.8;
			max-position-x: -3.6;
			position-y: -8m;
			min-position-y: -76.8;
			max-position-y: -9.6;
		},
        text {
			text: "m³";
			text-color: black;
			text-font-name: "Arial";
			text-height: 3.5m;
			min-text-height: 4.2;
			max-text-height: 33.6;			
			position-x: 5m;
			min-position-x: 6;
			max-position-x: 48;
			position-y: -8m;
			min-position-y: -76.8;
			max-position-y: -9.6;
		},
		path {
			path-top: 0;
			path-left: 0;
			path-width: 18;
			path-height: 12;
			target-position-x: 0px;
			target-position-y: 0px;
			target-width: 15m;
			target-min-width: 18;
			target-max-width: 144;
			target-height: 10m;
			target-min-height: 12;
			target-max-height: 96;
			line-width: 0.5m;
            line-min-width: 1;
            line-max-width: 3;
			line-color: black;
			line-join: round;
			line-cap: round;
			path-commands: M 3 4 h 1 v 7 h 10 v -7 h 1 M 0 6 L 2 4 M 0 9 L 4 5 M 0 12 L 4 8 M 3 12 L 4 11 M 6 12 L 7 11 M 9 12 L 10 11 M 12 12 L 13 11 M 15 12 L 18 9 M 14 10 L 18 6 M 14 7 L 17 4 M 9 0 v 6 M 8 0 h 2 M 6 1 L 7 0 M 6.5 0.5 L 9 3 M 11 0 L 12 1 M 11.5 0.5 L 9 3 M 4 7.5 A 2 2 0 0 0 6 7 A 2 2 0 0 0 9 7 A 2 2 0 0 0 12 7 A 2 2 0 0 0 14 7.5;
		},
		path {
			path-top: 0;
			path-left: 0;
			path-width: 1;
			path-height: 1;
			horizontal-alignment: center;
			vertical-alignment: center;
			target-position-x: 0px;
			target-position-y: -2.5m;
            target-min-position-y: -24;
            target-max-position-y: -3;
			target-width: 17m;
			target-min-width: 20.4;
			target-max-width: 163.2;
			target-height: 17m;
			target-min-height: 20.4;
			target-max-height: 163.2;
			line-width: 1m;
            line-min-width: 1.2;
            line-max-width: 9.6;
			line-color: RGB(0, 130, 200);
			line-join: miter;
			line-cap: square;
			path-commands: M 0 0 H 1 V 1 H 0 Z;
		};
}

Das Beispiel zeigt eine praktische Anwendung.

point {
	complex-graphics:
		text {
			text: "Alpha@Beta";
			text-line-break-character: @;
			text-color: red;
			text-color-opacity: 1.0;
			text-halo-color: green;
			text-halo-width: 1.0m;
			min-text-halo-width: 1;
			max-text-halo-width: 5;
			draw-text-halo-first: false;
			text-font-name: "Arial";
			text-height: 20.0m;
			min-text-height: 10;
			max-text-height: 100;
			text-weight: 400;
			text-style: italic, underline;		
		};
}

Das Beispiel zeigt an der Stelle des Punktes einen Text mit Halo. Achtung: Text-Halos werden zur Zeit nur im Agge (AntiGrain) Renderer unterstützt.

point { 			
complex-graphics:       
    text {
        text: "k";
        text-color: RGBA(0, 147, 221, 1);
        text-font-name: "ATKIS_2";
        text-height: 40m;
    },
    text {
        //text: [HOEH_MEASURETYPEVALUE];
        text: "167.9";
        text-font-name: "ARIAL";
        text-height: 15m;
        text-color: RGBA(0, 147, 221, 1);
        position-x: 40m;
        position-y: 30m;
    };   
}

Wasserspiegelhöhe

point { 			
    complex-graphics:      
    text {
        text: "v";
        text-color: RGBA(0, 146, 64, 1);
        text-font-name: "ATKIS_1";
        text-height: 50m;
    };
}

Laubbaum

point {
    complex-graphics:
        text {
            text: "`";
            text-color: RGBA(0, 0, 0, 1);
            text-font-name: "ATKIS_1";
            text-height: 50m;
            
        },
        text {
            text: "a";
            text-color: RGBA(255, 255, 255, 1);
            text-font-name: "ATKIS_1";
            text-height: 50m;
           
        },
        text {
            text: "b";
            text-color: RGBA(0, 0, 0, 1);
            text-font-name: "ATKIS_1";
            text-height: 50m;            
        };
}

Segelflugplatz

Text mit Umbruch

point{
    complex-graphics:
        text {
            text: "Alpha@Beta";
            text-line-break-character: @;
            text-color: red;
            text-font-name: "Arial";
            text-height: 5.0m;
            min-text-height: 10;
            max-text-height: 100;
            text-weight: 400;
            text-style: italic, underline;            
        };    
}
Text durchgestrichen 
point {
        complex-graphics:
            text {
                text: "Text";
                text-color: green;
                text-font-name: "Arial";
                text-height: 7.0m;
                text-height-measurement: windows;
                text-style: strikeout;
            };
    }
Text mit Rotation 
point{
    complex-graphics:
    text {
        //text: [FirstChar(LABEL) // "_" // (PARAM)];
        text: "P_3";
        text-color: #FF00FFFF;
        text-background-color: green;
        text-background-color-opacity: 0.8;
        text-font-name: "Arial";
        text-height: 4.0m;
        min-text-height: 10;
        max-text-height: 100;
        text-rotation: -45.0;
    };
}
Text aus Symbolfont 
point{
        complex-graphics:
        text {
                text: 0x22;
                text-color: blue;
                text-font-name: "Webdings";
                text-font-type: symbols;
                text-height: 13.0m;
                min-text-height: 10;
                max-text-height: 100;
            };
    }
Text als Linie, verschoben 
point{
        complex-graphics:
        line {
                line-width: 2px;
                line-min-width: 2;
                line-max-width: 2;
                line-color: red;
                line-cap: round;
                x1: 0.0m;			
                y1: 0.0m;			
                x2: 5.0m;			
                y2: 5.0m;			
            };
    }
Punkt rot dargestellt mit Linie 
point{
    complex-graphics:
        line {
            line-width: 4px;
            line-color: RGB(0, 255, 0);
            line-cap: flat;
            line-dash-style: dash_dot_dot;
            x1: -5.0m;
            y1: -5.0m;
            x2: 5.0m;
            y2: 5.0m;
        },
        circle {
            radius: 5px;
            fill-color: red;
            fill-pattern: solid;
        };
}
Punkt mit Liniensymbolisierung 
point {
        complex-graphics:
        polyline {
                line-width: 3px;			
                line-color: red;
                line-join: miter;
                line-miter-limit: 10px;			
                line-cap: round;		
                points: (-5m, -5m), (0m, 5m), (5m, -5m);
            };
    }
Punkt als Halbkreis 
point {
        complex-graphics:
        arc {
                line-width: 3px;			
                line-color: red;
                radius: 7.0m;
                start-angle: 30;
                sweep-angle: 250.0;		
        };
    }
Punkt mit Randlinie 
point {
        complex-graphics:
        circle {
                line-width: 1m;
                line-color: green;
                fill-pattern: solid;
                fill-color: RGB(255, 0, 0);
                radius: 7m;			
            };
    }
Punkt mit Füllmuster 
point {
        complex-graphics:
        circle {
                line-width: 4px;
                line-color: green;
                line-dash-style: dash_dot_dot;
                fill-pattern: hatch_style_diagonal_cross;
                distance-between-pattern-lines: 10px;			
                pattern-lines-width: 2px;			
                fill-color: RGB(255, 0, 0);
                background-color: RGB(200, 200, 200);
                background-color-opacity: 1.0;			
                radius: 7.0m;			
            };
    }
Punkt mit Füllmuster 
point {
        complex-graphics:
        circle {
                fill-pattern: custom;
                fill-color: RGB(255, 0, 0);
                background-color: RGB(200, 200, 200);
                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: 0.7;
                radius: 7.0m;			
        };
    }
Punkt mit Polygonsymbol 
point {
complex-graphics:
    polygon {
        line-width: 2px;			
        line-color: red;
        line-join: miter;
        line-miter-limit: 10px;			
        fill-pattern: none;			
        points: (-6m, -6m), (-6m, 6m), (6m, 6m), (6m, -6m);			
    };
}
Punkt mit Polygonmuster 
point {
        complex-graphics:
        polygon {
            line-width: 4px;
            line-color: green;
            line-cap: flat;
            line-dash-style: dash_dot_dot;
            fill-pattern: hatch_style_diagonal_cross;
            distance-between-pattern-lines: 10px;			
            pattern-lines-width: 2px;		
            fill-color: RGB(255, 0, 0);
            background-color: RGB(200, 200, 200);					
            points: (-6m, -6m), (-6m, 6m), (6m, 6m), (6m, -6m);
        };
    }
Im Beispiel wird eine PNG Datei für die Punktdarstellung genutzt. Über die Angabe eines Winkels (Rotation) wird die Graphik entsprechend gedreht. Der Name der Datei wird direkt aus der Datentabelle (hier im Beispiel Spalte typ) gelesen. Der Pfad und die Endung der Graphikdatei werden als String zusammengesetzt. Achtung: Erfolgt die Eingabe über den Parameter style im Managementcenter (keine CSS Datei), müssen vier Backslash notiert werden: file-name:["E:\\\\cardoSystem\\\\_Projekt_XY\\\\Geodaten\\\\Bilder\\\\" // typ // ".png"]; 
point {
   complex-graphics:                                     
     pixmap {
       file-name: ["D:\\IduIT.Native\\IduIT.GeoLib\\$mdDok\\Style\\Beispiele\\Scriban\\idu.png"];
       width: 17.0m;
       height:5.0m;
       opacity: 1.0;
       //aus Spalte Winkel 
       //rotation: [winkel];
       rotation: 45;
       vertical-alignment: center;
       horizontal-alignment: center;                                 
       };
    }
Diese Beispiel zeigt ein Symbol, zusammengesetzt aus 4 Kuchenstücken. Erweiterbar wäre dieses Symbol mit einer Bedingung, die in Abhängigkeit von einem Wert, die entsprechende Farbe für jedes Kuchenstück zurückgibt. Die Schriftart, die hier genutzt wird, kann auf Nachfrage von uns erhalten werden. 
unordered {
        point {
            complex-graphics:
            text {
				text: 0x27;
				text-font-name: "LRA_GR1";
				text-color: green;
				text-height: 50px;
			},
            text {
				text: 0x29;
				text-font-name: "LRA_GR1";
				text-color: red;
				text-height: 50px;
			},
            text {
				text: 0x28;
				text-font-name: "LRA_GR1";
				text-color: blue;
				text-height: 50px;
			},
                text {
                    text: 0x2A;
                    text-font-name: "LRA_GR1";
                    text-color: yellow;
                    text-height: 50px;
                };
        }
    }
Vier positionierte Rechtecke - denkbar wäre über eine Abfrage die Farben der Kästchen nach einen Wert variieren zu lassen (Stickwort Messwerte). 
unordered {
	point {
		complex-graphics:
			polygon {
				fill-color: blue;
				fill-pattern: solid;
				points: (0px, 0px), (0px, 20px), (14px, 20px), (14px, 0px);
				line-width: 1px;
				line-color: black;
				line-join: miter;
			};
	}

	point {
		complex-graphics:
			polygon {
				fill-color: green;
				fill-pattern: solid;
				points: (0px, 20px), (0px, 40px), (14px, 40px), (14px, 20px);
				line-width: 1px;
				line-color: black;
				line-join: miter;
			};
	}

	point {
		complex-graphics:
			polygon {
				fill-color: yellow;
				fill-pattern: solid;
				points: (0px, 40px), (0px, 60px), (14px, 60px), (14px, 40px);
				line-width: 1px;
				line-color: black;
				line-join: miter;
			};
	}

	point {
		complex-graphics:
			polygon {
				fill-color: red;
				fill-pattern: solid;
				points: (0px, 60px), (0px, 80px), (14px, 80px), (14px, 60px);
				line-width: 1px;
				line-color: black;
				line-join: miter;
			};
	}
}
Zuletzt geändert: 16.04.2025 09:52:37 (erstmals erstellt 27.02.2020) // Alias: "CSSPunkte"


Datenschutz

Datenschutzerklärung
 

Kontakt

IDU IT+Umwelt GmbH
http://www.idu.de

Zittau

Goethestraße 31
02763 Zittau


+49 (0)3583 54 999 40
+49 (0)3583 54 999 59

Büro Dresden

Im GebäudeEnsemble Deutsche Werkstätten Hellerau
Gebäude E / Büroeinheit 2/4-6

Moritzburger Weg 67
01109 Dresden

+49 (0)351 89 69 69 50