Angular Binding Multiple Data Sources

    Ignite UI for Angular 맵에서 여러 지리적 계열 개체를 추가하여 사용자 지정 데이터 원본을 지리 공간 데이터와 오버레이할 수 있습니다. 예를 들어, IgxGeographicSymbolSeriesComponent 공항의 지리적 위치를 플로팅하기 위한 경우, 공항 간 항공편을 플로팅하기 위한 경우, IgxGeographicPolylineSeriesComponent 2nd IgxGeographicPolylineSeriesComponent는 주요 지리적 좌표의 격자선을 플로팅하기 위한 것입니다.

    Angular 여러 데이터 소스를 바인딩하는 예

    EXAMPLE
    WorldConnections.ts
    WorldLocations.ts
    WorldUtility.ts
    MODULES
    TS
    HTML
    SCSS

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

    이 항목에서는 다음과 같은 지리 공간 데이터를 표시하는 여러 지리 계열을 표시하는 방법을 단계별로 설명합니다.

    이 조합이나 다른 조합으로 지리적 계열을 사용하여 원하는 데이터를 표시할 수 있습니다.

    데이터 소스 생성

    Ignite UI for Angular 맵에 표시하려는 모든 지리적 계열에 대한 데이터 원본을 생성합니다. 예를 들어 WorldConnections 스크립트를 사용할 수 있습니다.

    <div className="sampleRoot" >
        <igx-geographic-map #map
            width="700px"
            height="500px"
            zoomable="true" >
        </igx-geographic-map>
    </div>
    
    <ng-template let-series="series" let-item="item" #polylineTooltipTemplate>
            <div>
                <span>
                Arrival: {{item.origin.country}}
                </span>
                <br/>
                <span>
                Destination: {{item.dest.country}}
                </span>
                <br/>
                <span>
                Distance: {{item.distance}} miles
                </span>
            </div>
        </ng-template>
    
        <ng-template let-series="series" let-item="item" #pointTooltipTemplate>
                <div>
                    <span>
                    {{item?.country}}
                    </span>
                    <br />
                    <span>
                    {{item?.name}}
                    </span>
                    <br />
                    <span>
                    Population: {{item.pop}} M
                    </span>
                    <br/>
                    <span>
                    Flights: {{item.flights}}
                    </span>
                </div>
            </ng-template>
    html

    항공편 중첩

    주요 공항 간의 항공편 연결이 있는 첫 번째 IgxGeographicPolylineSeriesComponent 개체를 만들고 Ignite UI for Angular 지도의 시리즈 컬렉션에 추가합니다.

    <igx-geographic-polyline-series  #polylineSeries
            [tooltipTemplate]="polylineTooltipTemplate"
                    name="polylineSeries"
                    shapeMemberPath="points"
                    shapeStroke="rgba(147, 15, 180, 0.5)"
                    thickness={3.0} >
    </igx-geographic-polyline-series>
    html

    격자선 오버레이

    지리적 눈금선이 있는 두 번째 IgxGeographicPolylineSeriesComponent 개체를 만들고 Ignite UI for Angular 지도의 Series 컬렉션에 추가합니다.

      <igx-geographic-polyline-series  #polylineSeries
                [tooltipTemplate]="polylineTooltipTemplate"
                     datasource = worldFlights
                     name="polylineSeries"
                     shapeMemberPath="points"
                     shapeStroke="rgba(196, 14, 14,0.05)"
                     thickness={3.0} >
        </igx-geographic-polyline-series>
    html
    App Builder | CTA 배너

    공항 오버레이

    공항 포인트가 있는 개체를 만들고 IgxGeographicSymbolSeriesComponent 지리 Ignite UI for Angular 지도의 Series 컬렉션에 추가합니다.

    <igx-geographic-symbol-series  #symbolSeries
        name="symbolSeries"
        longitudeMemberPath="longitude"
        latitudeMemberPath="latitude"
        markerType="Circle"
        markerOutline="rgb(73, 73, 73)"
        markerBrush="White" >
    </igx-geographic-symbol-series>
    html

    요약

    귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사할 수 있습니다.

    import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
    import { MarkerType } from 'igniteui-angular-charts';
    import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
    import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps";
    import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps";
    import { WorldConnections } from "../../utilities/WorldConnections";
    
    @Component({
      selector: "app-map-binding-multiple-data-sources",
      styleUrls: ["./map-binding-multiple-data-sources.component.scss"],
      templateUrl: "./map-binding-multiple--data-sources.component.html"
    })
    
    export class MapBindingMultipleSourcesComponent implements AfterViewInit {
    
        @ViewChild ("map")
        public map: IgxGeographicMapComponent;
    
        @ViewChild("polylineTooltipTemplate")
        public polylineTooltipTemplate: TemplateRef<object>;
    
        @ViewChild("pointTooltipTemplate")
        public pointTooltipTemplate: TemplateRef<object>;
    
        public data: any;
        constructor() {
        }
    
        public ngAfterViewInit(): void {
          this.map.windowRect = { left: 0.195, top: 0.1, width: 0.5, height: 0.5 };
    
          const worldFlights = WorldConnections.getFlights();
          const worldAirports = WorldConnections.getAirports();
          const worldGridlines = WorldConnections.getGridlines();
    
          this.addPolylineSeriesWith(worldFlights);
          this.addGridlineSeriesWith(worldGridlines);
          this.addSymbolSeriesWith(worldAirports);
        }
    
        public addGridlineSeriesWith(data: any[]) {
            const gridSeries = new IgxGeographicPolylineSeriesComponent();
            gridSeries.dataSource = data;
            gridSeries.shapeMemberPath = "points";
            gridSeries.shapeStroke = "Gray";
            gridSeries.shapeStrokeThickness = 1;
            this.map.series.add(gridSeries);
        }
    
        public addPolylineSeriesWith(data: any[]) {
            const lineSeries = new IgxGeographicPolylineSeriesComponent ();
            lineSeries.dataSource = data;
            lineSeries.shapeMemberPath = "points";
            lineSeries.shapeStroke = "rgba(196, 14, 14,0.05)";
            lineSeries.shapeStrokeThickness = 4;
            lineSeries.tooltipTemplate = this.polylineTooltipTemplate;
            this.map.series.add(lineSeries);
        }
    
        public addSymbolSeriesWith(data: any[]) {
            const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
            symbolSeries.dataSource = data;
            symbolSeries.markerType = MarkerType.Circle;
            symbolSeries.latitudeMemberPath = "lat";
            symbolSeries.longitudeMemberPath = "lon";
            symbolSeries.markerBrush = "#aad3df";
            symbolSeries.markerOutline = "rgb(73, 73, 73)";
            symbolSeries.thickness = 1;
            symbolSeries.tooltipTemplate = this.pointTooltipTemplate;
            this.map.series.add(symbolSeries);
        }
    }
    ts

    API 참조