Höhenlinien in MapLibre GL JS

Höhenlinien verbinden Punkte gleicher Höhe. Sie können sie als Vektorkacheln laden und wie Strassen gestalten, oder ein Plugin berechnet sie im Browser aus Geländekacheln. Beides, mit Hauptlinien, Beschriftung und Beschriftung in Fuss. Getestet mit MapLibre GL JS 6.13.0.

map.addSource("contours", { type: "vector", url: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/contours.json" });
map.addLayer({ id: "contour-lines", type: "line", source: "contours", "source-layer": "contours" });

Linien und Beschriftung

map.on("load", () => {
  map.addSource("contours", {
    type: "vector",
    url: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/contours.json"
  });
  map.addLayer({
    id: "contour-lines",
    type: "line",
    source: "contours",
    "source-layer": "contours",
    paint: {
      "line-color": "rgba(124, 92, 58, 0.5)",
      "line-width": ["match", ["get", "level"], 1, 1, 0.5] // Hauptlinien dicker
    }
  }, "roads_tunnels_other_casing");
  map.addLayer({
    id: "contour-labels",
    type: "symbol",
    source: "contours",
    "source-layer": "contours",
    minzoom: 12,
    filter: ["==", ["get", "level"], 1], // Beschriftung nur auf Hauptlinien
    layout: {
      "symbol-placement": "line",
      "text-field": ["concat", ["to-string", ["get", "ele"]], " m"],
      "text-font": ["Noto Sans Regular"],
      "text-size": 10
    },
    paint: {
      "text-color": "rgba(124, 92, 58, 0.9)",
      "text-halo-color": "#ffffff",
      "text-halo-width": 1
    }
  });
});

• roads_tunnels_other_casing ist in unseren Stilen und den Stilen von Protomaps der erste Strassen-Layer über dem Wasser. Darunter gezeichnet bleiben Höhenlinien unter Strassen, Gebäuden und Beschriftung. In einem anderen Stil übergeben Sie die ID seines ersten Strassen-Layers.
• symbol-placement: "line" schreibt die Höhe entlang der Linie. Die Schrift muss eine sein, die der Stil hat: unsere haben Noto Sans Regular, Medium und Italic.
• Auf einem dunklen Stil verwenden Sie eine helle Linienfarbe, etwa rgba(214, 196, 170, 0.55), und einen dunklen Rand.

Die Kacheln mit Höhenlinien

Die Kacheln haben einen Layer, contours, mit zwei Feldern: ele, die Höhe in Metern, und level, 1 auf jeder fünften Linie. Sie gehen von Zoomstufe 10 bis 14; näher heran vergrössert MapLibre Zoomstufe 14. Sie sind aus dem Gelände Copernicus GLO-90 gezeichnet, einem Raster mit 90 m Abstand; sie folgen Hügeln und Bergen also gut und zeigen keine kleinen Steigungen. Unter Zoomstufe 10 gibt es keine Höhenlinien; dort zeigt die Schummerung Hügel und Täler.

Höhen in Fuss

Um die metrischen Linien in Fuss zu beschriften, rechnen Sie im Ausdruck um:

"text-field": ["concat", ["to-string", ["round", ["*", ["get", "ele"], 3.28084]]], " ft"]

Die Linien bleiben auf runden Metern, die Beschriftung lautet also 6562 ft und 6890 ft. Für Linien auf runden Fuss berechnen Sie sie im Browser mit maplibre-contour aus unseren Geländekacheln. Das lief mit maplibre-contour 0.1.1 und MapLibre 6.13.0:

<script src="https://unpkg.com/maplibre-contour@0.1.1/dist/index.min.js"></script>

const demSource = new mlcontour.DemSource({
  url: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/terrain/{z}/{x}/{y}.png",
  encoding: "mapbox",
  maxzoom: 10,
  worker: true
});
demSource.setupMaplibre(maplibregl);

map.on("load", () => {
  map.addSource("contours-ft", {
    type: "vector",
    tiles: [demSource.contourProtocolUrl({
      multiplier: 3.28084, // Fuss
      thresholds: { 10: [500, 2500], 11: [200, 1000], 12: [100, 500], 13: [40, 200] }
    })],
    maxzoom: 15
  });
  // dieselben zwei Layer wie oben, mit der Quelle "contours-ft" und der Beschriftung
  // "text-field": ["concat", ["number-format", ["get", "ele"], {}], " ft"]
});

Die thresholds geben den Abstand der Zwischen- und Hauptlinien für jede Zoomstufe an, und das Plugin setzt level auf Hauptlinien auf 1; die Layer oben funktionieren also unverändert. Jede Geländekachel, die es liest, zählt wie eine Kachel mit Höhenlinien als eine Kartenkachel.

Kacheln

Jede Kachel mit Höhenlinien zählt als eine Kartenkachel. Nur die Zoomstufen 10 bis 14 laden sie, und Kacheln ohne Linien, über dem Meer oder flachem Land, antworten mit HTTP 204 und sind kostenlos. Die erste Ansicht des Stils Outdoor auf Zoomstufe 13,2, 1280 × 720 Pixel, mit Vektor-, Gelände-, Höhenlinien- und Wegkacheln, lud 19 Kacheln. Jedes Konto enthält 100'000 Kacheln im Monat.