Alterar o estilo do mapa

O controle de mapa suporta várias opções diferentes de estilo de mapa e estilos de mapa base. Todos os estilos podem ser definidos quando o controle de mapa está sendo inicializado. Ou, você pode definir estilos usando a função do setStyle controle de mapa. Este artigo mostra como usar essas opções de estilo para personalizar a aparência do mapa e como implementar o controle seletor de estilo no mapa. O controle seletor de estilo permite que o usuário alterne entre diferentes estilos básicos.

Definir opções de estilo de mapa

As opções de estilo podem ser definidas durante a inicialização do controle da Web. Ou, pode atualizar as opções de estilo chamando a função de controle do setStyle mapa. Para ver todas as opções de estilo disponíveis, consulte Opções de estilo.

//Set the style options when creating the map.
var map = new atlas.Map('map', {
    renderWorldCopies: false,
    showLogo: true,
    showFeedbackLink: true,
    style: 'road'

    //Additional map options.
});

//Update the style options at anytime using `setStyle` function.
map.setStyle({
    renderWorldCopies: true,
    showLogo: false,
    showFeedbackLink: false
});

Definir um estilo de mapa base

Você também pode inicializar o controlo de mapa com um dos estilos de mapa base disponíveis no SDK da Web. Em seguida, você pode usar a setStyle função para atualizar o estilo base com um estilo de mapa diferente.

Definir um estilo de mapa base na inicialização

Os estilos básicos do controle de mapa podem ser definidos durante a inicialização. No código a seguir, a style opção do controle de mapa é definida como o grayscale_dark estilo de mapa base.

var map = new atlas.Map('map', {
    style: 'grayscale_dark',

    //Additional map options
});

Atualizar o estilo do mapa base

O estilo do mapa base pode ser atualizado usando a setStyle função e definindo a style opção para alterar para um estilo de mapa base diferente ou adicionar mais opções de estilo.

No código a seguir, depois de uma instância de mapa ser carregada, o estilo do mapa é atualizado de grayscale_dark para satellite usando a função setStyle.

map.setStyle({ style: 'satellite' });

Personalizar o mapa base

As opções styleOverrides permitem que os usuários otimizem o mapa base desativando elementos específicos do mapa, como fronteiras de país/região, fronteiras de distrito administrativo, pegadas de construção e camadas de detalhes da estrada. Isso permite uma visualização de mapa mais limpa e simples, facilitando a visualização de dados de geometria.

O código a seguir mostra como desativar as bordas do país/região e criar pegadas no mapa.

var map = new atlas.Map('map', {
    styleOverrides: {
        countryRegion: { borderVisible: false },
        buildingFootprint: { visible: false },
    },

    //Additional map options
});

Aqui estão exemplos de todas as cinco opções disponíveis styleOverrides :

• Fronteiras do país/região

styleOverrides: {
    countryRegion: { borderVisible: false }
}

• Fronteiras do distrito administrativo

styleOverrides: {
    adminDistrict: { borderVisible: false }
}

• Fronteiras do segundo distrito administrativo

styleOverrides: {
    adminDistrict2: { borderVisible: false }
}

• Construção de pegadas

styleOverrides: {
    buildingFootprint: { visible: false }
}

• Detalhes da estrada

styleOverrides: {
    roadDetails: { visible: false }
}

Para obter um exemplo mostrando os diferentes estilos e como eles afetam a forma como o mapa é renderizado, consulte Opções de estilo de mapa nos Exemplos do Azure Maps. Para obter o código-fonte deste exemplo, consulte Código-fonte de opções de estilo de mapa.

Adicionar o controle seletor de estilo

O controle seletor de estilo fornece um botão fácil de usar com painel suspenso que pode ser usado pelo usuário final para alternar entre estilos básicos.

O seletor de estilo tem duas opções de layout diferentes: icon e list. Além disso, o seletor de estilo permite que você escolha duas opções diferentes de controle style de seletor de estilo: light e dark. Neste exemplo, o seletor de estilos usa o icon layout e exibe uma lista selecionada de estilos de mapa base na forma de ícones. O seletor de controle de estilo inclui o seguinte conjunto básico de estilos: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. Para obter mais informações sobre as opções de controle do seletor de estilo, consulte Opções de controle de estilo.

A imagem a seguir mostra o controle de seletor de estilo exibido no icon layout.

A imagem a seguir mostra o controle de seletor de estilo exibido no list layout.

O código a seguir mostra como substituir a lista de estilos base padrão mapStyles . Neste exemplo, estamos definindo a mapStyles opção para listar os estilos base a serem exibidos no controle seletor de estilo.

/*Add the Style Control to the map*/
map.controls.add(new atlas.control.StyleControl({
  mapStyles: ['road', 'grayscale_dark', 'night', 'road_shaded_relief', 'satellite', 'satellite_road_labels'],
  layout: 'list'
}), {
  position: 'top-right'
});  

Próximos passos

Para saber mais sobre as classes e métodos usados neste artigo:

Consulte os seguintes artigos para obter mais exemplos de código para adicionar aos seus mapas: