React Binding Geographic Data Models

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

    React Binding 지리적 데이터 모델 예제

    EXAMPLE
    DATA
    TSX

    이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

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

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

    코드 조각

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

    import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
    import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
    import WorldUtils from "./WorldUtils" ;
    // ...
    
    constructor(props: any) {
        super(props);
    
        const cityDAL = { lat:  32.763, lon: -96.663, country: "US", name: "Dallas" };
        const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name:"Auckland" };
        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 citySNG = { lat:  1.229, lon: 104.177,  country: "Singapore", name:"Singapore" };
        const cityMOS = { lat: 55.750, lon:  37.700,  country: "Russia", name: "Moscow"};
    
        this.flights = [
            { origin: cityDAL, dest: citySNG, color: "Green" },
            { origin: cityMOS, dest: cityNZL, color: "Red" },
            { origin: cityCHL, dest: cityJAP, color: "Blue" },
        ];
    
        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 IgrGeographicSymbolSeries ( { name: "symbolSeries" });
        symbolSeries.dataSource = geoLocations;
        symbolSeries.markerType = MarkerType.Circle;
        symbolSeries.latitudeMemberPath = "lat";
        symbolSeries.longitudeMemberPath = "lon";
        symbolSeries.markerBrush  = "White";
        symbolSeries.markerOutline = flight.color;
        symbolSeries.thickness = 1;
        this.geoMap.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 = [ { points: geoPath } ];
        const lineSeries = new IgrGeographicPolylineSeries ( { name: "lineSeries" });
        lineSeries.dataSource = geoRoutes;
        lineSeries.shapeMemberPath = "points";
        lineSeries.shapeStrokeThickness = 9;
        lineSeries.shapeOpacity = 0.5;
        lineSeries.shapeStroke = flight.color;
        this.geoMap.series.add(lineSeries);
    }
    ts
    Ignite UI for React | CTA 배너

    API 참조