Visão geral do mapa Web Components

    O componente de mapa do Ignite UI for Web Components 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 Web Components

    O exemplo a seguir demonstra como exibir dados em IgcGeographicMapComponent usando IgcGeographicProportionalSymbolSeriesComponent, também conhecido como Bubble Series.

    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 Series do mapa é usada para dar suporte à renderização de um número ilimitado de séries geográficas. Esta propriedade é uma coleção de objetos de séries geográficas e qualquer tipo de série geográfica pode ser adicionado a ela. Por exemplo, IgcGeographicSymbolSeriesComponent pode ser adicionado para plotar localizações geográficas como cidades e o IgcGeographicPolylineSeriesComponent 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.

    Dependencies

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

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

    Component Modules

    O IgcGeographicMapComponent requer os seguintes módulos, no entanto o DataChartInteractivityModule só é necessário para interações do mouse, como panorâmica e zoom no conteúdo do mapa.

    import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMap } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';

IgcGeographicMapModule.register();
IgcDataChartInteractivityModule.register();

    import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcDataChartInteractivityModule,
    IgcGeographicMapModule
);

    Usage

    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.

    <igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>

    Additional Resources

    Você pode encontrar mais informações sobre recursos de mapas Web Components relacionados nestes tópicos:

    API References

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