Bing Maps에서 이미지 표시 Angular

    NOTE: As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028.

    For more details:

    Microsoft Bing Blogs

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

    Angular Displaying Imagery from Bing Maps Example

    Code Snippet

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

    <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