Udostępnij za pośrednictwem

Samouczek: ładowanie danych GeoJSON do zestawu Azure Mapy Android SDK

  • Artykuł

Ten samouczek przeprowadzi Cię przez proces importowania pliku GeoJSON danych lokalizacji do zestawu Azure Mapy Android SDK. Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

  • Dodawanie Mapy platformy Azure do aplikacji systemu Android.
  • Utwórz źródło danych i załaduj go w pliku GeoJSON z pliku lokalnego lub sieci Web.
  • Wyświetl dane na mapie.
  • Interakcja z danymi na mapach w celu wyświetlenia ich szczegółów.

Uwaga

Wycofanie zestawu AZURE Mapy Android SDK

Zestaw Azure Mapy Native SDK dla systemu Android jest teraz przestarzały i zostanie wycofany w dniu 3.31.25. Aby uniknąć przerw w działaniu usługi, przeprowadź migrację do zestawu Sdk sieci Web usługi Azure Mapy do 31/31/25. Aby uzyskać więcej informacji, zobacz Przewodnik migracji zestawu SDK platformy Azure Mapy Android.

Wymagania wstępne

  1. Ukończ przewodnik Szybki start: tworzenie aplikacji dla systemu Android. Ten samouczek rozszerza kod używany w tym przewodniku Szybki start.
  2. Pobierz przykładowy plik GeoJSON punktów orientacyjnych.

Importowanie danych GeoJSON z folderu internetowego lub zawartości

Większość plików GeoJSON opakowuje wszystkie dane w obiekcie FeatureCollection. Mając na uwadze ten scenariusz, jeśli pliki GeoJSON są ładowane do aplikacji jako ciąg, można je przekazać do metody statycznej fromJson kolekcji funkcji, która deserializuje ciąg do obiektu GeoJSON FeatureCollection , który można dodać do mapy.

W poniższych krokach pokazano, jak zaimportować plik GeoJSON do aplikacji i zdeserializować go jako obiekt GeoJSON FeatureCollection .

  1. Ukończ przewodnik Szybki start: utwórz aplikację dla systemu Android, wykonując następujące kroki na podstawie tej aplikacji.
  2. W panelu projektu programu Android Studio kliknij prawym przyciskiem myszy folder aplikacji i przejdź do New > Folder > Assets Folderstrony .
  3. Przeciągnij i upuść plik GeoJSON z przykładowymi punktami zainteresowania do folderu zasobów.
  1. Przejdź do pliku MainActivity.java i dodaj następujący kod wewnątrz wywołania zwrotnego zdarzenia mapControl.onReady wewnątrz onCreate metody . Ten kod ładuje plik SamplePoiDataSet.json z folderu zasobów do źródła danych przy użyciu importDataFromUrl metody , a następnie dodaje go do mapy.
//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. Przejdź do pliku MainActivity.kt i dodaj następujący kod wewnątrz wywołania zwrotnego zdarzenia mapControl.onReady wewnątrz onCreate metody . Ten kod ładuje plik SamplePoiDataSet.json z folderu zasobów do źródła danych przy użyciu importDataFromUrl metody , a następnie dodaje go do mapy.
//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. Za pomocą kodu do załadowania danych GeoJSON źródło danych musimy teraz określić sposób wyświetlania tych danych na mapie. Istnieje kilka różnych warstw renderowania dla danych punktów; Warstwa bąbelkowa, warstwa symboli i warstwa mapy cieplnej to najczęściej używane warstwy. Dodaj następujący kod, aby renderować dane w warstwie bąbelkowej w wywołaniu zwrotnym zdarzenia mapControl.onReady po kodzie importowania danych.
//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. W panelu projektu programu Android Studio kliknij prawym przyciskiem myszy folder layout pod ścieżką app > res > layout i przejdź do New > Filestrony . Utwórz nowy plik o nazwie popup_text.xml.
  2. Otwórz plik popup_text.xml. Jeśli plik zostanie otwarty w widoku projektanta, kliknij prawym przyciskiem myszy ekran i wybierz polecenie Przejdź do kodu XML. Skopiuj i wklej następujący kod XML do tego pliku. Ten kod XML tworzy prosty układ, który może być używany z wyskakującym okienkiem i zawiera widok tekstu.
<?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. Wróć do pliku MainActivity.java i po kodzie dla warstwy bąbelkowej dodaj następujący kod, aby utworzyć okno podręczne wielokrotnego użytku.
//Create a popup and add it to the map.
Popup popup = new Popup();
map.popups.add(popup);

//Close it initially.
popup.close();
  1. Wróć do pliku MainActivity.kt i po kodzie warstwy bąbelkowej dodaj następujący kod, aby utworzyć okno podręczne wielokrotnego użytku.
//Create a popup and add it to the map.
val popup = Popup()
map.popups.add(popup)

//Close it initially.
popup.close()
  1. Dodaj następujący kod, aby dołączyć click zdarzenie do warstwy bąbelkowej. Po naciśnięciu bąbelka w warstwie bąbelkowej zdarzenie jest uruchamiane i pobiera szczegóły z właściwości wybranej funkcji, utwórz widok przy użyciu pliku układu popup_text.xml , przekaż go jako zawartość do wyskakującego okienka, a następnie wyświetl wyskakujące okienko w pozycji funkcji.
//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. Uruchom aplikację. Mapa jest wyświetlana z bąbelkami nakładanymi dla każdej lokalizacji w pliku GeoJSON. Naciśnięcie dowolnego bąbelka powoduje wyświetlenie wyskakującego okienka z nazwą i typem jednostki funkcji.

    Mapa danych z pliku GeoJSON wyświetlanego z wyskakującym okienkiem po naciśnięciu lokalizacji

Czyszczenie zasobów

Wykonaj następujące kroki, aby wyczyścić zasoby z tego samouczka:

  1. Zamknij program Android Studio i usuń utworzoną aplikację.
  2. Jeśli aplikacja jest testowana na urządzeniu zewnętrznym, odinstaluj aplikację z tego urządzenia.

Następne kroki

Aby uzyskać dodatkowe przykłady kodu i zapoznać się z interaktywnym środowiskiem kodowania:

Używanie wyrażeń stylu opartych na danych

Wyświetlanie informacji o funkcji

Dodawanie warstwy symboli

Dodawanie warstwy liniowej

Dodawanie warstwy wielokąta