Adicionar controles a um mapa

Artigo
11/16/2023

Este artigo mostra como adicionar controles a um mapa, incluindo como criar um mapa com todos os controles e um seletor de estilo.

Adicionar controlo de zoom

Um controle de zoom adiciona botões para ampliar e reduzir o mapa. O exemplo de código a seguir cria uma instância da classe ZoomControl e adiciona-a no canto inferior direito do mapa.

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

Adicionar controle de passo

Um controle de passo adiciona botões para inclinar o passo para mapear em relação ao horizonte. O exemplo de código a seguir cria uma instância da classe PitchControl . Ele adiciona o PitchControl ao canto superior direito do mapa.

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

Adicionar controlo de bússola

Um controle de bússola adiciona um botão para girar o mapa. O exemplo de código a seguir cria uma instância da classe CompassControl e adiciona-a no canto inferior esquerdo do mapa.

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

Um mapa com todos os controles

Vários controles podem ser colocados em uma matriz e adicionados ao mapa de uma só vez e posicionados na mesma área do mapa para simplificar o desenvolvimento. O trecho de código a seguir adiciona os controles de navegação padrão ao mapa usando essa abordagem.

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

A imagem a seguir mostra um mapa com os controles zoom, bússola, passo e seletor de estilo no canto superior direito do mapa. Observe como eles se empilham automaticamente. A ordem dos objetos de controle no script dita a ordem em que eles aparecem no mapa. Para alterar a ordem dos controles no mapa, você pode alterar sua ordem na matriz.

O controle seletor de estilo é definido pela classe StyleControl . Para obter mais informações sobre como usar o controle seletor de estilo, consulte Escolher um estilo de mapa.

Personalizar controles

O exemplo de Opções de Controle de Navegação é uma ferramenta para testar as várias opções para personalizar os controles. Para obter o código-fonte deste exemplo, consulte Código fonte das Opções de Controle de Navegação.

Se você quiser criar controles de navegação personalizados, crie uma classe que se estenda da atlas.Control classe ou crie um elemento HTML e posicione-o acima do div do mapa. Faça com que esse controle de interface do usuário chame a função de mapas setCamera para mover o mapa.