Visualización de imágenes desde Bing Maps Angular

    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 más detalles:

    Microsoft Bing Blogs

    The Angular IgxBingMapsMapImagery is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component can display geographic imagery from Bing Maps in the map’s background content using the IgxBingMapsMapImagery class.

    Angular Displaying Imagery from Bing Maps Example

    <img src=".. /images/general/BingMapsImagery.png"alt=" Angular Bing Maps Imagery" />

    Code Snippet

    The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular IgxGeographicMapComponent using IgxBingMapsMapImagery class.

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

    import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxBingMapsMapImagery } from 'igniteui-angular-maps';
// ...
const tileSource = new IgxBingMapsMapImagery();
tileSource.apiKey = "YOUR_BING_MAPS_API_KEY";
tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels; // or
tileSource.imageryStyle = BingMapsImageryStyle.Aerial; // or
tileSource.imageryStyle = BingMapsImageryStyle.Road;

// resolving BingMaps uri based on HTTP protocol of hosting website
let tileUri = tileSource.actualBingImageryRestUri;
const isHttpSecured = window.location.toString().startsWith("https:");
if (isHttpSecured) {
    tileUri = tileUri.replace("http:", "https:");
} else {
    tileUri = tileUri.replace("https:", "http:");
}
tileSource.bingImageryRestUri = tileUri;

this.map.backgroundContent = tileSource;

    Properties

    La siguiente tabla resumió las propiedades de laIgxBingMapsMapImagery clase:

    Nombre de la propiedad tipo de propiedad Descripción
    apiKey cadena Representa la propiedad para configurar una clave API requerida para el servicio de imágenes de Bing Maps. Debe obtener esta clave en el sitio web www.bingmapsportal.com.
    imageryStyle BingMapsImageryStyle Representa la propiedad para configurar el estilo del mapa de mosaicos de imágenes de Bing Maps. Esta propiedad se puede establecer en lo siguienteBingMapsImageryStyle valores de enumeración:
    • Aérea: especifica el estilo del mapa aéreo sin superposición de carreteras ni etiquetas.
    • AerialWithLabels: especifica el estilo del mapa aéreo con carreteras y etiquetas superpuestas.
    • Carretera: especifica el estilo del mapa de carreteras sin superposición aérea.
    bingImageryRestUri cadena Representa la propiedad para configurar el URI REST de imágenes de Bing que especifica de dónde provendrán TilePath y los subdominios. Esta es una propiedad opcional y, si no se especifica, utilizará el URI REST predeterminado.
    cultureName cadena Representa una propiedad para establecer el nombre de la cultura para el origen del mosaico.
    isDeferredLoad booleano Representa la propiedad que especifica si el servicio Bing Maps debe inicializarse automáticamente tras la asignación de valores de propiedad válidos.
    isInitialized booleano Representa que la propiedad establecida en True ocurre cuando los mosaicos de imágenes geográficas del servicio Bing Maps se han inicializado y están listos para representarse en el componente de mapa.
    subDomains SubDomainsCollection Representa una colección de imágenes de subdominios de URI.
    tilePath cadena Representa una propiedad que establece el URI de la imagen del mosaico del mapa; esta es la ubicación real de Bing Maps.

    API References