Zum Inhalt springen
Guides
3D-Gelände mit Orthophoto

3D-Gelände mit Orthophoto

Ziel: Eine Karte, auf der das Orthophoto über dem echten Gelände liegt, plastisch schattiert und im Browser kippbar.

Voraussetzungen: ein Browser, ein beliebiger statischer Webserver (zum Beispiel npx serve). Ein kostenloser API-Token (Zugang und Limits).

Verwendet werden das DTM (Höhe, Typ raster-dem) und das Orthophoto (Bild, Typ raster). Beide Tilesets lassen sich über TileJSON einbinden, ohne einen Dateinamen zu kennen.

  1. Seite anlegen. Datei index.html mit MapLibre GL JS und einem Kartencontainer:

    <!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css">
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
<style>html, body, #map { margin: 0; height: 100%; }</style>
<div id="map"></div>

  2. Quellen deklarieren. Das Höhenmodell als raster-dem, das Orthophoto als raster:

    const quellen = {
  dem:   { type: "raster-dem", url: "https://tiles.mapx.at/v1/tiles/terrain-rgb.json", encoding: "mapbox" },
  ortho: { type: "raster",     url: "https://tiles.mapx.at/v1/tiles/orthophoto.json", tileSize: 512 }
};

  3. Ebenen schichten. Unten das Luftbild, darüber die Schummerung (hillshade) mit schwacher Wirkung, damit das Bild erkennbar bleibt:

    const ebenen = [
  { id: "ortho", type: "raster", source: "ortho" },
  { id: "schummerung", type: "hillshade", source: "dem",
    paint: { "hillshade-exaggeration": 0.4, "hillshade-shadow-color": "#000000" } }
];

  4. Gelände einschalten. terrain hebt alle Ebenen auf die Höhe des DTM. pitch kippt die Ansicht:

    <script>
  const TOKEN = "DEIN_TOKEN"; // öffentlicher Token mx_pk_…
  const map = new maplibregl.Map({
    container: "map",
    center: [12.694, 47.074], zoom: 12, pitch: 65, bearing: 20,
    maxPitch: 80,
    // Token an alle Anfragen an mapx.at hängen
    transformRequest: (url) => ({
      url: /^https:\/\/([\w-]+\.)?mapx\.at\//.test(url) ? url + (url.includes("?") ? "&" : "?") + "access_token=" + TOKEN : url,
    }),
    style: {
      version: 8,
      sources: quellen,
      layers: ebenen,
      terrain: { source: "dem", exaggeration: 1.3 }
    }
  });
  map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));
</script>

    Die Konstanten quellen und ebenen aus den Schritten 2 und 3 müssen im selben <script> vor new maplibregl.Map stehen.

  5. Starten. npx serve im Ordner, die ausgegebene Adresse öffnen. Mit gedrückter rechter Maustaste ziehen kippt und dreht die Karte.

Ergebnis

Das Luftbild liegt auf dem Gelände rund um den Großglockner, Hänge sind zusätzlich schattiert. Das Orthophoto reicht bis z18 (20 cm), das DTM bis z16 (Rasterweite 1 m); MapLibre vergrößert darüber hinaus automatisch.

Mit exaggeration lässt sich das Relief überhöhen. 1.0 entspricht der Natur; bei flachem Gelände wirken 1.5 bis 2 plastischer.

Nächste Schritte

Höhenlinien überlagernHöhenprofil entlang einer Linie