Bing Maps에서 이미지 표시 Angular

참고: 2025년 6월 30일부터 모든 Microsoft Bing Maps for Enterprise Basic(무료) 계정이 사용 중지됩니다. 여전히 미결제 기본 계정 및 키를 사용하고 있다면 지금이 서비스 중단을 방지하기 위해 조치를 취해야 할 때입니다. Bing Maps for Enterprise 라이선스 보유자는 2028년 6월 30일까지 애플리케이션에서 Bing Maps를 계속 사용할 수 있습니다.

자세한 내용은:

Microsoft Bing 블로그

The Angular IgxBingMapsMapImagery is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component can display geographic imagery from Bing Maps in the map’s background content using the IgxBingMapsMapImagery class.

Angular Displaying Imagery from Bing Maps Example

<img src=".. /images/general/BingMapsImagery.png"alt=" Angular Bing 지도 이미지" />

Code Snippet

The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular IgxGeographicMapComponent using IgxBingMapsMapImagery class.

<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

• BingMapsImageryStyle
• IgxBingMapsMapImagery
• IgxGeographicMapComponent