Visualiser vos données avec BigQuery et l'API Dataset

Ce document fournit une architecture de référence et un exemple pour créer des visualisations de données cartographiques avec des données de localisation dans BigQuery Google Cloud Platform et l'API Google Maps Platform Datasets. Par exemple, vous pouvez analyser des données municipales ouvertes, créer une carte de couverture des télécommunications ou visualiser les traces des déplacements des véhicules mobiles.

Les visualisations des données cartographiques sont un outil puissant pour engager les utilisateurs et découvrir des informations spatiales dans les données de localisation. Les données de localisation sont des données comportant des éléments géographiques de type point, ligne ou polygone. Par exemple, les cartes météorologiques aident les consommateurs à comprendre et à planifier leurs voyages, ainsi qu'à se préparer aux orages. Les cartes d'informatique décisionnelle aident les utilisateurs à dégager des insights de leur analyse de données, tandis que les cartes des télécommunications aident les utilisateurs à comprendre les besoins de couverture et de qualité dans une zone desservie donnée.

Cependant, il est difficile pour les développeurs d'applications de créer de grandes visualisations de données cartographiques performantes et offrant une excellente expérience utilisateur. Les données volumineuses doivent être chargées dans la mémoire côté client, ce qui ralentit le premier chargement de la carte. L'image doit être performante sur tous les appareils, y compris les téléphones mobiles bas de gamme qui présentent des contraintes en termes de mémoire et de GPU. Enfin, les développeurs doivent choisir une grande bibliothèque de rendu de données portable, fiable et performante avec des données volumineuses.

Architecture de référence

Le développement d'applications avec des visualisations de données volumineuses nécessite deux composants principaux.

  1. Backend du client : toutes les données de l'application backend et tels que le traitement et le stockage.
  2. Client client : interface utilisateur de votre application avec un composant de visualisation de la carte.

Vous trouverez ci-dessous un schéma système illustrant la façon dont ces deux composants interagissent avec l'utilisateur de l'application, Google Cloud et Google Maps Platform, pour créer une application de visualisation de données volumineuse.

schéma de l'architecture

<ph type="x-smartling-placeholder">

Considérations de conception

Vous devez prendre en compte un certain nombre de considérations de conception pour créer une visualisation des données performante à l'aide de Google Cloud et Google Maps Platform.

  1. Taille des données sources et fréquence de mise à jour.
    1. Si la taille des données source au format GeoJSON est inférieure à 5 Mo ou si les mises à jour sont très fréquentes (par exemple, des prévisions de radars météorologiques en direct, envisagez de diffuser les données sous la forme d'un objet Geojson côté client dans votre application et de les afficher avec un calque deck.gl.
    2. Si vos données font plus de 5 Mo et que les mises à jour ne sont pas effectuées plus d'une fois par heure, consultez l'architecture de l'API Datasets dans ce document.
      1. Les ensembles de données acceptent des fichiers jusqu'à 350 Mo.
      2. Si vos données dépassent 350 Mo, envisagez d'éliminer ou de simplifier les données géométriques dans le fichier source avant de les transmettre aux ensembles de données (voir la section "Élagage des données" ci-dessous).
  2. Schéma et format <ph type="x-smartling-placeholder">
      </ph>
    1. Assurez-vous que vos données disposent d'une propriété d'ID unique pour chaque caractéristique. Un identifiant unique vous permet de sélectionner et de styliser un élément géographique spécifique, ou d'associer des données à un élément géographique pour le visualiser (par exemple, en appliquant un style à un élément géographique sélectionné sur l'événement utilisateur "clic").
    2. Mettez en forme vos données au format CSV ou GeoJSON conformément à la spécification de l'API Datasets en utilisant des noms de colonne, des types de données et des types d'objets GeoJSON valides.
    3. Pour créer facilement des ensembles de données à partir de BigQuery, créez une colonne nommée wkt dans votre fichier d'exportation CSV SQL. Les ensembles de données permettent d'importer des données géométriques à partir d'un fichier CSV au format texte connu (WKT) à partir d'une colonne nommée wkt.
    4. Vérifiez que vos données correspondent à une géométrie et à des types de données valides. Par exemple, le fichier GeoJSON doit se trouver dans le système de coordonnées WGS84, l'ordre d'enroulement de la géométrie, etc.
    5. Utilisez un outil tel que geojson-validate pour vous assurer que toutes les géométries d'un fichier source sont valides, ou à l'aide d'ogr2ogr pour transformer un fichier source entre différents formats ou systèmes de coordonnées.
  3. Élagage de données <ph type="x-smartling-placeholder">
      </ph>
    1. Réduisez le nombre de propriétés des éléments géographiques. Vous pouvez associer des propriétés supplémentaires à une caractéristique au moment de l'exécution à l'aide d'une clé d'identifiant unique (exemple).
    2. Dans la mesure du possible, utilisez des types de données entiers pour les objets de propriété afin de réduire l'espace de stockage des cartes, afin que celles-ci puissent se charger via HTTPS dans une application cliente.
    3. simplifier et/ou agréger des géométries de caractéristiques très complexes ; envisagez d'utiliser des fonctions BigQuery telles que ST_Simplify sur les géométries complexes de polygones afin de réduire la taille du fichier source et d'améliorer les performances des cartes.
  4. Carrelage <ph type="x-smartling-placeholder">
      </ph>
    1. L'API Google Maps Datasets crée des tuiles de carte à partir de votre fichier de données source pour une utilisation avec un SDK Maps Web ou mobile.
    2. Les tuiles de carte sont un système d'indexation basé sur le zoom qui offre des moyens plus efficaces de charger des données dans une application visuelle.
    3. Les tuiles de carte peuvent déposer des éléments géographiques denses ou complexes à des niveaux de zoom inférieurs. Lorsqu'un utilisateur fait un zoom arrière sur un état ou un pays (par exemple, z5-z12), l'apparence peut être différente de celle observée lorsqu'il fait un zoom avant sur une ville ou un quartier (par exemple, z13-z18).

