Web Components 지리 기호 지도

Web Components 지도 구성 요소에서는 IgcGeographicSymbolSeriesComponent 사용하여 지리적 맥락에서 점이나 표식을 사용하여 지리 공간 데이터를 표시할 수 있습니다. 이러한 유형의 지리 시리즈는 도시, 공항, 지진 또는 관심 장소와 같은 지리적 위치 모음을 렌더링하는 데 자주 사용됩니다.

Web Components Geographic Symbol Map Example

Data Requirements

지도 구성 요소의 다른 유형의 지리적 계열과 마찬가지로 IgcGeographicSymbolSeriesComponent 에는 객체 배열에 바인딩될 수 있는 ItemsSource 속성이 있습니다. 또한 이 개체의 각 데이터 항목에는 지리적 위치(경도 및 위도)를 저장하는 두 개의 숫자 데이터 열이 있어야 합니다. 그런 다음 이러한 데이터 열은 latitudeMemberPath 및 longitudeMemberPath 속성에 매핑됩니다. IgcGeographicSymbolSeriesComponent는 이러한 매핑된 데이터 열의 값을 사용하여 지리 지도 구성 요소의 기호 요소를 그립니다.

Code Snippet

다음 코드는 IgcShapeDataSource를 사용하여 모양 파일에서 로드된 도시 위치에 IgcGeographicSymbolSeriesComponent를 바인딩하는 방법을 보여줍니다.

<igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>

import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { MarkerType } from 'igniteui-webcomponents-charts';
//...
connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
    this.addSeriesWith(WorldLocations.getCities(), "Gray");
    this.addSeriesWith(WorldLocations.getCapitals(),"rgb(32, 146, 252)");
}

addSeriesWith(locations: any[], brush: string)
{
    const symbolSeries = new IgcGeographicSymbolSeriesComponent ();
    symbolSeries.dataSource = locations;
    symbolSeries.markerType = MarkerType.Circle;
    symbolSeries.latitudeMemberPath = "lat";
    symbolSeries.longitudeMemberPath = "lon";
    symbolSeries.markerBrush  = "White";
    symbolSeries.markerOutline = brush;

    this.geoMap.series.add(symbolSeries);
}

Web Components 지리 기호 지도

Web Components Geographic Symbol Map Example

Data Requirements

Code Snippet

API References