Visão geral do mapa Angular

    O componente de mapa Ignite UI for Angular permite que você exiba dados que contêm localizações geográficas de modelos de visualização ou dados geoespaciais carregados de arquivos de forma em mapas de imagens geográficas.

    Exemplo de mapa Angular

    O exemplo a seguir demonstra como os dados de exibição sãoIgxGeographicMapComponent usadosIgxGeographicProportionalSymbolSeriesComponent também conhecidos como Série de Bolhas.

    O componente de mapa permite que você renderize imagens geográficas do Bing Maps™ e Open Street Maps. O mapa fornece plotagem de dezenas de milhares de pontos de dados e os atualiza a cada poucos milissegundos para que o controle possa lidar com seus feeds em tempo real.

    A propriedade Série do mapa é usada para suportar a renderização de um número ilimitado de séries geográficas. Essa propriedade é uma coleção de objetos da série geográfica e qualquer tipo de série geográfica pode ser adicionada a ela. Por exemplo,IgxGeographicSymbolSeriesComponent pode ser adicionado para plotar localizações geográficas como cidades eIgxGeographicPolylineSeriesComponent para plotar conexões (por exemplo, estradas) entre essas localizações geográficas.

    O mapa fornece comportamentos de navegação personalizáveis para navegar pelo conteúdo do mapa usando o mouse, o teclado ou o código-fonte.

    NOTA: A partir de 30 de junho de 2025, todas as contas do Microsoft Bing Maps for Enterprise Basic (Gratuitas) serão desativadas. Se você ainda estiver usando uma conta básica e uma chave não pagas, agora é a hora de agir para evitar interrupções no serviço. Os titulares de licenças do Bing Maps para Empresas podem continuar a usar o Bing Maps em seus aplicativos até 30 de junho de 2028.

    Para mais detalhes, visite:

    Microsoft Bing Blogs

    Dependências

    Para o componente de mapa geográfico Angular, você precisa primeiro instalar estes pacotes:

    npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts
npm install --save igniteui-angular-maps

    Módulos de componentes

    EleIgxGeographicMapComponent requer os seguintes módulos, porém o DataChartInteractivityModule é necessário apenas para interações com o mouse, como panorâmica e ampliação do conteúdo do mapa.

    // app.module.ts
import { IgxGeographicMapModule } from 'igniteui-angular-maps';
import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxGeographicMapModule,
        IgxDataChartInteractivityModule
        // ...
    ]
})
export class AppModule {}

    import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';

@Component({
  selector: "app-map-overview",
  styleUrls: ["./map-overview.component.scss"],
  templateUrl: "./map-overview.component.html"
})

export class MapOverviewComponent implements AfterViewInit {

    @ViewChild ("map")
    public map: IgxGeographicMapComponent;
    constructor() {
    }

    public ngAfterViewInit(): void {
        this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 };
    }
}

    Uso

    Agora que o módulo de mapa foi importado, o próximo passo é criar um mapa geográfico. O código a seguir demonstra como fazer isso e habilitar o zoom no mapa.

    <div className="sampleRoot" >
    <igx-geographic-map #map
        width="700px"
        height="500px"
        zoomable="true" >
    </igx-geographic-map>
</div>

    Recursos adicionais

    Você pode encontrar mais informações sobre recursos de mapa Angular relacionados nestes tópicos:

    Referências de API

    A seguir está uma lista de membros da API mencionados nas seções acima: