Alterar o estilo do mapa

O controle de mapa dá suporte a várias opções de estilo de mapa e estilos de mapa de base diferentes. Todos os estilos podem ser definidos quando o controle de mapa está sendo inicializado. Ou, você pode definir estilos usando a função setStyle do 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 de base.

Definir opções de estilo de mapa

As opções de estilo podem ser definidas durante a inicialização do controle da Web. Ou, você pode atualizar as opções de estilo chamando a função setStyle do controle de mapa. Para ver todas as opções de estilo disponíveis, confira 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 controle de mapa com um dos estilos de mapa de base que estão disponíveis no SDK da Web. Em seguida, você pode usar a função setStyle para atualizar o estilo de base com um estilo de mapa diferente.

Definir um estilo de mapa de base na inicialização

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

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

    //Additional map options
});

Atualizar o estilo do mapa de base

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

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

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

Personalize o mapa base

As opções styleOverrides permitem que os usuários simplifiquem o mapa base desativando elementos específicos do mapa, como fronteiras de países/regiones, fronteiras de distritos administrativos, footprints de edifícios e camadas de detalhes de estradas. Isso permite uma visualização do mapa mais limpa e simples, facilitando a visualização dos dados geométricos.

O código a seguir mostra como desativar fronteiras de países/regiões e áreas de construção no mapa.

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

    //Additional map options
});

Aqui estão exemplos das cinco opções disponíveis styleOverrides :

• Fronteiras de países/regiões

styleOverrides: {
    countryRegion: { borderVisible: false }
}

• Fronteiras do distrito administrativo

styleOverrides: {
    adminDistrict: { borderVisible: false }
}

• Fronteiras do segundo distrito administrativo

styleOverrides: {
    adminDistrict2: { borderVisible: false }
}

• Compilando pegadas

styleOverrides: {
    buildingFootprint: { visible: false }
}

• Detalhes da estrada

styleOverrides: {
    roadDetails: { visible: false }
}

Para um exemplo mostrando os diferentes estilos e como eles afetam a renderização do mapa, veja Opções de estilo de mapa nos Azure Mapas Samples. Para o código-fonte deste exemplo, veja Código fonte das opções de estilo do mapa.

Adicionar o controle seletor de estilo

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

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 de controle seletor de estilo diferentes style: light e dark. Neste exemplo, o seletor de estilo usa o layout icon e exibe uma lista de seleção de estilos de mapa de base na forma de ícones. O seletor de controle de estilo inclui o seguinte conjunto base de estilos: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. Para obter mais informações sobre opções de controle seletor de estilo, confira Opções de controle de estilo.

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

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

O código a seguir mostra como substituir a lista de estilos base padrão mapStyles. Neste exemplo, estamos definindo a opção mapStyles para listar os estilos de base para exibição 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óximas etapas

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

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