React Binding Geographic Data Models

Ignite UI for React 지도 구성 요소는 지리 이미지 지도 위의 데이터 모델에서 얻은 지리 공간 데이터 또는 지리 공간을 표시하도록 설계되었습니다. 지리적 수열의 속성은ItemsSource 데이터 모델에 결합하는 목적으로 사용됩니다. 이 속성은 커스텀 객체 배열을 묶을 수 있습니다.

React Binding Geographic Data Models Example

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

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

Code Snippet

다음 코드는 다음 파일을 어떻게 결합하는지 보여줍니다.IgrGeographicSymbolSeries 전 세계 일부 도시의 지리적 위치를 경도와 위도 좌표로 저장한 맞춤형 데이터 모델로 변환합니다. 또한, 우리는IgrGeographicPolylineSeries이 위치 간 최단 지리적 경로를 다음과 같이 그려 월드유틸리티

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

React Binding Geographic Data Models

React Binding Geographic Data Models Example

Code Snippet

API References