Angular Binding Geographic Data Models

    Ignite UI for Angular 셰이프 파일의 지리 공간 데이터 및/또는 데이터 모델의 지리적 위치를 지리적 이미지 맵에 표시하도록 설계되었습니다. 지리적 시리즈의 ItemsSource 속성은 데이터 모델에 바인딩하는 목적으로 사용됩니다. 이 속성은 사용자 지정 개체 배열에 바인딩할 수 있습니다.

    Angular 바인딩 지리적 데이터 모델 예제

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

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

    다음 표에는 각 지역 시리즈 유형에 필요한 데이터 구조가 요약되어 있습니다.

    지리적 시리즈 속성 설명
    IgxGeographicSymbolSeriesComponent longitudeMemberPath, latitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgxGeographicHighDensityScatterSeriesComponent longitudeMemberPath, latitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgxGeographicProportionalSymbolSeriesComponent longitudeMemberPath, latitudeMemberPath, radiusMemberPath Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols
    IgxGeographicScatterAreaSeriesComponent longitudeMemberPath, latitudeMemberPath, colorMemberPath 값의 삼각측량을 위한 2개의 숫자 경도 및 위도 좌표와 1개의 숫자 열의 이름을 지정합니다.
    IgxGeographicContourLineSeriesComponent longitudeMemberPath, latitudeMemberPath, valueMemberPath 값의 삼각측량을 위한 2개의 숫자 경도 및 위도 좌표와 1개의 숫자 열의 이름을 지정합니다.
    IgxGeographicShapeSeriesComponent shapeMemberPath 데이터 열의 이름을 지정합니다.ItemsSource 모양의 지리적 지점을 포함하는 항목입니다. 이 속성은 x 및 y 속성이 있는 객체 배열의 배열에 매핑되어야 합니다.
    IgxGeographicPolylineSeriesComponent shapeMemberPath 데이터 열의 이름을 지정합니다.ItemsSource 선의 지리적 좌표를 포함하는 항목입니다. 이 속성은 x 및 y 속성이 있는 객체 배열의 배열에 매핑되어야 합니다.

    코드 조각

    다음 코드는 경도 및 위도 좌표를 사용하여 저장된 세계 일부 도시의 지리적 위치를 포함하는 사용자 정의 데이터 모델에 IgxGeographicSymbolSeriesComponent를 바인딩하는 방법을 보여줍니다. 또한 IgxGeographicPolylineSeriesComponent 사용하여 WorldUtility를 사용하여 이러한 위치 사이의 최단 지리적 경로를 표시합니다.

    <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" #pointSeriesTemplate>
            <div>
                <span [style.color]="series.brush">
                    {{item.country}}
                </span>
            </div>
    </ng-template>
    
    <ng-template let-series="series" let-item="item" #polylineSeriesTooltipTemplate>
        <div>
            <span [style.color]="series.brush">
                Departure: {{item.origin.country}}
            </span>
            <br/>
            <span [style.color]="series.brush">
                Arrival: {{item.dest.country}}
            </span>
        </div>
    </ng-template>
    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 { WorldUtils } from "../../utilities/WorldUtils";
    
    @Component({
      selector: "app-map-binding-geographic-data-models",
      styleUrls: ["./map-binding-geographic-data-models.component.scss"],
      templateUrl: "./map-binding-geographic-data-models.component.html"
    })
    
    export class MapBindingDataModelComponent implements AfterViewInit {
    
        @ViewChild ("map")
        public map: IgxGeographicMapComponent;
        @ViewChild("pointSeriesTemplate")
        public pointSeriesTemplate: TemplateRef<object>;
        @ViewChild("polylineSeriesTooltipTemplate")
        public polylineSeriesTooltipTemplate: TemplateRef<object>;
        public flights: any[];
        constructor() {
        }
    
        public ngAfterViewInit(): void {
            const cityDAL = { lat:  32.763, lon: -96.663, country: "US", name: "Dallas" };
            const citySYD = { lat: -33.889, lon: 151.028, country: "Australia", name: "Sydney" };
            const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name: "Auckland" };
            const cityQTR = { lat: 25.285, lon:  51.531,  country: "Qatar", name: "Doha" };
            const cityPAN = { lat:  8.949, lon: -79.400,  country: "Panama", name: "Panama" };
            const cityCHL = { lat: -33.475, lon: -70.647, country: "Chile", name: "Santiago" };
            const cityJAP = { lat:  35.683, lon: 139.809, country: "Japan", name: "Tokyo" };
            const cityALT = { lat: 33.795,  lon: -84.349, country: "US", name: "Atlanta" };
            const cityJOH = { lat: -26.178, lon: 28.004,  country: "South Africa", name: "Johannesburg" };
            const cityNYC = { lat: 40.750, lon: -74.0999, country: "US", name: "New York" };
            const citySNG = { lat:  1.229, lon: 104.177,  country: "Singapore", name: "Singapore" };
            const cityMOS = { lat: 55.750, lon:  37.700,  country: "Russia", name: "Moscow" };
            const cityROM = { lat:  41.880, lon: 12.520,  country: "Italy", name: "Roma" };
            const cityLAX = { lat: 34.000, lon: -118.25,  country: "US", name: "Los Angeles" };
    
            this.flights = [
                { origin: cityDAL, dest: citySNG, color: "Green" },
                { origin: cityMOS, dest: cityNZL, color: "Red" },
                { origin: cityCHL, dest: cityJAP, color: "Blue" },
                { origin: cityPAN, dest: cityROM, color: "Orange" },
                { origin: cityALT, dest: cityJOH, color: "Black" },
                { origin: cityNYC, dest: cityQTR, color: "Purple" },
                { origin: cityLAX, dest: citySYD, color: "Gray" }
            ];
    
            for (const flight of this.flights) {
                this.createPolylineSeries(flight);
                this.createSymbolSeries(flight);
            }
        }
    
        public createSymbolSeries(flight: any) {
            const geoLocations = [flight.origin, flight.dest ];
            const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
            symbolSeries.dataSource = geoLocations;
            symbolSeries.markerType = MarkerType.Circle;
            symbolSeries.latitudeMemberPath = "lat";
            symbolSeries.longitudeMemberPath = "lon";
            symbolSeries.markerBrush  = "White";
            symbolSeries.markerOutline = flight.color;
            symbolSeries.thickness = 1;
            symbolSeries.tooltipTemplate = this.pointSeriesTemplate;
    
            this.map.series.add(symbolSeries);
        }
    
        public createPolylineSeries(flight: any) {
            const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest);
            const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest);
            const geoRoutes = [
                {
                  dest: flight.dest,
                  distance: geoDistance,
                  origin: flight.origin,
                  points: geoPath,
                  time: geoDistance / 850
            }];
    
            const lineSeries = new IgxGeographicPolylineSeriesComponent ();
            lineSeries.dataSource = geoRoutes;
            lineSeries.shapeMemberPath = "points";
            lineSeries.shapeStrokeThickness = 9;
            lineSeries.shapeOpacity = 0.5;
            lineSeries.shapeStroke = flight.color;
            lineSeries.tooltipTemplate = this.polylineSeriesTooltipTemplate;
            this.map.series.add(lineSeries);
        }
    }
    ts

    API 참조