Resumen del mapa de Angular

    El componente de mapa Ignite UI for Angular permite visualizar datos que contienen ubicaciones geográficas de modelos de vista o datos geoespaciales cargados desde archivos de formas en mapas de imágenes geográficas.

    Ejemplo de mapa Angular

    El siguiente ejemplo demuestra cómo mostrar datos en IgxGeographicMapComponent usando IgxGeographicProportionalSymbolSeriesComponent también conocido como Bubble Series.

    El componente de mapa le permite representar imágenes geográficas de Bing Maps™ y Open Street Maps. El mapa proporciona un trazado de decenas de miles de puntos de datos y los actualiza cada pocos milisegundos para que el control pueda manejar sus transmisiones en tiempo real.

    La propiedad Serie del mapa se utiliza para admitir la representación de un número ilimitado de series geográficas. Esta propiedad es una colección de objetos de series geográficas y se le puede agregar cualquier tipo de serie geográfica. Por ejemplo, se puede agregar IgxGeographicSymbolSeriesComponent para trazar ubicaciones geográficas como ciudades y IgxGeographicPolylineSeriesComponent para trazar conexiones (por ejemplo, carreteras) entre estas ubicaciones geográficas.

    El mapa proporciona comportamientos de navegación personalizables para navegar por el contenido del mapa mediante el mouse, el teclado o el código subyacente.

    NOTA: A partir del 30 de junio de 2025, se retirarán todas las cuentas de Microsoft Bing Maps for Enterprise Basic (gratuita). Si todavía está utilizando una cuenta básica y una clave no pagadas, ahora es el momento de actuar para evitar interrupciones en el servicio. Los titulares de licencias de Bing Maps for Enterprise pueden seguir usando Bing Maps en sus aplicaciones hasta el 30 de junio de 2028.

    Para obtener más detalles, visite:

    Microsoft Bing Blogs

    dependencias

    El Angular componente de mapa geográfico, primero debe instalar estos paquetes:

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

    Módulos de componentes

    ​IgxGeographicMapComponent requiere los siguientes módulos; sin embargo, DataChartInteractivityModule solo es necesario para interacciones con el mouse, como desplazarse y hacer zoom en el contenido del 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

    Ahora que se importa el módulo de mapas, el siguiente paso es crear un mapa geográfico. El siguiente código muestra cómo hacer esto y habilitar el zoom en el mapa.

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

    Recursos adicionales

    Puede encontrar más información sobre las características de mapa de Angular relacionadas en estos temas:

    Referencias de API

    La siguiente es una lista de miembros de API mencionados en las secciones anteriores: