Zelfstudie: GeoJSON-gegevens laden in Azure Kaarten Android SDK

  • Artikel

In deze zelfstudie wordt u begeleid bij het importeren van een GeoJSON-bestand met locatiegegevens in de Azure Maps Android SDK. In deze zelfstudie leert u het volgende:

  • Azure Maps toevoegen aan een Android-toepassing.
  • Een gegevensbron maken en laden in een GeoJSON-bestand vanuit een lokaal bestand of vanaf internet.
  • De gegevens op de kaart weergeven.
  • Interactie met de gegevens op de kaarten om de details ervan weer te geven.

Notitie

Buitengebruikstelling van Azure Kaarten Android SDK

De Azure Kaarten Native SDK voor Android is nu afgeschaft en wordt buiten gebruik gesteld op 3-31-25. Om serviceonderbrekingen te voorkomen, migreert u tegen 3-31-25 naar de Azure Kaarten Web SDK. Zie de migratiehandleiding voor Azure Kaarten Android SDK voor meer informatie.

Vereisten

  1. Voltooi de quickstart: Een Android-app maken. In deze zelfstudie wordt de code uitgebreid die in die quickstart wordt gebruikt.
  2. Download het bestand Sample Points of Interest.

GeoJSON-gegevens importeren vanaf internet of uit een map met assets

In de meeste GeoJSON-bestanden zijn alle gegevens verpakt in een FeatureCollection. Als in dit scenario geoJSON-bestanden als tekenreeks in de toepassing worden geladen, kunnen ze worden doorgegeven aan de statische fromJson methode van de functieverzameling, waardoor de tekenreeks wordt gedeserialiseerd in een GeoJSON-object FeatureCollection dat kan worden toegevoegd aan de kaart.

De volgende stappen laten zien hoe u een GeoJSON-bestand in de toepassing kunt importeren en vervolgens deserialiseren als een GeoJSON FeatureCollection-object.

  1. Voltooi de quickstart: Een Android-app maken als de volgende stappen zijn gebaseerd op deze toepassing.
  2. Klik in het projectvenster van Android Studio met de rechtermuisknop op de app-map en ga naar New > Folder > Assets Folder.
  3. Sleep het GeoJSON-bestand Sample Points of Interest naar de map met assets.
  1. Ga naar het MainActivity.java-bestand en voeg de volgende code toe in de callback voor de mapControl.onReady gebeurtenis, binnen de onCreate methode. Met deze code wordt het SamplePoiDataSet.json-bestand uit de map assets in een gegevensbron geladen met behulp van importDataFromUrl de methode en wordt het vervolgens aan de kaart toegevoegd.
//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. Ga naar het bestand MainActivity.kt en voeg de volgende code toe in de callback voor de mapControl.onReady gebeurtenis, binnen de onCreate methode. Met deze code wordt het SamplePoiDataSet.json-bestand uit de map assets in een gegevensbron geladen met behulp van importDataFromUrl de methode en wordt het vervolgens aan de kaart toegevoegd.
//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. Met behulp van de code om de GeoJSON-gegevens een gegevensbron te laden, moeten we nu opgeven hoe die gegevens op de kaart moeten worden weergegeven. Er zijn verschillende weergavelagen voor puntgegevens, waarvan de bellenlaag, de symboollaag en de heatmap-laag de meestgebruikte lagen zijn. Voeg na de code voor het importeren van de gegevens de volgende code toe om de gegevens in een bellenlaag weer te geven in de callback voor de mapControl.onReady-gebeurtenis.
//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. Klik in het projectvenster van Android Studio met de rechtermuisknop op de indelingsmap onder het pad app > res > layout en ga naar New > File. Maak een nieuw bestand met de naam popup_text.xml.
  2. Open het bestand popup_text.xml . Als het bestand wordt geopend in een ontwerpweergave, klikt u met de rechtermuisknop op het scherm en selecteert u Ga naar XML. Kopieer en plak de volgende XML in dit bestand. Met deze XML wordt een eenvoudige indeling gemaakt die kan worden gebruikt met een pop-up en een tekstweergave bevat.
<?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. Ga terug naar het MainActivity.java bestand en voeg na de code voor de bellenlaag de volgende code toe om een herbruikbare pop-up te maken.
//Create a popup and add it to the map.
Popup popup = new Popup();
map.popups.add(popup);

//Close it initially.
popup.close();
  1. Ga terug naar het bestand MainActivity.kt en voeg na de code voor de bellenlaag de volgende code toe om een herbruikbare pop-up te maken.
//Create a popup and add it to the map.
val popup = Popup()
map.popups.add(popup)

//Close it initially.
popup.close()
  1. Voeg de volgende code toe om een click gebeurtenis toe te voegen aan de bellenlaag. Wanneer een bel in de bellenlaag wordt getikt, wordt de gebeurtenis geactiveerd en worden details opgehaald uit de eigenschappen van de geselecteerde functie, maakt u een weergave met behulp van het popup_text.xml indelingsbestand, geeft u deze door als inhoud in de pop-up en geeft u vervolgens de pop-up weer op de positie van de functies.
//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. Voer de toepassing uit. Er wordt een kaart weergegeven met bellen die voor elke locatie in het GeoJSON-bestand worden weergegeven. Als u op een bel tikt, wordt er een pop-up weergegeven met de naam en het entiteitstype van de functie die is aangeraakt.

    Kaart van gegevens uit een GeoJSON-bestand dat wordt weergegeven met een pop-up die wordt geopend wanneer de locatie is getikt

Resources opschonen

Voer de volgende stappen uit om de resources uit deze zelfstudie op te schonen:

  1. Sluit Android Studio en verwijder de toepassing die u hebt gemaakt.
  2. Als u de toepassing op een extern apparaat hebt getest, verwijdert u de toepassing van dat apparaat.

Volgende stappen

Voor meer voorbeelden van code en interactieve codering:

Gegevensgestuurde stijlexpressies gebruiken

Functie-informatie weergeven

Een symboollaag toevoegen

Een lijnlaag toevoegen

Een polygoonlaag toevoegen