Share via

Menambahkan lapisan gambar ke peta (Android SDK)

  • Artikel

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.

Artikel ini memperlihatkan cara melapisi gambar ke kumpulan koordinat tetap. Berikut adalah beberapa contoh berbagai jenis gambar yang dapat dilapisi pada peta:

  • Gambar yang diambil dari drone
  • Lantai bangunan
  • Gambar peta historis atau khusus lainnya
  • Cetak biru lokasi pekerjaan

Tip

Lapisan gambar adalah cara yang mudah untuk melapisi gambar pada peta. Perhatikan bahwa gambar besar dapat menghabiskan banyak memori dan berpotensi menyebabkan masalah performa. Dalam hal ini, pertimbangkan untuk membagi gambar Anda menjadi petak peta, dan memuatnya ke dalam peta sebagai lapisan petak peta.

Menambahkan lapisan gambar

Kode berikut ini melapisi gambar peta Newark, New Jersey, dari tahun 1922 pada peta. Gambar ini ditambahkan ke folder drawable proyek. Lapisan gambar dibuat dengan mengatur gambar dan koordinat untuk empat sudut dalam format [Top Left Corner, Top Right Corner, Bottom Right Corner, Bottom Left Corner]. Menambahkan lapisan gambar di bawah lapisan label sering diinginkan.

//Create an image layer.
ImageLayer layer = new ImageLayer(
    imageCoordinates(
        new Position[] {
            new Position(-74.22655, 40.773941), //Top Left Corner
            new Position(-74.12544, 40.773941), //Top Right Corner
            new Position(-74.12544, 40.712216), //Bottom Right Corner
            new Position(-74.22655, 40.712216)  //Bottom Left Corner
        }
    ),
    setImage(R.drawable.newark_nj_1922)
);

//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels");

//Create an image layer.
val layer = ImageLayer(
    imageCoordinates(
        arrayOf<Position>(
            Position(-74.22655, 40.773941),  //Top Left Corner
            Position(-74.12544, 40.773941),  //Top Right Corner
            Position(-74.12544, 40.712216),  //Bottom Right Corner
            Position(-74.22655, 40.712216)   //Bottom Left Corner
        )
    ),
    setImage(R.drawable.newark_nj_1922)
)

//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels")

Atau, URL ke gambar yang dihost di online dapat ditentukan. Namun, jika skenario Anda memungkinkan, tambahkan gambar ke folder proyek drawable Anda, gambar dimuat lebih cepat karena gambar tersedia secara lokal dan tidak perlu diunduh.

//Create an image layer.
ImageLayer layer = new ImageLayer(
    imageCoordinates(
        new Position[] {
            new Position(-74.22655, 40.773941), //Top Left Corner
            new Position(-74.12544, 40.773941), //Top Right Corner
            new Position(-74.12544, 40.712216), //Bottom Right Corner
            new Position(-74.22655, 40.712216)  //Bottom Left Corner
        }
    ),
    setUrl("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg")
);

//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels");

//Create an image layer.
val layer = ImageLayer(
    imageCoordinates(
        arrayOf<Position>(
            Position(-74.22655, 40.773941),  //Top Left Corner
            Position(-74.12544, 40.773941),  //Top Right Corner
            Position(-74.12544, 40.712216),  //Bottom Right Corner
            Position(-74.22655, 40.712216) //Bottom Left Corner
        )
    ),
    setUrl("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg")
)

//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels")

Cuplikan layar berikut memperlihatkan peta Newark, New Jersey, dari tahun 1922 yang dilapisi menggunakan lapisan gambar.

Peta Newark, New Jersey, dari tahun 1922 yang dilapis menggunakan lapisan gambar

Mengimpor file KML sebagai overlay tanah

Sampel ini menunjukkan cara menambahkan informasi overlay dasar KML sebagai lapisan gambar pada peta. Overlay dasar KML menyediakan koordinat utara, selatan, timur, dan barat, serta rotasi berlawanan arah jarum jam. Namun, lapisan gambar mengantisipasi koordinat untuk setiap sudut gambar. Overlay dasar KML dalam sampel ini ditujukan untuk katedral Chartres, dan ini bersumber dari Wikimedia.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<GroundOverlay>
    <name>Map of Chartres cathedral</name>
    <Icon>
        <href>https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Chartres.svg/1600px-Chartres.svg.png</href>
        <viewBoundScale>0.75</viewBoundScale>
    </Icon>
    <LatLonBox>
        <north>48.44820923628113</north>
        <south>48.44737203258976</south>
        <east>1.488833825534365</east>
        <west>1.486788581643038</west>
        <rotation>46.44067597839695</rotation>
    </LatLonBox>
</GroundOverlay>
</kml>

Kode menggunakan metode getCoordinatesFromEdges statis dari kelas ImageLayer. Metode ini menghitung empat sudut gambar menggunakan informasi utara, selatan, timur, barat, dan rotasi overlay dasar KML.

//Calculate the corner coordinates of the ground overlay.
Position[] corners = ImageLayer.getCoordinatesFromEdges(
    //North, south, east, west
    48.44820923628113, 48.44737203258976, 1.488833825534365, 1.486788581643038,

    //KML rotations are counter-clockwise, subtract from 360 to make them clockwise.
    360 - 46.44067597839695
);

//Create an image layer.
ImageLayer layer = new ImageLayer(
    imageCoordinates(corners),
    setUrl("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Chartres.svg/1600px-Chartres.svg.png")
);

//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels");

//Calculate the corner coordinates of the ground overlay.
val corners: Array<Position> =
    ImageLayer.getCoordinatesFromEdges( //North, south, east, west
        48.44820923628113,
        48.44737203258976,
        1.488833825534365,
        1.486788581643038,  //KML rotations are counter-clockwise, subtract from 360 to make them clockwise.
        360 - 46.44067597839695
    )

//Create an image layer.
val layer = ImageLayer(
    imageCoordinates(corners),
    setUrl("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Chartres.svg/1600px-Chartres.svg.png")
)

//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels")

Cuplikan layar berikut memperlihatkan peta dengan overlay dasar KML yang dilapisi menggunakan lapisan gambar.

Peta dengan overlay dasar KML yang dilapisi menggunakan lapisan gambar

Tip

Gunakan metode getPixels dan getPositions dari kelas lapisan gambar untuk mengonversi antara koordinat geografis lapisan gambar yang diposisikan dan koordinat piksel gambar lokal.

Langkah berikutnya

Lihat artikel berikut ini untuk mempelajari selengkapnya tentang cara melapisi gambar pada peta.

Menambahkan lapisan petak peta