Web Components 地理ポリゴン マップ
Web Components マップ コンポーネントでは、IgcGeographicShapeSeriesComponent
を使用して、地理的コンテキストで形状ポリゴンを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、地理的位置で定義される国々または領域の図形を描画するためにしばしば使用されます。
Web Components 地理ポリゴン マップの例
IgcGeographicShapeSeriesComponent
は、地理空間データがポリラインではなくポリゴンでレンダリングされる以外、IgcGeographicPolylineSeriesComponent
とほとんど同じです。
データ要件
マップコントロールの他の種類の地理的シリーズと同様に、IgcGeographicShapeSeriesComponent
には、オブジェクトの配列にバインドできる ItemsSource
プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、shapeMemberPath
プロパティにマップされます。IgcGeographicShapeSeriesComponent
は、マップされたデータ列の点を使用してマップコントロールにポリゴンをプロットします。
コード スニペット
以下のコードは、IgcShapeDataSource
を使用してシェイプ ファイルからロードした世界の国々の図形に IgcGeographicShapeSeriesComponent
をバインドする方法を示します。
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
//...
connectedCallback() {
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
// loading a shapefile with geographic shapes
const sds = new IgcShapeDataSource();
sds.importCompleted = this.onDataLoaded;
sds.shapefileSource = "../shapes/WorldCountries.shp";
sds.databaseSource = "../shapes/WorldCountries.dbf";
sds.dataBind();
}
onDataLoaded(sds: IgcShapeDataSource, e: any) {
const shapeRecords = sds.getPointData();
const countriesNATO: any[] = [];
const countriesSCO: any[] = [];
const countriesARAB: any[] = [];
const countriesOther: any[] = [];
for (const record of shapeRecords) {
// using field/column names from .DBF file
const country = {
points: record.points,
name: record.fieldValues.NAME,
org: record.fieldValues.ALLIANCE,
pop: record.fieldValues.POPULATION
};
const group = record.fieldValues.ALLIANCE;
if (group === "NATO") {
countriesNATO.push(country);
} else if (group === "SCO") {
countriesSCO.push(country);
} else if (group === "ARAB LEAGUE") {
countriesARAB.push(country);
} else {
countriesOther.push(country);
}
}
this.createSeries(countriesNATO, "rgb(32, 146, 252)", "NATO");
this.createSeries(countriesSCO, "rgb(252, 32, 32)", "SCO");
this.createSeries(countriesARAB, "rgb(14, 194, 14)", "AL");
this.createSeries(countriesOther, "rgb(146, 146, 146)", "Other");
}
createSeries(shapeData: any[], shapeBrush: string, shapeTitle: string)
{
const seriesName = shapeTitle + "series";
const geoSeries = new IgcGeographicShapeSeriesComponent();
geoSeries.dataSource = shapeData;
geoSeries.shapeMemberPath = "points";
geoSeries.brush = shapeBrush;
geoSeries.outline = "Black";
geoSeries.thickness = 1;
geoSeries.title = shapeTitle;
this.geoMap.series.add(geoSeries);
}