MapLibre Layer-Objekte

Geschrieben von Wolf am 21. Februar 2023.

Dokumentation zu Layers bei MapLibre.org

Einführung

Es gibt folgende Layer-Typen:

Flächen unabhängig von Features:
- Background–Layer — Farbfläche oder Muster,
- Raster–Layer — Einzelbilder oder -Videos oder aus Tiles zusammengesetzte Flächen,
- Hillshade–Layer — aus Terrain-Tiles erzeugte Schummerung.
Features:
- Punkt-Features:
  - Symbol-Layer — Darstellung mit Symbolen,
  - Circle–Layer — Darstellung mit Kreisen,
  - Heatmap-Layer — Darstellung als Heatmap;
- Linien-Features:
  - Line–Layer — Darstellung als Linien,
  - Symbol–Layer — Beschriftung der Linien;
- Flächen-Features:
  - Fill–Layer — Darstellung als ausgemalte Polygone,
  - Fill-Extrusion–Layer — Darstellung als dreidimensionaler Polyeder,
  - Symbol–Layer — Beschriftung der Flächen.

Layer werden durch JavaScript-Objekte repräsentiert. Dieses Dokument beschreibt die in der Repräsentation verwendeten Attribute.

Von mehreren Layer-Typen benutzte Attribute.

attribute	values	P/L	bg	fill	circle	line	symbol	icon	text	extrusion	raster	hillshade	heatmap
`visibility`	`"visible"` \| `"none"`	`L`	✔	✔	✔	✔	✔	←	←	✔	✔	✔	✔
*-`sort-key`	number	`L`	·	✔	✔	✔	✔	←	←	·	·	·	·
*-`opacity`	number (0 … 1)	`P`	✔	✔	✔	✔	→	✔	✔	✔	✔	·	✔
*-`translate-anchor`	`"map"` \| `"vieport"`	`P`	·	✔	✔	✔	→	✔	✔	✔	·	·	·
*-`translate`	`[`Δx`,`Δy`]`	`P`	·	✔	✔	✔	→	✔	✔	✔	·	·	·
*-`color`	#rgb \| #rrggbb \| `rgb(`r`,`g`,`b`)`	`P`	✔	✔	✔	✔	→	✔	✔	✔	·	·	✔
*-`pattern`	`"`sprite_id`"`	`P`	✔	✔	·	✔	·	·	·	✔	·	·	·

Rasterdarstellungen.

Raster-Layer-Attribute:

attribute	values	P/L
`raster-brightness-max`	number (`0` … `1`)	`P`
`raster-brightness-min`	number (`0` … `1`)	`P`
`raster-contrast`	number (`-1` … `0` … `1`)	`P`
`raster-saturation`	number (`-1` … `0` … `1`)	`P`	Farbsättigung, `-1`: grau
`raster-hue-rotate`	number (`0` … `359`)	`P`	Falschfarben
`raster-resampling`	`"linear"` \| `"nearest"`	`P`	Interpolationsmethode, wenn keine Kachel auf Zoomstufe verfügbar
`raster-fade-duration`	number (`300`) ms	`P`	Dauer des Überblendens bei neuen Kacheln

Hillshade-Layer-Attribute:

attribute	values	P/L
`hillshade-shadow-color`	#rgb \| #rrggbb \| `rgb(`r`,`g`,`b`)`	`P`	Einfärbung der dunklen Seite
`hillshade-highlight-color`	#rgb \| #rrggbb \| `rgb(`r`,`g`,`b`)`	`P`	Einfärbung der hellen Seite
`hillshade-accent-color`	#rgb \| #rrggbb \| `rgb(`r`,`g`,`b`)`	`P`	Hervorhebung von Klippen und Schluchten
`hillshade-exaggeration`	number (`0` … `0.5` … `1`)	`P`	Stärke der Schummerung
`hillshade-illumination-anchor`	`"viewport"` \| `"map"`	`P`	Beleuchtungsrichtung relativ zu "Sichtrichtung" oder zu Nord
`hillshade-illumination-direction`	number (`0` … `335` … `359`)	`P`	Beleuchtungsrichtung

