Mengatur luasan untuk peta menggunakan MapLibre

Ada kalanya Anda tidak ingin pengguna Anda dapat menggeser atau memperbesar seluruh dunia. Jika Anda menggunakan MapLibre kontrol peta, Anda dapat membatasi luasan, atau batas, kontrol peta dengan maxBounds opsi, dan membatasi zoom dengan minZoom dan opsi. maxZoom

Contoh kode berikut menunjukkan cara menginisialisasi kontrol peta untuk membatasi panning ke batas tertentu (dalam hal ini, luasan sumber data Grab).

catatan

Sampel ini masuk JavaScript, dan bekerja dalam konteks Membuat aplikasi web tutorial.

// Set bounds to Grab data provider region 
var bounds = [
        [90.0, -21.943045533438166], // Southwest coordinates
        [146.25, 31.952162238024968] // Northeast coordinates
    ];

var mlglMap = new maplibregl.Map(
    {
    container: 'map',
    style: mapName,
    maxBounds: bounds // Sets bounds as max
    transformRequest,
    }
);

Demikian pula, Anda dapat mengatur tingkat zoom minimum dan maksimum untuk peta. Nilai untuk keduanya bisa antara 0 dan 24, meskipun defaultnya adalah 0 untuk zoom minimum dan 22 untuk maksimum (penyedia data mungkin tidak menyediakan data di semua tingkat zoom. Sebagian besar pustaka peta menangani ini secara otomatis). Contoh berikut menginisialisasi minZoom dan maxZoom opsi pada kontrol MapLibre Peta.

// Set the minimum and maximum zoom levels 
var mlglMap = new maplibregl.Map(
    {
    container: 'map',
    style: mapName,
    maxZoom: 12,
    minZoom: 5,
    transformRequest,
    }
);

Tip

Kontrol MapLibre Peta juga memungkinkan pengaturan opsi ini saat runtime, bukan selama inisialisasi, dengan get... dan set... fungsi. Misalnya, gunakan getMaxBounds dan setMaxBounds untuk mengubah batas peta saat runtime.