Visualización de imágenes desde Bing Maps Angular

    El Angular IgxBingMapsMapImagery es un servicio de mapeo de imágenes geográficas proporcionado por la empresa Microsoft®. Proporciona 3 estilos de mosaicos de imágenes geográficas del mundo. Se puede acceder a este servicio de imágenes geográficas directamente en el sitio web de www.bing.com/maps. El componente de mapa Ignite UI for Angular puede mostrar imágenes geográficas de Bing Maps en el contenido de fondo del mapa mediante la IgxBingMapsMapImagery clase.

    Ejemplo de visualización de imágenes de Bing Maps Angular

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Fragmento de código

    El siguiente fragmento de código muestra cómo mostrar mosaicos de imágenes geográficas de Bing Maps en Angular IgxGeographicMapComponent usando la clase IgxBingMapsMapImagery.

    <igx-geographic-map #map
        width="100%"
        height="100%"
        zoomable="true" >
    </igx-geographic-map>
    html
    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;
    ts

    Propiedades

    The following table summarized properties of the IgxBingMapsMapImagery class:

    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.

    Referencias de API