Partager via

Tutoriel : Charger des données GeoJSON dans le kit Android SDK Azure Maps

  • Article

Ce tutoriel vous guide tout au long du processus d’importation d’un fichier GeoJSON de données de localisation dans le kit Android SDK Azure Maps. Dans ce tutoriel, vous allez découvrir comment :

  • Ajouter Azure Maps dans une application Android
  • Créer une source de données et charger un fichier GeoJSON à partir d’un fichier local ou du web
  • Afficher les données sur la carte
  • Interagissez avec les données sur les mappages pour afficher ses détails.

Remarque

Mise hors service d’Android SDK Azure Maps

Le kit de développement logiciel (SDK) natif Azure Maps pour Android est désormais déconseillé et va être mis hors service le 31 mars 2025. Pour éviter toute interruption de service, nous vous recommandons de migrer vers le kit de développement logiciel (SDK) web Azure Maps avant le 31 mars 2025. Pour plus d’informations, consultez le Guide de migration Android SDK Azure Maps.

Prérequis

  1. Suivez le Démarrage rapide : Créer une application Android. Ce tutoriel étend le code utilisé dans ce guide de démarrage rapide.
  2. Téléchargez le fichier GeoJSON Sample Points of Interest.

Importer des données GeoJSON à partir d’un dossier web ou de ressources

La plupart des fichiers GeoJSON wrappent toutes les données dans une FeatureCollection. Sachant cela, si les fichiers GeoJSON sont chargés dans l’application sous la forme d’une chaîne, ils peuvent être transmis dans la méthode fromJson statique de la collection de fonctionnalités, qui désérialise la chaîne en un objet FeatureCollection GeoJSON pouvant être ajouté à la carte.

Les étapes suivantes expliquent comment importer un fichier GeoJSON dans l’application et le désérialiser en tant qu’objet FeatureCollection GeoJSON.

  1. Suivez le Démarrage rapide : Créer une application Android, car les étapes qui suivent s’appuient sur cette application.
  2. Dans le panneau de projet d’Android Studio, cliquez avec le bouton droit sur le dossier app, puis accédez à New > Folder > Assets Folder.
  3. Glissez-déposez le fichier GeoJSON Sample Points of Interest dans le dossier des ressources.
  1. Accédez au fichier MainActivity.java, puis ajoutez le code suivant dans le rappel de l’événement mapControl.onReady à l’intérieur de la méthode onCreate. Ce code charge le fichier SamplePoiDataSet.json à partir du dossier de ressources dans une source de données à l’aide de la méthode importDataFromUrl, puis l’ajoute au mappage.
//Create a data source and add it to the map.
DataSource source = new DataSource();

//Import the geojson data and add it to the data source.
source.importDataFromUrl("asset://SamplePoiDataSet.json");

//Add data source to the map.
map.sources.add(source);
  1. Accédez au fichier MainActivity.kt, puis ajoutez le code suivant dans le rappel de l’événement mapControl.onReady à l’intérieur de la méthode onCreate. Ce code charge le fichier SamplePoiDataSet.json à partir du dossier de ressources dans une source de données à l’aide de la méthode importDataFromUrl, puis l’ajoute au mappage.
//Create a data source and add it to the map.
DataSource source = new DataSource();

//Import the geojson data and add it to the data source.
source.importDataFromUrl("asset://SamplePoiDataSet.json");

//Add data source to the map.
map.sources.add(source);
  1. À l’aide du code permettant de charger les données GeoJSON d’une source de données, nous devons maintenant spécifier de quelle manière ces données doivent être affichées sur la carte. Il existe différents calques de rendu pour les données de point. Les calques les plus couramment utilisés sont le calque de bulles, le calque de symboles et le calque de carte thermique. Ajoutez le code suivant pour afficher les données dans un calque de bulles, dans le rappel de l’événement mapControl.onReady, après le code permettant d’importer les données.
//Create a layer and add it to the map.
BubbleLayer layer = new BubbleLayer(source);
map.layers.add(layer);

//Create a layer and add it to the map.
val layer = new BubbleLayer(source)
map.layers.add(layer)
  1. Dans le panneau de projet d’Android Studio, cliquez avec le bouton droit sur le dossier layout dans le chemin app > res > layout, puis accédez à New > File. Créez un nouveau fichier appelé popup_text.xml.
  2. Ouvrez le fichier popup_text.xml. Si le fichier s'ouvre dans une vue de concepteur, cliquez avec le bouton droit sur l'écran et sélectionnez Aller au XML. Copiez-collez le code XML suivant dans ce fichier. Ce code XML crée une mise en page simple qui peut être utilisée avec une fenêtre contextuelle et contient un affichage de texte.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    android:layout_margin="8dp"
    android:padding="10dp"

    android:layout_height="match_parent">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:text=""
        android:textSize="18dp"
        android:textColor="#222"
        android:layout_height="wrap_content"
        android:width="200dp"/>