Exemple : Voies ferrées à Londres

Dans cet exemple, nous allons appliquer l'architecture de référence pour créer une application Web à l'aide de GCP et de Google Maps, qui permet de visualiser toutes les voies ferrées de Londres à partir de données Open Street Map (OSM).

Prérequis

  1. Accès au bac à sable BigQuery et à Cloud Console
  2. Assurez-vous d'avoir configuré un projet GCP et un compte de facturation.

Étape 1 : Interroger les données dans BigQuery

Accédez à Ensembles de données publics BigQuery. L'ensemble de données "bigquery-public-data" et le tableau geo_openstreetmap.planet_features contient les données Open Street Map (OSM) du globe entier, y compris tous les éléments géographiques possibles. Découvrez toutes les fonctionnalités disponibles pour effectuer des requêtes dans le wiki OSM, y compris amenity, road et landuse.

Utilisez Cloud Shell ou la console Cloud de BigQuery(https://console.cloud.google.com) pour interroger la table à l'aide de SQL. L'extrait de code ci-dessous exécute la commande bq query pour interroger toutes les voies ferrées filtrées par rapport à Londres, à l'aide d'un cadre de délimitation et de la fonction ST_Intersects().

Pour exécuter cette requête à partir de Cloud Shell, exécutez l'extrait de code suivant, en mettant à jour l'ID de projet, l'ensemble de données et le nom de table de votre environnement.

bq query --use_legacy_sql=false \
--destination_table PROJECTID:DATASET.TABLENAME \
--replace \
'SELECT
osm_id, 
feature_type,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "name") AS name,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "railway") AS railway,
geometry as wkt
FROM   bigquery-public-data.geo_openstreetmap.planet_features
WHERE ("railway") IN (SELECT key FROM unnest(all_tags)) 
    AND ST_Intersects(
    geometry,
ST_MakePolygon(ST_MakeLine(
      [ST_GeogPoint(-0.549370, 51.725346),
      ST_GeogPoint(-0.549370, 51.2529407),
      ST_GeogPoint(0.3110581, 51.25294),
      ST_GeogPoint(0.3110581, 51.725346),
      ST_GeogPoint(-0.549370, 51.725346)]
    ))
   )'

