Web Components 지리 버블 지도
Web Components 지도 구성 요소에서는 IgcGeographicProportionalSymbolSeriesComponent
사용하여 애플리케이션의 데이터로 지정된 지리적 위치에 거품이나 비례 표식을 그릴 수 있습니다. 이 지도 시리즈는 백화점, 창고 또는 사무실과 같은 특정 비즈니스 사례에서 관심 지점을 강조하는 데 유용할 수 있습니다. 또한 차량 관리 시스템이나 동적 차량 추적을 위한 GPS 시스템에서 이 지도 시리즈를 사용할 수 있습니다.
Web Components Geographic Bubble Map Example
위의 데모는 IgcGeographicProportionalSymbolSeriesComponent
시리즈와 시리즈의 데이터 바인딩 옵션을 지정하는 방법을 보여줍니다. 자동 마커 선택은 마커 충돌 방지 논리와 함께 구성되며 마커 윤곽선 및 채우기 색상도 지정됩니다.
Configuration Summary
지도 컨트롤의 다른 유형의 분산 계열과 마찬가지로 IgcGeographicProportionalSymbolSeriesComponent
계열에는 객체 배열에 바인딩할 수 있는 ItemsSource
속성이 있습니다. 또한 항목 소스의 각 데이터 항목에는 지리적 경도 및 위도 좌표를 저장하고 longitudeMemberPath
및 latitudeMemberPath
속성을 사용하여 이러한 데이터 열을 매핑하는 두 개의 데이터 열이 있어야 합니다. radiusScale
및 radiusMemberPath
설정은 거품의 반경을 구성합니다.
다음 표에는 데이터 바인딩에 사용되는 GeographicHighDensityScatterSeries 계열 속성이 요약되어 있습니다.
재산 | 유형 | 설명 |
---|---|---|
ItemsSource |
어느 | 항목 소스를 가져오거나 설정합니다. |
longitudeMemberPath |
끈 | ItemsSource 속성을 사용하여 할당된 항목의 경도 값 위치를 결정합니다. |
latitudeMemberPath |
끈 | ItemsSource 속성을 사용하여 할당된 항목의 위도 값 위치를 결정합니다. |
radiusMemberPath |
끈 | 계열의 반경 값을 가져오는 데 사용할 경로를 설정합니다. |
radiusScale |
IgcSizeScaleComponent |
현재 거품 계열의 반경 배율 속성을 가져오거나 설정합니다. |
minimumValue |
어느 | 값 하위 범위를 계산하기 위한 최소값을 구성합니다. |
maximumValue |
어느 | 값 하위 범위를 계산하기 위한 최대값을 구성합니다. |
Code Snippet
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
import { IgcGeographicProportionalSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcValueBrushScaleComponent } from 'igniteui-webcomponents-charts';
import { IgcSizeScaleComponent } from 'igniteui-webcomponents-charts';
//...
connectedCallback() {
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
this.addSeriesWith(WorldLocations.getAll());
}
addSeriesWith(locations: any[])
{
const sizeScale = new IgcSizeScaleComponent();
sizeScale.minimumValue = 4;
sizeScale.maximumValue = 60;
const brushes = [
"rgba(14, 194, 14, 0.4)", // semi-transparent green
"rgba(252, 170, 32, 0.4)", // semi-transparent orange
"rgba(252, 32, 32, 0.4)", // semi-transparent red
];
const brushScale = new IgcValueBrushScaleComponent();
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const symbolSeries = new IgcGeographicProportionalSymbolSeriesComponent ();
symbolSeries.dataSource = locations;
symbolSeries.markerType = MarkerType.Circle;
symbolSeries.radiusScale = sizeScale;
symbolSeries.fillScale = brushScale;
symbolSeries.fillMemberPath = "pop";
symbolSeries.radiusMemberPath = "pop";
symbolSeries.latitudeMemberPath = "lat";
symbolSeries.longitudeMemberPath = "lon";
symbolSeries.markerOutline = "rgba(0,0,0,0.3)";
this.geoMap.series.add(symbolSeries);
}