Anleitung

Schummerung in MapLibre GL JS

Die Schummerung dunkelt die Hänge ab, die von einem gedachten Licht abgewandt sind, damit Hügel und Täler auf einer flachen Karte sichtbar werden. MapLibre zeichnet sie aus Geländekacheln, als Layer unter den Strassen und der Beschriftung. Der Layer, seine Farben für helle und dunkle Karten, und die fünf Methoden der Schummerung. Getestet mit MapLibre GL JS 6.13.0.

Bei jedem unserer Stile hängen Sie hillshade=1 an die Stil-URL:

style: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/styles/light.json?hillshade=1"

Für Ihren eigenen Stil ergänzen Sie eine Quelle raster-dem und einen Layer hillshade, wie unten.

Methode

Gehe zu:

Die Karte wird geladen…

Der Stil light mit dem hillshade-Layer aus dem Code unten.

Der hillshade-Layer

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/styles/light.json",
  center: [7.62, 46.12],
  zoom: 9.6
});

map.on("load", () => {
  map.addSource("terrain", {
    type: "raster-dem",
    url: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/terrain.json"
  });
  // unter dem ersten Strassen-Layer, damit Strassen und Beschriftung obenauf bleiben
  const firstRoad = map.getStyle().layers.find((l) => l.id.startsWith("roads"));
  map.addLayer({
    id: "hillshade",
    type: "hillshade",
    source: "terrain",
    paint: {
      "hillshade-exaggeration": 0.4,
      "hillshade-shadow-color": "#5b6470",
      "hillshade-highlight-color": "#ffffff",
      "hillshade-accent-color": "#5b6470"
    }
  }, firstRoad && firstRoad.id);
});

Das zweite Argument von addLayer ist der Layer, unter dem gezeichnet wird. In unseren Stilen, und in den Stilen von Protomaps, auf denen sie beruhen, beginnen die Strassen-Layer mit roads und kommen nach Landnutzung und Gewässern. Parks und Wälder werden schattiert, und Strassen und Beschriftung bleiben scharf.
In einem Stil-JSON ergänzen Sie dieselbe Quelle in sources und den Layer in layers an dieser Stelle.
Für Schummerung zusammen mit 3D-Gelände verwenden Sie für die 3D-Oberfläche eine zweite Quelle mit derselben URL; MapLibre warnt, wenn beide eine Quelle verwenden. Die Anleitung zu 3D-Gelände zeigt beides.

Farben und Stärke

Eigenschaft	Standard	Was sie tut
`hillshade-exaggeration`	0.5	Stärke, von 0 bis 1. Werte von 0,3 bis 0,45 halten die Karte lesbar.
`hillshade-shadow-color`	#000000	Hänge, die vom Licht abgewandt sind. Ein Grau oder Braun passend zum Stil wirkt weicher als Schwarz.
`hillshade-highlight-color`	#FFFFFF	Hänge, die dem Licht zugewandt sind.
`hillshade-accent-color`	#000000	Felswände und Schluchten.
`hillshade-illumination-direction`	335	Woher das Licht kommt, in Grad; 335 ist aus Nordwesten, wie auf den meisten gedruckten Karten.
`hillshade-illumination-anchor`	viewport	`viewport` hält das Licht oben am Bildschirm, wenn sich die Karte dreht; `map` hält es im Norden.
`hillshade-illumination-altitude`	45	Höhe des Lichts, von 0 (Sonnenuntergang) bis 90 (Mittag).
`hillshade-method`	standard	Das Verfahren, siehe unten.

Auf einem dunklen Stil muss auch die Farbe der beleuchteten Hänge dunkel bleiben, sonst leuchten die Berge. Unser Stil dark verwendet:

"hillshade-exaggeration": 0.35,
"hillshade-shadow-color": "#000000",
"hillshade-highlight-color": "#4b5563",
"hillshade-accent-color": "#000000"

Die fünf Methoden

Seit MapLibre GL JS 5.5 wählt hillshade-method das Verfahren. Wechseln Sie in der Karte oben zwischen ihnen:

standard: die Methode, die MapLibre schon immer verwendet, und der Standard.
basic: Licht im Verhältnis zum Winkel zwischen Licht und Hang, wie der Standard von gdaldem hillshade.
combined: Schattierung, die mit der Steigung zunimmt, wie gdaldem -combined; flaches Land bleibt hell.
igor: schattiert so wenig wie möglich von dem, was darunter liegt, wie gdaldem -igor. Gut unter dichten Karten.
multidirectional: mehrere Lichter gleichzeitig. Richtung, Höhe und beide Farben nehmen dann einen Wert pro Licht:

map.setPaintProperty("hillshade", "hillshade-method", "multidirectional");
map.setPaintProperty("hillshade", "hillshade-illumination-direction", [270, 315, 0]);
map.setPaintProperty("hillshade", "hillshade-illumination-altitude", [30, 30, 30]);
map.setPaintProperty("hillshade", "hillshade-highlight-color", ["#ffffff", "#ffffff", "#ffffff"]);
map.setPaintProperty("hillshade", "hillshade-shadow-color", ["#5b6470", "#7a8290", "#5b6470"]);

Setzen Sie die Listen wenn möglich von Anfang an in die Definition des Layers. Wird ein einzelner Wert später in eine Liste geändert, warnt MapLibre, dass es nicht zwischen Arrays verschiedener Länge animieren kann.

Kacheln und Grenzen

Die Geländekacheln gehen bis Zoomstufe 10. Näher heran vergrössert MapLibre sie; die Schummerung kostet also wenige Kacheln: Die erste Ansicht des Wallis oben, 1280 × 720 Pixel auf Zoomstufe 9,6, lud insgesamt 16 Kacheln, Vektor und Gelände. Jede Kachel zählt einmal; jedes Konto enthält 100'000 im Monat.
Das Gelände stammt aus einem Raster mit 90 m Abstand. Es zeigt Hügel, Täler und Berge und ist zu grob für kleine Steigungen in Städten.
Das Meer ist flach auf 0 m. Für einen schattierten Meeresboden siehe die Anleitung zur Seekarte. Für Linien gleicher Höhe siehe Höhenlinien.

Kostenlosen API-Schlüssel holen Der Stil Relief