Angular Binding Geographic Data Models

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

    Angular Binding Geographic Data Models Example

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

    지리적 시리즈 속성 설명
    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 속성이 있는 객체 배열의 배열에 매핑되어야 합니다.

    Code Snippet

    다음 코드는 경도 및 위도 좌표를 사용하여 저장된 세계 일부 도시의 지리적 위치를 포함하는 사용자 정의 데이터 모델에 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>

    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);
    }
}

    API References