Punktfeatures.

Darstellung als (beschriftetes) Symbol.

Circle-Layer-Attribute:

attribute	values	P/L
`circle-radius`	number (5)	`P`
`circle-stroke-width`	number (1)	`P`
`circle-stroke-color`	#rgb \| #rrggbb \| `rgb(`r`,`g`,`b`)`	`P`
`circle-stroke-opacity`	number (0 … 1)	`P`
`circle-blur`	number (0)	`P`
`circle-pitch-alignment`	`"viewport"` \| `"map"`	`P`	Orientierung des Kreises beim Kippen der Karte
`circle-pitch-scale`	`"map"` \| `"viewport"`	`P`	Größenskalierung nach "Abstand" vom Beobachter

Heatmap-Layer-Attribute:

attribute	values	P/L
`heatmap-radius`	number (`1` … `30` …)	`P`	Wirkung eines Punktes
`heatmap-weight`	number (`0` … `1` …)	`P`	Wichtung eines Punktes
`heatmap-intensity`	number (`0` … `1` …)	`P`	Wichtung aller Punkte zur Anapassung an Zoom-Level

Linienfeatures.

Dekoration mit (beschrifteten) Symbolen.

Line-Layer-Attribute:

attribute	values	P/L
`line-width`	number (1)	`P`
`line-dash-array`	number[]	`P`
`line-cap`	`"butt"` \| `"round"` \| `"square"`	`L`	Darstellung der Linienenden
`line-join`	`"miter"` \| `"round"` \| `"bevel"`	`L`	Darstellung der Linienknicks
`line-miter-limit`	number (2)	`L`	Keine Spitzen bei scharfen Knicken
`line-round-limit`	number (1.05)	`L`	Keine Rundung bei flachen Winkeln
`line-gap-width`	number (0)	`P`	Zeichne ein "Outline" statt der Linie
`line-offset`	number	`P`	Seitlicher Versatz der Linie, positiv ist rechts
`line-gradient`	#rgb \| #rrggbb \| `rgb(`r`,`g`,`b`)`	`P`	End-Farbe eines Farbverlaufes
`line-blur`	number (0)	`P`

Flächenfeatures.

Dekoration mit (beschrifteten) Symbolen.

Fill-Layer-Attribute:

attribute	values	P/L
`fill-outline-color`	#rgb \| #rrggbb \| `rgb(`r`,`g`,`b`)`	`P`
`fill-antialias`	`true` \| `false`	`P`

Fill-Extrusion-Layer-Attribute:

attribute	values	P/L
`fill-extrusion-base`	number (0 …)	`P`	Höhe des unteren Endes der Extrusion
`fill-extrusion-height`	number (0 …)	`P`	Höhe des oberen Endes der Extrusion
`fill-extrusion-vertical-gradient`	`true` \| `false`	`P`	Leichter Helligkeitsverlauf entlang der Extrusion

Symbole.

Symbol-Layer-Attribute:

attribute	values	P/L
`symbol-placement`	`"point"` \| `"line"` \| `"line-center"`	`L`
`symbol-spacing`	number (256)	`L`	Abstand zwischen Symbolen entlang einer Linie
`symbol-z-order`	`"auto"` \| `"viewport-y"` \| `"source"`	`L`	Zeichenreihenfolge der Symbole
`symbol-avoid-edges`	`false` \| `true`	`L`	Zeichne keine Symbole an Tile-Grenzen

Gemeinsame Icon- und Text-Attribute in Symbol-Layern:

