1. Home
  2. MapEdit Portal
  3. Stilisieren von Vector-Layern

Stilisieren von Vector-Layern

Die Stilisierung eines Layers ist aufgeteilt in verschiedene Geometrie-Typen. Diese Werte werden in die "style"-Eigenschaft eines GeoJSON-Layers eingefügt. Ein Beispiel hierfür befindet sich am Ende dieses Eintrags.

Circle: Kreis aus Punktgeometrien Line: Linien aus LineString-Geometrien und Umrandungen von Polygonen Fill: Füllung eines Polygons Symbol: Icons und Texte

AttributBeschreibungBeispiel
circle "circle": {
circle.circle-radiusGröße des Kreises in [px]"circle-radius": 8,
circle.circle-colorFüllfarbe des Kreises"circle-color": "rgba(135,255,66,.75)"
circle.circle-stroke-width?
(optional)
Breite der Umrandung des Kreises"circle-stroke-width": 1,
circle.circle-stroke-color
(optional)
Farbe der Umrandung des Kreises"circle-stroke-color": "rgba(135,255,66,1)"
circle.circle-opacity?
(optional)
Sichtbarkeit des Kreises"circle-opacity": 0.5
 }
line "line": {
line.line-colorLinienfarbe"line-color": "rgba(0,200,250, 1)"
line.line-widthBreite der Linie in [px]"line-width": 2
line.line-opacity?
(optional)
Sichtbarkeit der Linie"line-opacity": 0.5
 }
fill "fill": {
fill.fill-colorFüllfarbe"fill-color": "rgba(0,0,0,0)"
fill.fill-opacity?
(optional)
Sichtbarkeit der Füllung"fill-opacity": 0.5
 }
symbol "symbol": {
symbol.text-colorTextfarbe"text-color": "rgba(0, 0, 0, 1)"
 }

Symbol-Layer

Sofern bei der Stilisierung ein "symbol"-Layer genutzt wird, muss zusätzlich zur "style"-Eigenschaft auch "symbolLayout" angelegt werden.

Texte

Im nachfolgenden Beispiel würde ein Punkt mit dem Inhalt des Attributes "label" beschriftet werden. Bei der Schriftwahl stehen "Roboto Regular", "Roboto Thin" und "Roboto Medium" zur Verfügung. Wie Sie einen Zeilenumbruch in der Beschriftung erstellen, lernen Sie hier.

"style": {
    "symbol": {
        "text-color": "black"
    }
},
"symbolLayout": {
    "visibility": "none",
    "text-field": "{label}",
    "symbol-placement": "point",
    "text-font": ["Roboto Regular"],
    "text-size": 10
}

Icons

Auch wenn Icons derzeit nicht direkt stilisiert werden können, muss dennoch ein leeres Objekt unter "style" angelegt werden, da der Layer sonst nicht dargestellt wird.

Zur Auswahl stehen derzeit die Maki Icons von Mapbox. Wenn Sie eines der Icons nutzen möchten, fahren sie mit der Maus über das Icon und geben die dann erscheinende ID wie im nachfolgenden Beispiel ein.

"style": {
    "symbol": {}
},
"symbolLayout": {
    "visibility": "none",    
    "icon-image": "charging-station-15",
    "icon-size": 1,
    "icon-ignore-placement": true
}

MapboxExpressions

Bei allen Attributen der obigen Tabelle ist es möglich auch eine sogenannte MapboxExpressions einzufügen, hierbei wird das Stilisierungsattribut dann durch Attribute des dargestellten Objekts beeinflusst.

Step-Expression

Der Wert einer Eigenschaft kann hierbei in Stufen definiert werden. Es gilt stets der erste Wert, doch sobald eine definierte Grenze überschritten wird, gilt der nächste Wert. Bei den Werten wird stets ein Default-Wert zu Beginn definiert, anschließend abwechselnd Grenze und Wert.

Im nachfolgenden Beispiel werden alle Bäume mit einem Kreis von 8px Breite dargestellt. Sofern der Baum jedoch größer als 5 Meter ist, ist sein Kreis 14px groß. Sofern er dann noch größer als 10 Meter ist, wird er 20px groß dargestellt. Falls es einen Baum gibt, der größer als 15 Meter ist, wird dieser mit 28px dargestellt.

"circle-radius": [
    [
        "step",
        ["get", "height"],
        8,
        5, 14,
        10, 20,
        15, 28
    ]
],

Interpolate-Expression

Hierbei ändert sich eine Eigenschaft entlang der aktuellen Zoomstufe. Der Wert wird hierbei in Paaren definiert, bei denen abwechselnd Zoomstufe und Wert notiert werden. Im nachfolgenden Beispiel beträgt die Opacity von den Zoomstufen 0 bis 7 1 und ab Zoomstufe 18 0.75. Zwischen Zoomstufe 7 und 18 wird der Wert linear interpoliert.