</RelativeLayout>
  1. Revenez au fichier MainActivity.java et, après le code de la couche de bulles, ajoutez le code suivant pour créer un menu contextuel réutilisable.
//Create a popup and add it to the map.
Popup popup = new Popup();
map.popups.add(popup);

//Close it initially.
popup.close();
  1. Revenez au fichier MainActivity.kt et, après le code de la couche de bulles, ajoutez le code suivant pour créer un menu contextuel réutilisable.
//Create a popup and add it to the map.
val popup = Popup()
map.popups.add(popup)

//Close it initially.
popup.close()
  1. Ajoutez le code suivant pour attacher un événement click à la couche de bulles. Lorsqu'une bulle dans la couche de bulles est tapée, l'événement se déclenche et récupère les détails à partir des propriétés de l'entité sélectionnée, créez une vue à l'aide du fichier de mise en page popup_text.xml, transmettez-la en tant que contenu dans la fenêtre contextuelle, puis affichez la fenêtre contextuelle à la caractéristiques position.
//Add a click event to the layer.
map.events.add((OnFeatureClick)(feature) -> {
    //Get the first feature and it's properties.
    Feature f = feature.get(0);
    JsonObject props = f.properties();

    //Retrieve the custom layout for the popup.
    View customView = LayoutInflater.from(this).inflate(R.layout.popup_text, null);

    //Display the name and entity type information of the feature into the text view of the popup layout.
    TextView tv = customView.findViewById(R.id.message);
    tv.setText("%s\n%s",
        f.getStringProperty("Name"),
        f.getStringProperty("EntityType")
    );

    //Get the position of the clicked feature.
    Position pos = MapMath.getPosition((Point)f.geometry());

    //Set the options on the popup.
    popup.setOptions(
            //Set the popups position.
            position(pos),

            //Set the anchor point of the popup content.
            anchor(AnchorType.BOTTOM),

            //Set the content of the popup.
            content(customView)
    );

    //Open the popup.
    popup.open();

    //Return a boolean indicating if event should be consumed or continue to bubble up.
    return false;
}, layer);

//Add a click event to the layer.
map.events.add(OnFeatureClick { feature: List<Feature> ->
    //Get the first feature and it's properties.
    val f = feature[0]
    val props = f.properties()

    //Retrieve the custom layout for the popup.
    val customView: View = LayoutInflater.from(this).inflate(R.layout.popup_text, null)

    //Display the name and entity type information of the feature into the text view of the popup layout.
    val tv = customView.findViewById<TextView>(R.id.message)
    tv.text = String.format(
        "%s\n%s",
        f.getStringProperty("Name"),
        f.getStringProperty("EntityType")
    )

    //Get the position of the clicked feature.
    val pos = MapMath.getPosition(f.geometry() as Point?)

    //Set the options on the popup.
    popup.setOptions( //Set the popups position.
        position(pos),  //Set the anchor point of the popup content.
        anchor(AnchorType.BOTTOM),  //Set the content of the popup.
        content(customView)
    )

    //Open the popup.
    popup.open()

    //Return a boolean indicating if event should be consumed or continue to bubble up.
    false
} as OnFeatureClick, layer)

  1. Exécutez l'application. Une carte s’affiche avec des bulles superposées pour chaque localisation du fichier GeoJSON. En appuyant sur une bulle, vous affichez une fenêtre contextuelle avec le nom et le type d’entité de la fonctionnalité touchée.

    Mappage de données à partir d’un fichier GeoJSON affiché avec une fenêtre contextuelle ouverte lorsque l’emplacement est touché

Nettoyer les ressources

Suivez les étapes ci-dessous pour nettoyer les ressources de ce tutoriel :

  1. Fermez Android Studio, puis supprimez l’application que vous avez créée.
  2. Si vous avez testé l’application sur un appareil externe, désinstallez l’application de cet appareil.

Étapes suivantes

Pour bénéficier de davantage d’exemples de code et d’une expérience de codage interactive :

Utiliser des expressions de style basées sur les données

Afficher des informations sur les caractéristiques

Ajouter une couche de symboles

Ajouter une couche de lignes

Ajouter une couche de polygones