Définition de l'étendue d'une carte à l'aide de MapLibre

Parfois, vous ne voulez pas que vos utilisateurs puissent se déplacer ou zoomer sur le monde entier. Si vous utilisez MapLibre le contrôle cartographique, vous pouvez limiter l'étendue, ou les limites, du contrôle cartographique à l'aide de l'maxBoundsoption, et restreindre le zoom avec minZoom et les options. maxZoom

L'exemple de code suivant montre comment initialiser le contrôle cartographique pour limiter le panoramique à une limite spécifique (dans ce cas, l'étendue de la source de données Grab).

Note

Ces exemples sont inclus JavaScript et fonctionnent dans le contexte du Création d'une application Web didacticiel.

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

De même, vous pouvez définir un niveau de zoom minimal et maximal pour la carte. Les valeurs pour les deux peuvent être comprises entre 0 et 24, bien que les valeurs par défaut soient 0 pour le zoom minimum et 22 pour le maximum (les fournisseurs de données peuvent ne pas fournir de données à tous les niveaux de zoom). La plupart des bibliothèques de cartes gèrent cela automatiquement). L'exemple suivant initialise les maxZoom options minZoom et du contrôle MapLibre Map.

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

Astuce

Le contrôle MapLibre Map permet également de définir ces options lors de l'exécution, plutôt que lors de l'initialisation, avec get... et des set... fonctions. Par exemple, utilisez getMaxBounds et setMaxBounds pour modifier les limites de la carte lors de l'exécution.