"fill-opacity": [
    "interpolate",
    ["linear"],
    ["zoom"],
    7, 1,
    18, 0.75
]

Case-Expression

Bei einer Case-Expression hängt die Darstellung von definierten Regeln ab. Hierbei werden in polnischer Notation Bedingungen aufgestellt, auf die der Wert folgt. Am Ende muss sich ein Default-Wert befinden. Im nachfolgenden Beispiel würden beispielsweise alle Eichen blau, alle Fichten green und alle restlichen Bäume rot dargestellt werden. Alle Bäume, die niedriger sind als 10 werden als kleine Punkte dargestellt, alle restlichen werden größer dargestellt.

"circle-color": [
    "case",
    ["==", ["get", "baumart"], "Eiche"], "blue",
    ["==", ["get", "baumart"], "Fichte"], "green",
    "red"
],
"circle-radius": [
    "case",
    ["<", ["get", "height"], 10], 8,
    16
],

Cluster

Unter einem Cluster versteht man das Zusammenfügen von Punktgeometrien zu einem größeren Punkt, der dann die Anzahl der zugehörigen Punkte angibt. Zoomt man näher in das Gebiet der Clusters, so werden die einzelnen Punkte einzeln angezeigt, sofern diese sich dann weit genug auseinander befinden.

Cluster können nur auf Punktlayer angewandt werden.

Zum Stilisieren eines Cluster kann ein "clusterOption"-Objekt zum Layer hinzugefügt werden, welches eine "style"-Eigenschaft besitzt. Durch diese Eigenschaft kann der Cluster wie ein gewöhnlicher Layer auch stilisiert werden (s.o.).

Zusätzlich kann bei der Stilisierung des Clusters auf die Variable point_count zugegriffen werden, sodass auch diese zum Stilisieren benutzt werden kann. Im nachfolgenden Beispiel wird diese genutzt, um Größe und Farbe des Clusters zu steuern. Zusätzlich wird der Cluster mit der Anzahl beschriftet.

"clusterOptions": {
    "style": {
        "circle": {
        "circle-color": [
            "step",
            ["get", "point_count"],
            "rgba(255,231,119,1)",
            100,
            "rgba(255,224,94,1)",
            1000,
            "rgba(255,222,72,1)",
            2500,
            "rgba(255,214,42,1)"
            ],
            "circle-radius": [
                "step",
                ["get", "point_count"],
                20, 100,
                30, 1000,
                40, 2500,
                45
            ]
        },
        "symbol": {
        "text-color": "rgba(0, 0, 0, 1)"
        }
    },
    "layout": {
        "visibility": "none"
    },
    "symbolLayout": {
        "visibility": "none",
        "text-field": "{point_count_abbreviated}",
        "symbol-placement": "point",
        "text-font": ["Roboto Light"],
        "text-allow-overlap": true
    }
}

Beispiel

{
    "type": "GeoJSON",
    "lid": "baum",
    "name": "baum",
    "source": {
    "data": "rest/data/geojson/baum",
    "cluster": true,
    "clusterMaxZoom": 14,
    "clusterRadius": 50
    },
    "layout": {
    "visibility": "none"
    },
    "style": {
    "circle": {
        "circle-radius": 8,
        "circle-color": [
            "case",
            ["==", ["get", "baumart"], "Eiche"], "blue",
            ["==", ["get", "baumart"], "Fichte"], "green",
            "red"
        ],
        "circle-stroke-width": 1,
        "circle-stroke-color": "rgba(135,255,66,1)"
    }
    },
    "clusterOptions": {
    "style": {
        "circle": {
            "circle-color": [
                "step",
                ["get", "point_count"],
                "rgba(195,255,161,1)", 5,
                "rgba(163,255,110,1)", 10,
                "rgba(130,245,64,1)"
                ],
            "circle-radius": [
                "step",
                ["get", "point_count"],
                20,
                2, 30, 
                5, 40
            ]
        },
        "symbol": {
        "text-color": "rgba(0, 0, 0, 1)"
        }
    },
    "layout": {
        "visibility": "none"
    },
    "symbolLayout": {
        "visibility": "none",
        "text-field": "{point_count_abbreviated}",
        "symbol-placement": "point",
        "text-font": ["Roboto Light"],
        "text-allow-overlap": true
    }
    },
    "layerType": "overlay",
    "displayInVectorLayerList": true,
    "selectable": true,
    "attributionText": "Kartendaten: © OpenStreetMap-Mitwirkende",
    "attributionHTML": "Kartendaten: © <a href='https://openstreetmap.org/copyright'>OpenStreetMap</a>-Mitwirkende",
    "addToLegend": true
}

 

Updated on März 26, 2021