Visualización Angular de imágenes de Esri Maps

    IgxArcGISOnlineMapImagery es un servicio gratuito de mapeo de imágenes geográficas creado por la empresa Esri. Proporciona más de 40 estilos de mosaicos de imágenes geográficas del mundo y algunos mosaicos temáticos para los EE. UU. Se puede acceder a este servicio de imágenes geográficas directamente en el sitio web www.arcgisonline.com.

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

    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 Angular de servidores de imágenes Esri en IgxGeographicMapComponent usando la clase IgxArcGISOnlineMapImagery.

    <igx-geographic-map #map
        width="100%"
        height="100%"
        zoomable="true" >
    </igx-geographic-map>
    html
    import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
    import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
    // ...
    public geoMap: IgxGeographicMapComponent;
    
    const tileSource = new IgxArcGISOnlineMapImagery();
    tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
    
    this.geoMap.backgroundContent = tileSource;
    ts

    Utilidad Esri

    Alternativamente, puede utilizar EsriUtility, que define todos los estilos proporcionados por los servidores de imágenes de Esri.

    import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
    import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
    import { EsriUtility, EsriStyle } from './EsriUtility';
    // ...
    public geoMap: IgxGeographicMapComponent;
    
    const tileSource = new IgxArcGISOnlineMapImagery();
    tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap);
    
    this.geoMap.backgroundContent = tileSource;
    ts

    Referencias de API