Esri 지도의 이미지를 Angular 표시하는 방법

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

    Angular Displaying Imagery from Esri Maps Example

    Code Snippet

    다음 코드 조각은 IgxArcGISOnlineMapImagery 클래스를 사용하여 IgxGeographicMapComponent의 Esri 이미지 서버에서 Angular 지리 이미지 타일을 표시하는 방법을 보여줍니다.

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

    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;

    Esri Utility

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

    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;

    API References