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

    Angular IgxBingMapsMapImagery는 Microsoft® 회사에서 제공하는 지리 이미지 매핑 서비스입니다. 3가지 스타일의 세계 지리 이미지 타일을 제공합니다. 이 지리 이미지 서비스는 www.bing.com/maps 웹 사이트에서 직접 액세스할 수 있습니다. Ignite UI for Angular IgxBingMapsMapImagery 클래스를 사용하여 지도의 배경 콘텐츠에 Bing 지도의 지리적 이미지를 표시할 수 있습니다.

    Angular Displaying Imagery from Bing Maps Example

    Code Snippet

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

    <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

    The following table summarized properties of the IgxBingMapsMapImagery class:

    속성 이름 부동산 유형 설명
    apiKey 끈 Bing Maps 이미지 서비스에 필요한 API 키를 설정하기 위한 속성을 나타냅니다. www.bingmapsportal.com 웹사이트에서 이 키를 얻어야 합니다.
    imageryStyle BingMapsImageryStyle Bing Maps 이미지 타일 지도 스타일을 설정하기 위한 속성을 나타냅니다. 이 속성은 다음과 같이 설정할 수 있습니다.BingMapsImageryStyle 열거 값:
    • 항공 - 도로 또는 라벨 오버레이 없이 항공 지도 스타일을 지정합니다.
    • AerialWithLabels - 도로 및 라벨 오버레이가 포함된 항공 지도 스타일을 지정합니다.
    • 도로 - 항공 오버레이 없이 도로 지도 스타일을 지정합니다.
    bingImageryRestUri 끈 TilePath 및 SubDomains의 출처를 지정하는 Bing Imagery REST URI를 설정하기 위한 속성을 나타냅니다. 이는 선택적 속성이며 지정하지 않으면 기본 REST URI를 사용합니다.
    cultureName 끈 타일 소스의 문화권 이름을 설정하기 위한 속성을 나타냅니다.
    isDeferredLoad 부울 유효한 속성 값 할당 시 Bing Maps 서비스가 자동 초기화되어야 하는지 여부를 지정하는 속성을 나타냅니다.
    isInitialized 부울 Bing Maps 서비스의 지리 이미지 타일이 초기화되고 지도 구성 요소에서 렌더링할 준비가 되었을 때 발생하는 True로 설정된 속성을 나타냅니다.
    subDomains SubDomainsCollection URI 하위 도메인의 이미지 컬렉션을 나타냅니다.
    tilePath 끈 지도 타일 이미지 URI를 설정하는 속성을 나타냅니다. 이는 Bing 지도의 실제 위치입니다.

    API References