Impostazione delle estensioni per una mappa utilizzando MapLibre

A volte non si desidera consentire agli utenti di eseguire la panoramica o lo zoom in tutto il mondo. Se utilizzi il controllo MapLibre della mappa, puoi limitare le estensioni o i limiti del controllo della mappa con l'maxBoundsopzione e limitare lo zoom con minZoom e opzioni. maxZoom

Il seguente esempio di codice mostra come inizializzare il controllo della mappa per vincolare il panning a un limite specifico (in questo caso, le estensioni dell'origine dati Grab).

Nota

Questi esempi sono inclusi e funzionano nel JavaScript contesto del tutorial. Creazione di un'app Web

// 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,
    }
);

Allo stesso modo, è possibile impostare un livello di zoom minimo e massimo per la mappa. I valori per entrambi possono essere compresi tra 0 e 24, sebbene i valori predefiniti siano 0 per lo zoom minimo e 22 per il massimo (i fornitori di dati potrebbero non fornire dati a tutti i livelli di zoom). La maggior parte delle librerie di mappe lo gestisce automaticamente). L'esempio seguente inizializza le maxZoom opzioni minZoom and sul controllo MapLibre Map.

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

Suggerimento

Il controllo MapLibre Map consente inoltre di impostare queste opzioni in fase di esecuzione, anziché durante l'inizializzazione, con get... le funzioni and. set... Ad esempio, usa getMaxBounds e modifica setMaxBounds i limiti della mappa in fase di esecuzione.