3D-Gelände in MapLibre GL JS

MapLibre GL JS zeichnet Berge in 3D aus Geländekacheln, die in der Farbe jedes Pixels eine Höhe speichern. Mit einem Parameter des Stils, oder mit wenigen Zeilen in Ihrem eigenen Stil: Überhöhung, Himmel, Kamera, Höhen unter dem Mauszeiger, und was 3D an Kacheln kostet. Getestet mit MapLibre GL JS 6.13.0.

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/styles/outdoor.json?terrain=1",
  center: [7.6586, 45.9763], // das Matterhorn
  zoom: 12.5,
  pitch: 70,
  maxPitch: 85
});

Mit dem Parameter des Stils

terrain=1 funktioniert mit allen neun Stilen. Er ergänzt zwei Geländequellen, einen hillshade-Layer und die Eigenschaft terrain des Stils:

"sources": {
  "terrain":    { "type": "raster-dem", "url": "…/maps/terrain.json", "tileSize": 512, "encoding": "mapbox" },
  "terrain-3d": { "type": "raster-dem", "url": "…/maps/terrain.json", "tileSize": 512, "encoding": "mapbox" }
},
"terrain": { "source": "terrain-3d", "exaggeration": 1 }

Der hillshade-Layer liest terrain, die 3D-Oberfläche terrain-3d. Mit einer Quelle für beides warnt MapLibre: «You are using the same source for a hillshade layer and for 3D terrain. Please consider using two separate sources to improve rendering quality.» Um die Berge steiler oder wieder flach zu machen:

map.setTerrain({ source: "terrain-3d", exaggeration: 1.5 });
map.setTerrain(null); // flach, die Schummerung bleibt

In Ihrem eigenen Stil

Für einen eigenen Stil, oder um 3D später einzuschalten, fügen Sie die Quelle hinzu, sobald der Stil geladen ist. Das ist der Code, den wir getestet haben, mit Himmel und einer Schaltfläche, die das Gelände ein- und ausschaltet:

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/styles/outdoor.json",
  center: [7.6586, 45.9763],
  zoom: 12.5,
  pitch: 70,
  bearing: -125,
  maxPitch: 85
});
map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));

map.on("load", () => {
  map.addSource("terrain-3d", {
    type: "raster-dem",
    url: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/terrain.json"
  });
  map.setTerrain({ source: "terrain-3d", exaggeration: 1.2 });
  map.setSky({
    "sky-color": "#7fb2e5",
    "horizon-color": "#dfeaf5",
    "fog-color": "#ffffff",
    "sky-horizon-blend": 0.6,
    "horizon-fog-blend": 0.6,
    "fog-ground-blend": 0.3
  });
});
map.addControl(new maplibregl.TerrainControl({ source: "terrain-3d", exaggeration: 1.2 }));

• Das TileJSON unter terrain.json nennt die Kachel-URL, den Zoombereich 0 bis 10, die Kachelgrösse von 512 Pixeln und die Kodierung; die Quelle braucht also keine weiteren Optionen. Unsere Kacheln verwenden die Kodierung Mapbox Terrain-RGB, den Standard von MapLibre.
• MapLibre erlaubt eine Neigung bis 60 Grad, solange Sie maxPitch nicht erhöhen. Bei 85 Grad blicken Sie fast dem Boden entlang; steile Ansichten zeigen den Horizont und laden mehr Kacheln.
• Der Himmel erscheint, wenn die Karte geneigt ist. Ohne setSky hat der Raum über dem Horizont die Hintergrundfarbe des Stils.

Die Höhe unter dem Mauszeiger

map.on("mousemove", (e) => {
  const t = map.getTerrain();
  const h = t && map.queryTerrainElevation(e.lngLat);
  if (h != null) console.log(Math.round(h / t.exaggeration), "m");
});

queryTerrainElevation gibt die Höhe mal die Überhöhung zurück, und ohne Gelände null. Mit Überhöhung 1,2 ergab es für das Matterhorn 5'052 m, in den Geländedaten 4'210 m. Es liest die Kacheln, die die Karte geladen hat, funktioniert also für den sichtbaren Teil der Welt.

Das Gelände stammt aus dem Modell Copernicus GLO-90, einem Raster mit 90 m Abstand. Täler und Hänge stimmen gut; spitze Gipfel erscheinen zu tief: Das Matterhorn ist 4'478 m hoch. Für Höhen von Punkten, die Sie nicht auf einer Karte geladen haben, oder einer ganzen Route, verwenden Sie die Höhen-API mit demselben Schlüssel.

Was 3D an Kacheln kostet

Jede Geländekachel zählt wie eine Vektorkachel als eine Kartenkachel. Wir haben die Kacheln der ersten Ansicht einer Karte von 1280 × 720 Pixeln gezählt:

Eine geneigte Karte blickt weit in die Ferne und lädt Kacheln bis zum Horizont; der Stil Outdoor ergänzt Höhenlinien und Wege. Ist 3D in Ihrer App eine Option, starten Sie flach und schalten es ein, wenn es jemand verlangt, mit dem TerrainControl oben. Jedes Konto enthält 100'000 Kacheln im Monat; die Maps-Tarife haben mehr.

Grenzen

• Das Meer ist in 3D flach auf 0 m, und Seen haben die Höhe ihres Wasserspiegels. Der Stil Marine zeigt Tiefen mit Farben und Schattierung.
• Geländekacheln gibt es bis Zoomstufe 10, passend zum 90-m-Raster. Näher heran vergrössert MapLibre Zoomstufe 10; kleine Steigungen in Städten sind also nicht zu sehen.
• MapLibre GL JS 6 braucht WebGL 2. 3D fordert die Grafikkarte mehr als eine flache Karte; testen Sie auf den Handys, die Ihre Besucherinnen und Besucher verwenden.