Angular Imágenes de Azure Maps VISTA PREVIA

El AngularIgxAzureMapsImagery es un servicio de cartografía de imágenes geográficas proporcionado por Microsoft®. Ofrece varios estilos de mosaicos de imágenes geográficas del mundo. Este servicio de imágenes geográficas está disponible directamente en la página web de www.azure.microsoft.com. El componente de mapa Ignite UI for Angular puede mostrar imágenes geográficas de Azure Maps en el contenido de fondo del mapa usando laIgxAzureMapsImagery clase.

Angular Displaying Imagery from Azure Maps - Overview

Angular Displaying Imagery from Azure Maps - Code Example

El siguiente fragmento de código muestra cómo mostrar las fichas de imágenes geográficas de Azure Maps en AngularIgxGeographicMapComponent usandoIgxAzureMapsImagery clase.

<igx-geographic-map #map
    width="100%"
    height="100%"
    zoomable="true" >
</igx-geographic-map>

import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxAzureMapsImagery } from 'igniteui-angular-maps';
// ...
const tileSource = new IgxAzureMapsImagery();
tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY";
tileSource.imageryStyle = AzureMapsImageryStyle.Satellite; // or
tileSource.imageryStyle = AzureMapsImageryStyle.TerraOverlay; // or
tileSource.imageryStyle = AzureMapsImageryStyle.Road; //or Traffic & Weather etc.

this.map.backgroundContent = tileSource;

Angular Overlaying Imagery from Azure Maps - Overview

Al trabajar con ellosIgxGeographicTileSeriesComponent, puedes combinar superposiciones (tráfico, clima, etiquetas) sobre un estilo de mapa base, como por ejemplo. Satélite, Carretera o Gris Oscuro. Usando TerraOverlay con, por ejemplo, Satélite para visualizar el terreno.

Estilos base: Satélite, Carretera, Terra y Gris oscuro proporcionan los mosaicos de fondo principales.
Estilos de superposición: Las imágenes de tráfico y clima (por ejemplo, )TrafficRelativeOverlayWeatherRadarOverlay están diseñadas para superponerse sobre un estilo base asignándolas a una serie de mosaicos.
Estilos híbridos: Variantes comoHybridRoadOverlay yHybridDarkGreyOverlay ya combinan un estilo base con superposiciones (etiquetas, carreteras, etc.), así que no necesitas gestionar varias capas manualmente.

Este diseño le permite crear mapas más ricos, por ejemplo:

Visualización de imágenes de satélite con TrafficOverlay para resaltar la congestión en imágenes del mundo real.
Uso de Terra con WeatherRadarOverlay para visualizar el terreno con precipitaciones.
Aplicación de DarkGrey con LabelsRoadOverlay para una vista de contraste intenso y compatible con el tablero.

Azure Traffic Tile Series con antecedentes

Angular Overlaying Imagery from Azure Maps - Code Example

El siguiente fragmento de código muestra cómo mostrar mosaicos de imágenes geográficas sobre una imagen de fondo que se une, por ejemplo, tráfico con un mapa gris oscuro para las clasesIgxGeographicMapComponentIgxAzureMapsImagery AngularIgxGeographicTileSeriesComponent y las que usan.

<igx-geographic-map #map height="100%" width="100%" zoomable="true">
  <igx-geographic-tile-series #tileSeries></igx-geographic-tile-series>
</igx-geographic-map>

export class AppComponent implements AfterViewInit {
  @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent;
  @ViewChild('tileSeries', { static: true }) public tileSeries!: IgxGeographicTileSeriesComponent;

  public azureImagery!: IgxAzureMapsImagery;
  public azureKey: string = "<YOUR_KEY_HERE>";

  ngAfterViewInit(): void {
    // Update TileSeries
    const overlay = new IgxAzureMapsImagery();
    overlay.apiKey = this.azureKey;
    overlay.imageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay;
    this.tileSeries.tileImagery = overlay;

    // Update Map Background
    this.azureImagery = new IgxAzureMapsImagery();
    this.azureImagery.apiKey = this.azureKey;
    this.azureImagery.imageryStyle = AzureMapsImageryStyle.DarkGrey;
    this.map.backgroundContent = this.azureImagery;
  }
}

Properties

La siguiente tabla resume las propiedades de laIgxAzureMapsImagery clase:

Nombre de la propiedad	tipo de propiedad	Descripción
`apiKey`	cadena	Representa la propiedad para establecer una clave de API necesaria para el servicio de imágenes de Azure Maps. Debe obtener esta clave en el sitio web de azure.microsoft.com.
`imageryStyle`	`AzureMapsImageryStyle`	Representa la propiedad para establecer el estilo de mapa de iconos de imágenes de Azure Maps. Esta propiedad se puede establecer en los siguientes`AzureMapsImageryStyle` valores de enumeración: Satélite: especifica el estilo de mapa de satélite sin superposición de carreteras o etiquetas Carretera: especifica el estilo de mapa aéreo con superposición de carreteras y etiquetas DarkGrey: especifica un estilo de mapa base gris oscuro para las superposiciones de contraste y resaltado TerraOverlay: especifica un estilo de mapa de terreno con relieve sombreado para resaltar las entidades de elevación y paisaje LabelsRoadOverlay: una de varias superposiciones de etiquetas de ciudad sin una superposición aérea HybridRoadOverlay: fondo de satélite combinado con superposiciones de carreteras y etiquetas HybridDarkGreyOverlay: fondo de satélite combinado con superposiciones de etiquetas de color gris oscuro LabelsDarkGreyOverlay: una de varias superposiciones de etiquetas de ciudad sobre un mapa base gris oscuro TrafficDelayOverlay: muestra los retrasos del tráfico y las áreas de congestión en tiempo real TrafficAbsoluteOverlay: muestra las velocidades de tráfico actuales como valores absolutos TrafficReducedOverlay: muestra el flujo de tráfico reducido con visualización basada en luz TrafficRelativeOverlay: muestra las velocidades del tráfico en relación con las condiciones normales TrafficRelativeDarkOverlay: muestra las velocidades de tráfico en relación con las condiciones normales en un mapa base oscuro para mejorar el contraste WeatherRadarOverlay: muestra imágenes de radar de precipitación casi en tiempo real WeatherInfraredOverlay: muestra imágenes satelitales infrarrojas de la nubosidad