Web Components 지도 개요

    Ignite UI for Web Components map component를 사용하면 뷰 모델의 지리적 위치가 포함된 데이터 또는 형상 파일에서 로드된 지리 공간 데이터를 지리적 이미지 맵에 표시할 수 있습니다.

    Web Components 지도 예시

    다음 샘플은 Bubble Series라고도 알려진 IgcGeographicProportionalSymbolSeriesComponent 사용하여 IgcGeographicMapComponent에 데이터를 표시하는 방법을 보여줍니다.

    지도 구성 요소를 사용하면 Bing Maps™ 및 Open Street Maps에서 지리 이미지를 렌더링할 수 있습니다. 지도는 수만 개의 데이터 포인트에 대한 플롯을 제공하고 컨트롤이 실시간 피드를 처리할 수 있도록 몇 밀리초마다 업데이트합니다.

    지도의 시리즈 속성은 무제한의 지리적 시리즈 렌더링을 지원하는 데 사용됩니다. 이 속성은 지리 계열 개체의 컬렉션이며 모든 유형의 지리 계열을 여기에 추가할 수 있습니다. 예를 들어 도시와 같은 지리적 위치를 그리기 위해 IgcGeographicSymbolSeriesComponent 추가하고 이러한 지리적 위치 간의 연결(예: 도로)을 그리기 위해 IgcGeographicPolylineSeriesComponent를 추가할 수 있습니다.

    지도는 마우스, 키보드 또는 코드 숨김을 사용하여 지도 콘텐츠를 탐색하기 위한 사용자 정의 가능한 탐색 동작을 제공합니다.

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

    자세한 내용은 다음을 방문하십시오.

    Microsoft Bing 블로그

    Dependencies

    Web Components geographic map 구성 요소를 사용하려면 먼저 다음 패키지를 설치해야 합니다.

    npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-charts
npm install --save igniteui-webcomponents-maps

    Component Modules

    ​IgcGeographicMapComponent 에는 다음 모듈이 필요하지만 DataChartInteractivityModule은 지도 콘텐츠 이동 및 확대/축소와 같은 마우스 상호 작용에만 필요합니다.

    import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMap } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';

IgcGeographicMapModule.register();
IgcDataChartInteractivityModule.register();

    import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcDataChartInteractivityModule,
    IgcGeographicMapModule
);

    Usage

    이제 지도 모듈을 가져왔으므로 다음 단계는 지리 지도를 만드는 것입니다. 다음 코드는 이를 수행하고 지도 확대를 활성화하는 방법을 보여줍니다.

    <igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>

    Additional Resources

    다음 항목에서 관련 Web Components 맵 기능에 대한 자세한 정보를 찾을 수 있습니다.

    API References

    다음은 위 섹션에서 언급된 API 멤버 목록입니다.