Angular 맵 개요

Ignite UI for Angular 하면 지리적 위치가 포함된 뷰 모델 데이터나 셰이프 파일에서 로드된 지리공간 데이터를 지리적 이미지 맵에 표시할 수 있습니다.

Angular 맵 예제

다음 샘플은 버블 시리즈라고도 불리는 데이터를IgxGeographicMapComponentIgxGeographicProportionalSymbolSeriesComponent 어떻게 표시하는지 보여줍니다.

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

지도의 시리즈 속성은 무제한 수의 지리적 연속을 렌더링하는 데 사용됩니다. 이 부동산은 지리적 연속 객체들의 집합이며, 어떤 종류의 지리적 연쇄도 추가할 수 있습니다. 예를 들어,IgxGeographicSymbolSeriesComponent 도시와 같은IgxGeographicPolylineSeriesComponent 지리적 위치를 도표할 때, 이 지리적 위치 간의 연결(예: 도로)을 도표할 때 추가할 수 있습니다.

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

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

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

Microsoft Bing 블로그

종속성

Angular 지리적 지도 구성 요소를 사용하려면 먼저 다음 패키지를 설치해야 합니다.

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

구성요소 모듈

IgxGeographicMapComponent다음 모듈들이 필요하지만, DataChartInteractivityModule은 맵 콘텐츠를 팬닝하거나 확대하는 등 마우스 상호작용에만 필요합니다.

// app.module.ts
import { IgxGeographicMapModule } from 'igniteui-angular-maps';
import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxGeographicMapModule,
        IgxDataChartInteractivityModule
        // ...
    ]
})
export class AppModule {}

import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';

@Component({
  selector: "app-map-overview",
  styleUrls: ["./map-overview.component.scss"],
  templateUrl: "./map-overview.component.html"
})

export class MapOverviewComponent implements AfterViewInit {

    @ViewChild ("map")
    public map: IgxGeographicMapComponent;
    constructor() {
    }

    public ngAfterViewInit(): void {
        this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 };
    }
}

용법

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

<div className="sampleRoot" >
    <igx-geographic-map #map
        width="700px"
        height="500px"
        zoomable="true" >
    </igx-geographic-map>
</div>

추가 리소스

다음 주제에서 관련 Angular 맵 기능에 대한 자세한 정보를 찾을 수 있습니다.

지리적 지도 탐색

API 참조

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

Angular 맵 개요

Angular 맵 예제

종속성

구성요소 모듈

용법

추가 리소스

API 참조

테마