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

Zuletzt geändert: 24.01.2023 15:27:38 (erstmals erstellt 27.02.2020)