Bing Maps에서 이미지 표시 React

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

    자세한 내용은:

    Microsoft Bing 블로그

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

    React Displaying Imagery from Bing Maps Example

    Code Snippet

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

    import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrBingMapsMapImagery } from 'igniteui-react-maps';
import { BingMapsImageryStyle } from 'igniteui-react-maps';
// ...
const tileSource = new IgrBingMapsMapImagery();
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;

const geoMap = new IgrGeographicMap({ name: "geoMap" });
geoMap.backgroundContent = tileSource;

    Properties

    다음 표에는 클래스의 속성이 요약되어 IgrBingMapsMapImagery 있습니다.

    속성 이름 부동산 유형 설명
    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