Zurück

19.12.2016

3D-Kartenvisualisierung mit Mapbox GL JS

Das Ergebnis: Eine 3D-Karte, mit Mapbox entwickelt Ein heller Kartenstil im Mapbox Studio Styles Editor NUTS 2-Flächendaten im Mapbox Studio Tileset Editor

Mapbox GL JS ist eine JavaScript-Bibliothek, die WebGL zum Rendern von interaktiven Karten aus Vektor-Tiles und Mapbox Styles verwendet. Unser Frontend-Entwickler Robert Katzki zeigt, wie man eine Karte mit 3D-Funktionalität erstellt und eine 3D-Datenvisualisierung hinzufügt.

Beim letzten Update hat Mapbox erweiterte Funktionalitäten hinzugefügt, um 3D-Visualisierungen auf einer Karte zu erstellen. Neben den klassischen fill, line und weiteren Datenschichten gibt es jetzt eine neue Option: fill-extrusion. Im folgenden Artikel werde ich zeigen, wie man eine Karte mit 3D-Funktionalität erstellt und eine 3D-Datenvisualisierung hinzufügt. Wir werden die Arbeitslosigkeit in Europa für Personen ab 15 Jahren auf einer Ebene, NUTS 2, visualisieren. Das Ergebnis wird aussehen, wie in der Galerie gezeigt.

Eine Basiskarte erstellen

Um unsere Daten anzeigen zu lassen, benötigen wir eine Basis-Karte, die diese Daten wiedergibt. Erstellen Sie einen neuen einfachen Stil mit Mapbox Studio. Es gibt bereits einige dunkle und helle Basiskarten als Voreinstellung (siehe Bild oben). Einfach die bevorzugte auswählen und bei Bedarf nach den eigenen Vorlieben ändern. Notieren Sie sich die ID, die Mapbox diesem Kartenstil zuweist. 

Flächen auf der Karte anzeigen

Für eine 3D-Datenvisualisierung brauchen wir einige Flächenformen, um die Daten zu rendern und zuzuordnen. Einige freie Daten und Gebiete sind auf  Eurostat. Die NUTS Flächenformen können in der gewünschten Auflösung heruntergeladen werden. Ich habe ein Shapefile mit einer Skala von 1:3 Millionen gewählt (siehe Screenshot oben). Jetzt wird das gezippte Shapefile in den Mapbox Studio Tileset-Editor hochgeladen. Auch hier muss die ID von Mapbox notiert werden. 

Mit weiteren Daten anreichern

Nun brauchen wir weitere Daten, mit denen wir eine schöne Visualisierung erstellen können. In diesem Fall nehmen wir Arbeitslosendaten und filtern sie nach eigenem Belieben. Mit diesen Daten haben wir nun einen Datensatz zur Berechnung. Jetzt möchte ich für jeden der Bereiche eine andere Farbe nehmen, abhängig von der Arbeitslosenquote. Ich nutze einen Farbverlauf: Je höher die Arbeitslosigkeit desto dunkler ist das Rot des entsprechenden Bereiches.

Um das Ergebnis nicht nur über Farben deutlich zu machen, werden wir die Flächenformen je nach Arbeitslosenquote anheben. Je höher eine Fläche ist, desto höher ist die Arbeitslosenquote in diesem Gebiet. Um eine Karte mit den NUTS-Gebieten zusammen mit den Daten der Arbeitslosenrate zu erstellen, gehen wir wie folgt vor:


// Create the mapbox map
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/ubilabs/ciw7jzkux000i2qnu6blrgeks',
  center: [1.230, 55.204],
  zoom: 3
});

map.on('load', () => {
  // Add the NUTS data as a source to use
  map.addSource('NUTS2', {
    type: 'vector',
    url: 'mapbox://ubilabs.2e400788'
  });

  // Create a layer from the NUTS data
  map.addLayer(
    {
      source: 'NUTS2',
      'source-layer': 'NUTS2_3m',
      id: 'NUTS2-layer',
      type: 'fill-extrusion',
      paint: {
        'fill-extrusion-opacity': 0.75,
        'fill-extrusion-color': {
          property: 'NUTS_ID',
          type: 'categorical',
          // Get the colors depending on their value
          stops: getColorStops()
        },
        'fill-extrusion-height': {
          property: 'NUTS_ID',
          type: 'categorical',
          // Get the height depending on their value
          stops: getHeightStops()
        }
      }
    },
    'waterway-label'
  );
});

Die Funktionen getColorStops() and getHeightStops() geben jeweils ein Array zurück, das einem berechneten Wert anhand der Arbeitslosenquote in diesem Bereich eine Bereichskennung aus den NUTS-Shapes zuweist.

Das Ergebnis

Mit nur wenig Code erhalten wir eine großartige, fast schon haptische 3D-Karte (mit der rechten Maustaste klicken und verschieben, um die Ansicht zu ändern):​

See the Pen 3D map visualizations with Mapbox GL JS by Robert Katzki (@ro-ka) on CodePen.

Der Artikel ist auch hier erschienen: https://robert.katzki.de/posts/3d-map-visualizations-with-mapbox-gl-js