Tutorial: Memuat data GeoJSON ke Azure Maps Android SDK

  • Artikel

Tutorial ini memandu Anda melalui proses impor file GeoJSON data lokasi ke Azure Maps Android SDK. Dalam tutorial ini, Anda akan mempelajari cara:

  • Menambahkan Azure Maps ke aplikasi Android.
  • Membuat sumber data dan memuat dalam file GeoJSON dari file lokal atau web.
  • Menampilkan data di peta.
  • Berinteraksi dengan data di peta untuk melihat detailnya.

Catatan

Penghentian Azure Peta Android SDK

Azure Peta Native SDK untuk Android sekarang tidak digunakan lagi dan akan dihentikan pada 31/3/25. Untuk menghindari gangguan layanan, migrasikan ke Azure Peta Web SDK dengan 3/31/25. Untuk informasi selengkapnya, lihat Panduan migrasi Azure Peta Android SDK.

Prasyarat

  1. Selesaikan Mulai cepat: Membuat aplikasi Android. Tutorial ini memperluas kode yang digunakan dalam mulai cepat tersebut.
  2. Unduh file GeoJSON Sampel Point of Interest (POI).

Mengimpor data GeoJSON dari folder aset atau web

Sebagian besar file GeoJSON membungkus semua data dalam FeatureCollection. Dengan mengingat skenario ini, jika file GeoJSON dimuat ke dalam aplikasi sebagai string, mereka dapat diteruskan ke metode statis fromJson koleksi fitur, yang mendeserialisasi string ke dalam objek GeoJSON FeatureCollection yang dapat ditambahkan ke peta.

Langkah berikut menunjukkan Anda cara mengimpor file GeoJSON ke dalam aplikasi dan mendeserialisasinya sebagai objek FeatureCollection GeoJSON.

  1. Selesaikan Mulai cepat: Membuat aplikasi Android karena langkah berikut disusun di luar aplikasi ini.
  2. Di panel proyek Android Studio, klik kanan folder aplikasi dan buka New > Folder > Assets Folder.
  3. Tarik dan letakkan file GeoJSON Sampel Point of Interest (POI) ke dalam folder aset.
  1. Buka file MainActivity.java dan tambahkan kode berikut di dalam panggilan balik untuk peristiwa mapControl.onReady, di dalam metode onCreate. Kode ini memuat file SamplePoiDataSet.jsfile dari folder aset ke sumber data menggunakan metode importDataFromUrl lalu menambahkannya ke peta.
//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. Buka file MainActivity.kt dan tambahkan kode berikut di dalam panggilan balik untuk peristiwa mapControl.onReady, di dalam metode onCreate. Kode ini memuat file SamplePoiDataSet.jsfile dari folder aset ke sumber data menggunakan metode importDataFromUrl lalu menambahkannya ke peta.
//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. Dengan kode untuk memuat data GeoJSON sumber data, kita sekarang perlu menentukan bagaimana data tersebut harus ditampilkan di peta. Ada beberapa lapisan penyajian yang berbeda untuk data titik; Lapisan gelembung, Lapisan simbol, dan Lapisan peta panas merupakan lapisan yang paling umum digunakan. Tambahkan kode berikut untuk merender data dalam lapisan gelembung di panggilan balik untuk peristiwa mapControl.onReady setelah kode untuk mengimpor 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. Di panel proyek Android Studio, klik kanan folder layout, di bawah jalur app > res > layout dan buka New > File. Buat file baru yang disebut popup_text.xml.
  2. Buka file popup_text.xml. Jika file terbuka dalam tampilan perancang, klik kanan pada layar dan pilih Buka XML. Salin dan tempel XML berikut ke dalam file. XML ini membuat tata letak sederhana yang bisa digunakan dengan popup dan berisi tampilan teks.
<?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. Kembali ke file MainActivity.java dan setelah kode untuk lapisan gelembung, tambahkan kode berikut untuk membuat popup yang dapat digunakan kembali.
//Create a popup and add it to the map.
Popup popup = new Popup();
map.popups.add(popup);

//Close it initially.
popup.close();
  1. Kembali ke file MainActivity.kt dan setelah kode untuk lapisan gelembung, tambahkan kode berikut untuk membuat popup yang dapat digunakan kembali.
//Create a popup and add it to the map.
val popup = Popup()
map.popups.add(popup)

//Close it initially.
popup.close()
  1. Tambahkan kode berikut untuk melampirkan click peristiwa ke lapisan gelembung. Ketika gelembung di lapisan gelembung diketuk, peristiwa menembak dan mengambil detail dari properti fitur yang dipilih, membuat tampilan menggunakan file tata letak popup_text.xml , meneruskannya sebagai konten ke popup, lalu menampilkan popup pada posisi fitur.
//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. Jalankan aplikasi lagi. Peta ditampilkan dengan gelembung yang dilapisi untuk setiap lokasi dalam file GeoJSON. Mengetuk gelembung apa pun menampilkan popup dengan nama dan jenis entitas fitur yang disentuh.

    Peta data dari file GeoJSON ditampilkan dengan popup yang terbuka saat lokasi diketuk

Membersihkan sumber daya

Lakukan langkah-langkah berikut untuk membersihkan sumber daya dari tutorial ini:

  1. Tutup Android Studio dan hapus aplikasi yang Anda buat.
  2. Jika Anda menguji aplikasi di perangkat eksternal, hapus instalan aplikasi dari perangkat tersebut.

Langkah berikutnya

Untuk melihat contoh kode lainnya dan pengalaman pengodean interaktif:

Menggunakan ekspresi gaya berbasis data

Menampilkan informasi fitur

Menambah lapisan simbol

Menambah lapisan baris

Menambah lapisan poligon