Angular 맵 개요

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

    Angular 맵 예제

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

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

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

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

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

    종속성

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

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

    컴포넌트 모듈

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

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

@NgModule({
    imports: [
        // ...
        IgxGeographicMapModule,
		IgxDataChartInteractivityModule
        // ...
    ]
})
export class AppModule {}
ts
    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 };
    }
}
ts

    용법

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

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

    추가 리소스

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

    App Builder | CTA 배너

    API 참조

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