Zelfstudie: GeoJSON-gegevens laden in Azure Maps Android SDK

  • Artikel
  • 5 minuten om te lezen

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.

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 de GeoJSON-bestanden in dit scenario als een tekenreeks in de toepassing worden geladen, kunnen ze worden doorgegeven aan de statische methode van de functieverzameling, waarmee de tekenreeks wordt gedeserialiseert in een GeoJSON-object dat kan worden toegevoegd aan de fromJson FeatureCollection 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: Maak een Android-app omdat de volgende stappen boven op deze toepassing worden gebouwd.
  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 bestand MainActivity.java en voeg de volgende code toe in de callback voor de mapControl.onReady gebeurtenis, in de onCreate methode . Met deze code wordt deSamplePoiDataSet.jsbestand uit de map assets geladen in een gegevensbron met behulp van de methode en vervolgens toegevoegd aan de importDataFromUrl kaart.
//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 deSamplePoiDataSet.jsbestand uit de map assets geladen in een gegevensbron met behulp van de methode en vervolgens toegevoegd aan de importDataFromUrl kaart.
//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 in een gegevensbron te laden, moeten we nu opgeven hoe die gegevens moeten worden weergegeven op de kaart. 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 projectpaneel 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 naampopup_text.xml.
  2. Open het popup_text.xml bestand. 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 maakt u een eenvoudige indeling die kan worden gebruikt met een pop-upvenster en die 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. Terug in het bestand MainActivity.java 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. Terug in 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 klikgebeurtenis aan de bellenlaag te koppelen. Wanneer er op een bel in de bellenlaag wordt getikt, wordt de gebeurtenis in werking getikt en worden er enkele details opgehaald uit de eigenschappen van de geselecteerde functie, maakt u een weergave met behulp van hetpopup_text.xml-indelingsbestand, geeft u deze als inhoud door aan de pop-up en geeft u vervolgens de pop-up weer op de functiepositie.
//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 over elke locatie in het GeoJSON-bestand. Als u op een bel tikt, wordt een pop-up met de naam en het entiteitstype van de functie weergegeven.

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

Resources opschonen

Volg de volgende stappen 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