Web Components 地理ポリライン マップ
Web Components マップ コンポーネントでは、IgcGeographicPolylineSeriesComponent を使用して、地理的コンテキストでポリラインを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市または空港などの地理的位置間の道路または接続を描画するためにしばしば使用されます。
Web Components 地理ポリライン マップの例
IgcGeographicPolylineSeriesComponent は、IgcGeographicShapeSeriesComponent とよく似ていますが、地理空間データがポリゴンではなくポリラインでレンダリングされる点が異なります。
データ要件
コントロール内の他の種類の地理的シリーズと同様に、IgcGeographicPolylineSeriesComponent には、オブジェクトの配列にバインドできる ItemsSource プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、ShapeMemberPath プロパティにマップされます。IgcGeographicPolylineSeriesComponent は、コントロールで多角形をプロットするために、このマップされたデータ列のポイントを使用します。
コード スニペット
以下のコードは、IgcShapeDataSource を使用してシェイプ ファイルからロードした都市の場所に IgcGeographicPolylineSeriesComponent をバインドする方法を示します。
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
import { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
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/AmericanRoads.shp";
sds.databaseSource = "../shapes/AmericanRoads.dbf";
sds.dataBind();
}
onDataLoaded(sds: IgcShapeDataSource, e: any) {
const shapeRecords = sds.getPointData();
console.log("loaded AmericanRoads.shp " + shapeRecords.length);
const roadsUSA: any[] = [];
const roadsMEX: any[] = [];
const roadsCAN: any[] = [];
// filtering records of loaded shapefile
for (const record of shapeRecords) {
// reading field values loaded from DBF file
const type = record.fieldValues.RoadType;
const road = {
country: record.fieldValues.Country,
length: record.fieldValues.RoadLength / 10,
points: record.points,
type: type === 1 ? "Highway" : "Road",
};
// grouping road items by country names
if (type === 1 || type === 2) {
if (road.country === "USA") {
roadsUSA.push(road);
} else if (road.country === "MEX") {
roadsMEX.push(road);
} else if (road.country === "CAN") {
roadsCAN.push(road);
}
}
}
// creating polyline series for roads of each country
this.addSeriesWith(roadsCAN, "rgba(252, 32, 32, 0.9)");
this.addSeriesWith(roadsUSA, "rgba(3, 121, 231, 0.9)");
this.addSeriesWith(roadsMEX, "rgba(14, 194, 14, 0.9)");
}
public addSeriesWith(shapeData: any[], shapeBrush: string) {
const lineSeries = new IgcGeographicPolylineSeriesComponent();
lineSeries.dataSource = shapeData;
lineSeries.shapeMemberPath = "points";
lineSeries.shapeFilterResolution = 2.0;
lineSeries.shapeStrokeThickness = 2;
lineSeries.shapeStroke = shapeBrush;
this.geoMap.series.add(lineSeries);
}