Menambahkan kontrol ke peta

Artikel
11/08/2024

Artikel ini memperlihatkan kepada Anda cara menambahkan kontrol ke peta, termasuk cara membuat peta dengan semua kontrol dan pemilih gaya.

Tambahkan kontrol zoom

Kontrol zoom menambahkan tombol untuk memperbesar dan memperkecil peta. Contoh kode berikut membuat contoh kelas ZoomControl, dan menambahkannya sudut kanan bawah peta.

//Construct a zoom control and add it to the map.
map.controls.add(new atlas.control.ZoomControl(), {
    position: 'bottom-right'
});

Menambahkan kontrol jarak

Kontrol jarak menambahkan tombol untuk memiringkan jarak untuk memetakan relatif terhadap cakrawala. Contoh kode berikut membuat instans kelas PitchControl. Kode ini menambahkan PitchControl ke sudut kanan atas peta.

//Construct a pitch control and add it to the map.
map.controls.add(new atlas.control.PitchControl(), {
    position: 'top-right'
});

Menambahkan kontrol kompas

Kontrol kompas menambahkan tombol untuk memutar peta. Contoh kode berikut membuat instans kelas CompassControl dan menambahkannya sudut kiri bawah peta.

//Construct a compass control and add it to the map.
map.controls.add(new atlas.control.CompassControl(), {
    position: 'bottom-left'
});

Menambahkan kontrol skala

Kontrol skala menambahkan bilah skala ke peta. Sampel kode berikut membuat instans kelas ScaleControl dan menambahkannya ke sudut kiri bawah peta.

//Construct a scale control and add it to the map.
map.controls.add(new atlas.control.ScaleControl(), {
    position: 'bottom-left'
});

Menambahkan kontrol layar penuh

Kontrol layar penuh menambahkan tombol untuk mengalihkan peta atau elemen HTML tertentu antara layar penuh dan tampilan normal. Sampel kode berikut membuat instans kelas FullscreenControl dan menambahkannya ke sudut kanan atas peta.

//Construct a fullscreen control and add it to the map.
map.controls.add(new atlas.control.FullscreenControl(), {
    position: 'top-right'
});

Peta dengan semua kontrol

Beberapa kontrol dapat dimasukkan ke dalam array dan ditambahkan ke peta sekaligus dan diposisikan di area peta yang sama untuk menyederhanakan pengembangan. Cuplikan kode berikut menambahkan kontrol navigasi standar ke peta menggunakan pendekatan ini.

map.controls.add(
  [
    new atlas.control.ZoomControl(),
    new atlas.control.PitchControl(),
    new atlas.control.CompassControl(),
    new atlas.control.StyleControl(),
    new atlas.control.FullscreenControl(),
    new atlas.control.ScaleControl(),
  ],
  {
    position: 'top-right',
  }
);

Gambar berikut menunjukkan peta dengan kontrol zoom, pitch, kompas, gaya, layar penuh, dan skala di sudut kanan atas peta. Perhatikan cara mereka menumpuk secara otomatis. Urutan objek kontrol dalam skrip menentukan urutan munculnya objek di peta. Untuk mengubah urutan kontrol pada peta, Anda dapat mengubah urutannya dalam array.

Kontrol pemilih gaya ditentukan oleh kelas StyleControl. Untuk informasi selengkapnya tentang menggunakan kontrol pemilih gaya, lihat memilih gaya peta.

Menyesuaikan kontrol

Sampel Opsi Kontrol Navigasi adalah alat untuk menguji berbagai opsi untuk menyesuaikan kontrol. Untuk kode sumber untuk sampel ini, lihat Kode sumber Opsi Kontrol Navigasi.

Sampel Opsi Kontrol Layar Penuh menyediakan alat untuk menguji opsi untuk menyesuaikan kontrol layar penuh. Untuk kode sumber untuk sampel ini, lihat Kode sumber Opsi Kontrol Layar Penuh.

Jika Anda ingin membuat kontrol navigasi yang disesuaikan, buat kelas yang membentang dari atlas.Control kelas atau buat elemen HTML dan posisikan di atas peta div. Minta kontrol UI ini memanggil fungsi setCamera peta untuk memindahkan peta.