Definindo extensões para um mapa usando MapLibre

Há momentos em que você não quer que seus usuários consigam deslocar ou ampliar o mundo inteiro. Se você estiver usando o controle MapLibre de mapa, poderá limitar as extensões ou limites do controle de mapa com a maxBounds opção e restringir o zoom com minZoom e opções. maxZoom

O exemplo de código a seguir mostra como inicializar o controle do mapa para restringir a panorâmica a um limite específico (nesse caso, as extensões da fonte de dados Grab).

nota

Esses exemplos estão JavaScript disponíveis e funcionam dentro do contexto do Criar um aplicativo 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,
    }
);

Da mesma forma, você pode definir um nível mínimo e máximo de zoom para o mapa. Os valores para ambos podem estar entre 0 e 24, embora os padrões sejam 0 para o zoom mínimo e 22 para o máximo (os provedores de dados podem não fornecer dados em todos os níveis de zoom. A maioria das bibliotecas de mapas lida com isso automaticamente). O exemplo a seguir inicializa as maxZoom opções minZoom e no controle MapLibre Mapa.

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

dica

O controle MapLibre Map também permite definir essas opções em tempo de execução, em vez de durante a inicialização, com set... funções get... e. Por exemplo, use getMaxBounds e setMaxBounds para alterar os limites do mapa em runtime.