Bagikan melalui

Menambahkan lapisan gambar ke peta

  • Artikel

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
  • Gambar radar cuaca

Tip

ImageLayer adalah cara mudah untuk melapisi gambar di peta. Perhatikan bahwa browser mungkin mengalami kesulitan memuat gambar besar. Dalam hal ini, pertimbangkan untuk memecah gambar Anda menjadi petak peta, lalu memuatnya ke dalam peta sebagai TileLayer.

Lapisan gambar mendukung format gambar berikut:

  • JPEG
  • PNG
  • BMP
  • GIF (tanpa animasi)

Menambahkan lapisan gambar

Kode berikut ini melapisi gambar peta Newark, New Jersey, dari tahun 1922 pada peta. ImageLayer dibuat dengan meneruskan URL ke gambar, dan mengoordinasikan untuk empat sudut dalam format [Top Left Corner, Top Right Corner, Bottom Right Corner, Bottom Left Corner].

//Create an image layer and add it to the map.
map.layers.add(new atlas.layer.ImageLayer({
    url: 'newark_nj_1922.jpg',
    coordinates: [
        [-74.22655, 40.773941], //Top Left Corner
        [-74.12544, 40.773941], //Top Right Corner
        [-74.12544, 40.712216], //Bottom Right Corner
        [-74.22655, 40.712216]  //Bottom Left Corner
    ]
}));

Untuk sampel yang berfungsi penuh yang menunjukkan cara melapisi gambar peta Newark New Jersey dari 1922 sebagai lapisan Gambar, lihat Lapisan Gambar Sederhana di Sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Kode sumber Lapisan Gambar Sederhana.

Cuplikan layar memperlihatkan peta dengan gambar peta Newark New Jersey dari 1922 sebagai 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.

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

Untuk sampel yang berfungsi penuh yang menunjukkan cara menggunakan KML Ground Overlay sebagai Lapisan Gambar, lihat KML Ground Overlay sebagai Lapisan Gambar di Sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat KML Ground Overlay sebagai kode sumber Lapisan Gambar.

Cuplikan layar memperlihatkan peta dengan KML Ground Overlay muncul sebagai Lapisan Gambar.

Tip

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

Menyesuaikan lapisan gambar

Lapisan gambar memiliki banyak opsi gaya. Untuk sampel yang berfungsi penuh yang menunjukkan bagaimana berbagai opsi lapisan gambar memengaruhi penyajian, lihat Opsi Lapisan Gambar di Sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Kode sumber Opsi Lapisan Gambar.

Cuplikan layar memperlihatkan peta dengan panel yang memiliki berbagai opsi lapisan gambar yang memengaruhi penyajian. Dalam sampel ini, Anda dapat mengubah opsi gaya dan melihat efek yang ada di peta.

Langkah berikutnya

Pelajari selengkapnya tentang kelas dan metode yang digunakan di artikel ini:

ImageLayer

ImageLayerOptions

Lihat artikel berikut untuk mengetahui sampel kode lainnya yang akan ditambahkan ke peta Anda:

Menambahkan lapisan petak peta