Web Components Esri Maps에서 이미지 표시

    IgcArcGISOnlineMapImageryEsri 회사에서 만든 무료 지리 이미지 매핑 서비스입니다. 40개 이상의 세계 지리 이미지 타일과 미국의 일부 주제별 타일을 제공합니다. 이 지리 이미지 서비스는 www.arcgisonline.com 웹사이트에서 직접 접속할 수 있습니다.

    Web Components Displaying Imagery from Esri Maps Example

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Code Snippet

    다음 코드 조각은 using IgcArcGISOnlineMapImagery 클래스에서 Esri 이미지 서버의 Web Components 지리적 이미지 타일을 IgcGeographicMapComponent 표시하는 방법을 보여줍니다.

    import { IgcGeographicMap } from 'igniteui-webcomponents-maps';
    import { IgcArcGISOnlineMapImagery } from 'igniteui-webcomponents-maps';
    // ...
    const tileSource = new IgcArcGISOnlineMapImagery();
    tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
    
    const geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent
    geoMap.backgroundContent = tileSource;
    ts
    Ignite UI for Web Components | CTA Banner

    에스리 유틸리티

    또는 Esri 이미지 서버에서 제공하는 모든 스타일을 정의하는 EsriUtility를 사용할 수 있습니다.

    import { IgcGeographicMap } from 'igniteui-webcomponents-maps';
    import { IgcArcGISOnlineMapImagery } from 'igniteui-webcomponents-maps';
    import { EsriUtility, EsriStyle } from './EsriUtility';
    // ...
    const tileSource = new IgcArcGISOnlineMapImagery();
    tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap);
    
    const geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent
    geoMap.backgroundContent = tileSource;
    ts

    API References