Angular 지리 버블 지도
Angular 지도 구성 요소에서는 IgxGeographicProportionalSymbolSeriesComponent
사용하여 애플리케이션의 데이터로 지정된 지리적 위치에 거품이나 비례 마커를 그릴 수 있습니다. 이 지도 시리즈는 백화점, 창고 또는 사무실과 같은 특정 비즈니스 사례에서 관심 지점을 강조하는 데 유용할 수 있습니다. 또한 차량 관리 시스템이나 동적 차량 추적을 위한 GPS 시스템에서 이 지도 시리즈를 사용할 수 있습니다.
Angular Geographic Bubble Map Example
위의 데모는 IgxGeographicProportionalSymbolSeriesComponent
시리즈와 시리즈의 데이터 바인딩 옵션을 지정하는 방법을 보여줍니다. 자동 마커 선택은 마커 충돌 방지 논리와 함께 구성되며 마커 윤곽선 및 채우기 색상도 지정됩니다.
Configuration Summary
지도 컨트롤의 다른 유형의 분산 계열과 유사하게 IgxGeographicProportionalSymbolSeriesComponent
계열에는 객체 배열에 바인딩될 수 있는 ItemsSource
속성이 있습니다. 또한 항목 소스의 각 데이터 항목에는 지리적 경도 및 위도 좌표를 저장하고 longitudeMemberPath
및 latitudeMemberPath
속성을 사용하여 이러한 데이터 열을 매핑하는 두 개의 데이터 열이 있어야 합니다. radiusScale
및 radiusMemberPath
설정은 거품의 반경을 구성합니다.
다음 표에는 데이터 바인딩에 사용되는 GeographicHighDensityScatterSeries 계열 속성이 요약되어 있습니다.
재산 | 유형 | 설명 |
---|---|---|
ItemsSource |
어느 | 항목 소스를 가져오거나 설정합니다. |
longitudeMemberPath |
끈 | ItemsSource 속성을 사용하여 할당된 항목의 경도 값 위치를 결정합니다. |
latitudeMemberPath |
끈 | ItemsSource 속성을 사용하여 할당된 항목의 위도 값 위치를 결정합니다. |
radiusMemberPath |
끈 | 계열의 반경 값을 가져오는 데 사용할 경로를 설정합니다. |
radiusScale |
IgxSizeScaleComponent |
현재 거품 계열의 반경 배율 속성을 가져오거나 설정합니다. |
minimumValue |
어느 | 값 하위 범위를 계산하기 위한 최소값을 구성합니다. |
maximumValue |
어느 | 값 하위 범위를 계산하기 위한 최대값을 구성합니다. |
Code Snippet
<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" #template>
<div>
<span>
{{item.name}}
</span>
</div>
</ng-template>
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxSizeScaleComponent } from 'igniteui-angular-charts';
import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts';
import { IgxDataContext } from 'igniteui-angular-core';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxGeographicProportionalSymbolSeriesComponent } from 'igniteui-angular-maps';
import { MarkerType } from 'igniteui-angular-charts';
import { WorldLocations } from "../../utilities/WorldLocations";
@Component({
selector: "app-map-geographic-scatter-proportional-series",
styleUrls: ["./map-geographic-scatter-proportional-series.component.scss"],
templateUrl: "./map-geographic-scatter-proportional-series.component.html"
})
export class MapTypeScatterBubbleSeriesComponent implements AfterViewInit {
@ViewChild ("map")
public map: IgxGeographicMapComponent;
@ViewChild ("template")
public tooltipTemplate: TemplateRef<object>;
constructor() {
}
public ngAfterViewInit(): void {
const sds = new IgxShapeDataSource();
sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp";
sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf";
sds.dataBind();
sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
}
public onDataLoaded(sds: IgxShapeDataSource, e: any) {
const shapeRecords = sds.getPointData();
console.log("loaded contour shapes: " + shapeRecords.length + " from /Shapes/WorldTemperatures.shp");
const contourPoints: any[] = [];
for (const record of shapeRecords) {
const temp = record.fieldValues.Contour;
// using only major contours (every 10th degrees Celsius)
if (temp % 10 === 0 && temp >= 0) {
for (const shapes of record.points) {
for (let i = 0; i < shapes.length; i++) {
if (i % 5 === 0) {
const p = shapes[i];
const item = { lon: p.x, lat: p.y, value: temp};
contourPoints.push(item);
}
}
}
}
}
console.log("loaded contour points: " + contourPoints.length);
this.addSeriesWith(WorldLocations.getAll());
}
public addSeriesWith(locations: any[]) {
const sizeScale = new IgxSizeScaleComponent();
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 IgxValueBrushScaleComponent();
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent();
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)";
symbolSeries.tooltipTemplate = this.tooltipTemplate;
this.map.series.add(symbolSeries);
}
}
API References
IgxGeographicProportionalSymbolSeriesComponent
ItemsSource
latitudeMemberPath
longitudeMemberPath
radiusMemberPath
radiusScale