attribute	values	P/L
*-`ignore-placement`	`false` \| `true`	`L`	Belegter Platz wird nicht als benutzt markiert
*-`overlap`	`"never"` \| `"always"` \| `"cooperative"`	`L`	Bedingung für Darstellung des Icons oder des Textes bei Überlappungen
*-`allow-overlap`	`false` \| `true`	`L`
*-`padding`	number[1..4} (2)	`L`	Zusätzlicher Bereich um das Objekt bei der Feststellung einer Überlappung
*-`anchor`	`"center"` \| `"top-left"` \| …	`L`	Welcher Punkt des Objektes auf das geometrische Feature gesetzt
*-`rotate`	number (`0` … `359`)	`L`	Rotation des Objektes im Uhrzeigersinn
*-`keep-upright`	`true` \| `false`	`L`	Objekt kann um 180° gedreht werden, damit es nicht auf dem Kopf steht
*-`pitch-alignment`	`"auto"` \| `"map"` \| `"viewport"`	`L`	Kippen des Textes bei Kippen der Karte
*-`rotation-alignment`	`"auto"` \| `"map"` \| `"viewport"` \| `"viewport-glyph"`	`L`	`map`: Punktfeatures: West-Ost; Linienfeatures: entlang der Linie `viewport`: entlang der Bildschirm-X-Achse `viewport-glyph`: Text entlang der Linie, Glyphen entlang der Bildschirm-X-Achse `auto`: Punktfeatures entlang der Bildschirm-X-Achse, Linienfeatures: entlang der Linie
*-`halo-color`	#rgb \| #rrggbb \| `rgb(`r`,`g`,`b`)`	`P`
*-`halo-width`	number (0)	`P`
*-`halo-blur`	number (0)	`P`

Icon-Attribute in Symbol-Layern:

`icon-optional`	`false` \| `true`	`L`	Text kann auch ohne Icon gezeigt werden, wenn Icon kollidiert
`icon-image`	`"`sprite_id`"`	`L`	Id des Image für das Icon (im Sprite)
`icon-size`	number (`1`)	`L`	Vergrößerungsfaktor für das Image
`icon-text-fit`	`"none"` \| `"width"` \| `"height"` \| `"both"`	`L`	Das Image kann gedehnt werden, damit der Text hinein passt
`icon-text-fit-padding`	number[4] (`[0,0,0,0]`)	`L`	Rand um Text, damit der Text nicht bis zum Rand des Image reicht
`icon-offset`	`[`Δx`,`Δy`] px`	`L`	Verschiebung des Icon nach rechts und unten. Wird mit `icont-size` multipliziert

Text-Attribute in Symbol-Layern:

`text-optional`	`false` \| `true`	`L`	Icon kann auch ohne Text gezeigt werden, wenn Text kollidiert
`text-field`	`"`formatted_text`"`	`L`	Symbol-Text. Kann auch formatiert sein.
`text-font`	`["`fontname`"`, …`]`	`L`	Es werden nicht die Browser-Fonts verwendet, sondern SDF-PBF-Fonts vom Server.
`text-size`	number (`1`) px	`L`	Fontgröße in Pixeln
`text-letter-spacing`	number (`0`)	`L`	Zusätzlicher Abstand zwischen den Glyphen
`text-line-height`	number (`1.2`)	`L`	Zusätzlicher Zeilenabstand
`text-transform`	`"none"` \| `"uppercase"` \| `"lowercase"`	`L`
`text-max-width`	number (10) em	`L`	Maximale Breite der Textbox: breitere Texte werden umgebrochen.
`text-writing-mode`	`[` `"horizontal"`, `"vertical"` `]`	`L`
`text-justify`	`"center"` \| `"left"` \| `"right"` \| `"auto"`	`L`	`auto`: passend zum Anker
`text-variable-anchor`	[`"center"` \| `"top-left"` \| …]	`L`	Mehrere mögliche Textausrichtungen zur Kollisionsvermeidung
`text-offset`	`[`Δx`,`Δy`] em`	`L`	Verschiebung des Textes nach rechts und unten. Angabe in `em`
`text-radial-offset`	number (`0`)	`L`	Textverschiebung passend zum Anker
`text-max-angle`	number (45) °cw	`L`	Maximale Winkeländerung zwischen zwei Zeichen, wenn der Text einer Linie folgt