Självstudie: Läsa in GeoJSON-data i Azure Kartor Android SDK

  • Artikel
  • 5 minuter för att läsa

Den här självstudien vägleder dig genom processen för att importera en GeoJSON-fil med platsdata till Azure Kartor Android SDK. I den här guiden får du lära dig att:

  • Lägga till Azure Kartor till ett Android-program.
  • Skapa en datakälla och läs in den i en GeoJSON-fil från en lokal fil eller webben.
  • Visa data på kartan.
  • Interagera med data på kartorna för att visa dess information.

Förutsättningar

  1. Slutför snabbstarten: Skapa en Android-app. Den här självstudien utökar koden som används i den snabbstarten.
  2. Ladda ned geoJSON-filen med exempelpunkter av intresse.

Importera GeoJSON-data från webb- eller resursmappen

De flesta GeoJSON-filer omsluter alla data i en FeatureCollection . Med det här scenariot i åtanke, om GeoJSON-filerna läses in i programmet som en sträng, kan de skickas till funktionssamlingens statiska metod, vilket deserialiserar strängen till ett GeoJSON-objekt som kan läggas till på fromJson FeatureCollection kartan.

Följande steg visar hur du importerar en GeoJSON-fil till programmet och deserialiserar den som ett FeatureCollection GeoJSON-objekt.

  1. Slutför snabbstarten: Skapa en Android-app när följande steg byggs ovanpå det här programmet.
  2. I projektpanelen i Android Studio högerklickar du på appmappen och går till New > Folder > Assets Folder .
  3. Dra och släpp filen Sample Points of Interest GeoJSON till mappen assets.
  1. Gå till filen MainActivity.java och lägg till följande kod i återanropet mapControl.onReady för händelsen i metoden onCreate . Den här koden läser SamplePoiDataSet.jspå filen från mappen assets till en datakälla med hjälp av metoden och lägger sedan till den på importDataFromUrl kartan.
//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. Gå till filen MainActivity.kt och lägg till följande kod inuti återanropet mapControl.onReady för händelsen i metoden onCreate . Den här koden läser SamplePoiDataSet.jspå filen från mappen assets till en datakälla med hjälp av metoden och lägger sedan till den på importDataFromUrl kartan.
//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. Med hjälp av koden för att läsa in GeoJSON-data som en datakälla måste vi nu ange hur dessa data ska visas på kartan. Det finns flera olika renderingslager för punktdata. Bubbelskikt, symbolskiktoch heatkartskikt är de vanligaste lagren. Lägg till följande kod för att återge data i ett bubbelskikt i återanropet mapControl.onReady för händelsen efter koden för att importera data.
//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. I projektpanelen i Android Studio högerklickar du på layoutmappen under sökvägen app > res > layout och går till New > File . Skapa en ny fil med namnetpopup_text.xml.
  2. Öppna popup_text.xml fil. Om filen öppnas i en designervy högerklickar du på skärmen och väljer "Gå till XML". Kopiera och klistra in följande XML i den här filen. Den här XML-filen skapar en enkel layout som kan användas med ett popup-fönster och som innehåller en textvy.
<?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. Gå tillbaka till filen MainActivity.java och efter koden för bubbellagret lägger du till följande kod för att skapa ett återanvändbart popup-fönster.
//Create a popup and add it to the map.
Popup popup = new Popup();
map.popups.add(popup);

//Close it initially.
popup.close();
  1. Gå tillbaka till filen MainActivity.kt och efter koden för bubbellagret lägger du till följande kod för att skapa ett återanvändbart popup-fönster.
//Create a popup and add it to the map.
val popup = Popup()
map.popups.add(popup)

//Close it initially.
popup.close()
  1. Lägg till följande kod för att koppla en klickhändelse till bubbelskiktet. När en bubbla i bubbellagret trycks, kommer händelsen att skjutas upp och hämta information från egenskaperna för den valda funktionen, skapa en vy med hjälp avpopup_text.xml-layoutfilen, skicka in den som innehåll i popup-rutan och sedan visa popup-meddelandet vid funktionspositionen.
//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. Kör appen. En karta visas med bubblor överlagrade för varje plats i GeoJSON-filen. Om du trycker på en bubbla visas ett popup-fönster med namnet och entitetstypen för funktionen vidrörd.

    Karta över data från en GeoJSON-fil som visas med ett popup-fönster som öppnas när platsen trycks på

Rensa resurser

Gör följande för att rensa resurserna från den här självstudien:

  1. Stäng Android Studio och ta bort programmet som du skapade.
  2. Om du har testat programmet på en extern enhet avinstallerar du programmet från den enheten.

Nästa steg

Fler kodexempel och en interaktiv kodupplevelse:

Använda datadrivna formatuttryck

Visa funktionsinformation

Lägga till ett symbolskikt

Lägg till ett linjeskikt

Lägg till ett polygonskikt