La requête renvoie:

  1. un identifiant unique pour chaque fonctionnalité osm_id
  2. les feature_type, par exemple points, lignes, etc.
  3. name de la caractéristique (par exemple, Paddington Station
  4. Le type railway, par exemple principale, tourisme, militaire, etc.
  5. wkt de l'élément géographique : géométrie de type point, ligne ou polygone au format WKT. WKT est le format de données standard renvoyé par les colonnes de géographie de BigQuery dans une requête.

Remarque : Pour valider visuellement les résultats de votre requête avant de créer un ensemble de données, vous pouvez visualiser rapidement vos données dans un tableau de bord à partir de BigQuery à l'aide de Looker Studio.

Pour exporter la table vers un fichier CSV stocké dans un bucket Google Cloud Storage, exécutez la commande bq extract dans Cloud Shell:

bq extract \
--destination_format "CSV" \
--field_delimiter "," \
--print_header=true \
PROJECTID:DATASET.TABLENAME \
gs://BUCKET/FILENAME.csv

Remarque:Vous pouvez automatiser chaque étape à l'aide de Cloud Scheduler pour mettre à jour vos données régulièrement.

Étape 2 : Créez un ensemble de données à partir de votre fichier CSV

Créez ensuite un ensemble de données Google Maps Platform à partir du résultat de la requête sur Google Cloud Storage (GCS). L'API Datasets vous permet de créer un ensemble de données, puis d'y importer des données à partir d'un fichier hébergé sur GCS.

Pour commencer, activez l'API Maps Datasets dans votre projet GCP et consultez la documentation sur l'API. Des bibliothèques clientes Python et Node.js permettent d'appeler l'API Datasets à partir d'une logique dans le backend de votre application. De plus, l'IUG des ensembles de données permet de créer manuellement des ensembles de données dans la console Cloud.

Une fois l'importation de votre ensemble de données terminée, vous pouvez le prévisualiser dans l'IUG.

Aperçu de l&#39;ensemble de données

Étape 4 : Associez votre ensemble de données à un ID de carte

Une fois votre ensemble de données créé, vous pouvez créer un ID de carte avec un style de carte associé. Dans l'éditeur de style de carte, vous pouvez associer un mapId et un style à l'ensemble de données. Vous pouvez également appliquer les styles de cartes basés dans le cloud pour personnaliser l'apparence de votre carte.

Étape 5 : Créez la visualisation de la carte de votre application cliente

Enfin, vous pouvez ajouter l'ensemble de données à une application de visualisation des données côté client à l'aide de l'API Maps JS. Initialisez votre objet map en utilisant l'élément mapID associé à votre ensemble de données de l'étape précédente. Définissez ensuite le style et l'interactivité du calque de votre ensemble de données. Pour en savoir plus, consultez le guide complet des styles basés sur les données avec les ensembles de données.

Vous pouvez personnaliser le style, ajouter des gestionnaires d'événements pour le modifier de façon dynamique et effectuer d'autres actions à l'aide de l'API Maps JavaScript. Consultez des exemples dans la documentation. Dans cet exemple, nous allons définir une fonction setStyle pour créer le style d'élément géographique en point et en ligne en fonction de l'attribut "feature_type".

function setStyle(params) {
  const map.getDatasetFeatureLayer("your-dataset-id");
  const datasetFeature = params.feature;
  const type = datasetFeature.datasetAttributes["feature_type"];
if (type == "lines") {
           return {
             fillColor: "blue",
             strokeColor: "blue",
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
         } else if (type == "points") {
           return {
             fillColor: "black",
             strokeColor: "black",
             strokeOpacity: 0.5,
             pointRadius: 2,
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
     }
}

Remarque : Veillez à toujours ajouter l'attribution pour votre ensemble de données à votre application de cartographie. Pour ajouter une attribution OSM, suivez l'exemple de code d'attribution dans la documentation conformément aux consignes OSM.

Le code ci-dessus, lorsqu'il est initialisé dans une application Web monopage, génère le visuel de données cartographiques suivant:

plan de chemin de fer london

À partir de là, vous pouvez étendre votre visualisation de la carte dans la fonction setStyle() en ajoutant une logique pour filtrer les éléments géographiques, ajouter un style basé sur les interactions des utilisateurs et interagir avec le reste de votre application.

Conclusion

Dans cet article, nous avons présenté une architecture de référence et présenté un exemple d'implémentation d'une grande application de visualisation de données à l'aide de Google Cloud et Google Maps Platform. À l'aide de cette architecture de référence, vous pouvez créer des applications de visualisation des données de localisation à partir de n'importe quelle donnée dans GCP BigQuery et qui fonctionne sur n'importe quel appareil à l'aide de l'API Google Maps Datasets.

Actions suivantes

Autres références :

Contributeurs

Principaux auteurs:

  • Ryan Baumann, responsable ingénierie des solutions Google Maps Platform