React 地理エリア マップ
React マップ コンポーネントでは、IgrGeographicScatterAreaSeries
を使用して、各ポイントに割り当てられた数値を持つ経度と緯度のデータの三角形分割に基づいて、地理的背景で色付きの表面を描画できます。このタイプの地理的シリーズは、気象温度、降水量、人口分布、大気汚染などの地理的位置によって定義される散乱データのレンダリングに使用できます。
React 地理エリア マップの例
IgrGeographicScatterAreaSeries
は IgrGeographicContourLineSeries
と同様ですが、同じ値を持つデータポイントを接続する等線の置換に補完で色つきサーフェス エリアとしてデータを表します。
データ要件
マップコンポーネントの他の種類の地理的シリーズと同様に、IgrGeographicScatterAreaSeries
には、オブジェクトの配列にバインドできる ItemsSource
プロパティがあります。さらに、項目ソースの各項目にはデータ列が 3 つあり、2 つは地理的な経度および緯度座標を保管し、1 つのデータ列は地理的位置に関連した値を保管します。地理的シリーズの longitudeMemberPath
、latitudeMemberPath
および colorMemberPath
プロパティはこれらのデータ列を識別します。
IgrGeographicScatterAreaSeries
は、三角測量が trianglesSource
プロパティに設定されていない場合、ItemsSource の項目で組み込みのデータ三角測量を自動的に実行します。ただし、三角測量の計算は非常に時間のかかるプロセスであるため、このプロパティのために TriangulationSource を指定すると、ランタイム パフォーマンスがよくなります。特にデータ項目が多数ある場合には顕著です。
データ バインディング
以下の表に、データ バインドに使用される GeographicScatterAreaSeries のプロパティをまとめています。
プロパティ名 | プロパティ型 | 説明 |
---|---|---|
ItemsSource |
任意 | trianglesSource プロパティが三角測量データを提供しない場合に三角測量を実行するデータ項目のソースです。 |
longitudeMemberPath |
文字列 | ItemsSource にバインドされているすべての項目の経度を含むプロパティの名前。 |
latitudeMemberPath |
文字列 | ItemsSource にバインドされているすべての項目の Latitude を含むプロパティの名前。 |
colorMemberPath |
文字列 | 各データ項目の緯度および経度座標の値を含むプロパティの名前。colorScale プロパティが設定されている場合、この数値は色に変換されます。 |
trianglesSource |
任意 | 三角測量データのソース。TriangulationSource オブジェクトの Triangles をこのプロパティに設定すると、ランタイム パフォーマンスと地理的シリーズの描画の両方が改善します。 |
triangleVertexMemberPath1 |
文字列 | 各三角形に対して ItemsSource の最初の頂点のインデックスを含む、trianglesSource 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。 |
triangleVertexMemberPath2 |
文字列 | 各三角形に対して ItemsSource の最初の頂点のインデックスを含む、trianglesSource 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。 |
triangleVertexMemberPath3 |
文字列 | 各三角形に対して ItemsSource の最初の頂点のインデックスを含む、trianglesSource 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。 |
カラー スケール
IgrGeographicScatterAreaSeries
の ColorScale プロパティを使用して、ポイントの色の値を解決し、地理的シリーズの面を塗りつぶします。色は、ピクセル単位の三角ラスタライザーを三角測量データに適用することによって、サーフェスの図形の周りをなめらかに補間します。サーフェスの描画がピクセル単位であるため、カラー スケールはブラシではなく色を使用します。
提供される IgrCustomPaletteColorScale
クラスはほとんどのカラーリングのニーズを満たすはずですが、ColorScale ベースのクラスはカスタムのカラリング ロジックのアプリケーションによって継承できます。
以下の表は GeographicScatterAreaSeries の面のカラリングに影響する IgrCustomPaletteColorScale
プロパティをリストします。
プロパティ名 | プロパティ型 | 説明 |
---|---|---|
palette |
ObservableCollection |
補間するために選択する色のコレクションを取得または設定します。 |
interpolationMode |
ColorScaleInterpolationMode |
Palette から色を取得するメソッドを取得または設定します。 |
maximumValue |
double | 色を割り当てるための最大値。指定した値がこの値より大きい場合は透明になります。 |
minimumValue |
double | 色を割り当てるための最小値。指定した値がこの値より小さい場合は透明になります。 |
コード スニペット
以下のコードは、IgrGeographicScatterAreaSeries
を世界の表面温度を表す三角測量データにバインドする方法を示しています。
import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicScatterAreaSeries } from 'igniteui-react-maps';
import { IgrCustomPaletteColorScale } from 'igniteui-react-charts';
import { IgrShapeDataSource } from 'igniteui-react-core';
IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
// ...
public render() {
return (
<IgrGeographicMap
ref={this.onMapReferenced}
width="600px"
height="600px"
zoomable="true" />
);
}
public onMapReferenced(map: IgrGeographicMap) {
this.geoMap = map;
const sds = new IgrShapeDataSource();
sds.importCompleted = this.onDataLoaded;
sds.shapefileSource = "/Shapes/WorldTemperatures.shp";
sds.databaseSource = "/Shapes/WorldTemperatures.dbf";
sds.dataBind();
}
public onDataLoaded(sds: IgrShapeDataSource, e: any) {
const contourPoints: any[] = [];
for (const record of sds.getPointData()) {
const temp = record.fieldValues.Contour;
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 point = shapes[i];
const item = { lon: point.x, lat: point.y, value: temp};
contourPoints.push(item);
}
}
}
}
}
this.createAreaSeries(contourPoints);
}
public createAreaSeries(data: any[])
{
const brushes = [
"rgba(32, 146, 252, 0.5)",
"rgba(14, 194, 14, 0.5)",
"rgba(252, 120, 32, 0.5)",
"rgba(252, 32, 32, 0.5)",
];
const colorScale = new IgrCustomPaletteColorScale({});
colorScale.palette = brushes;
colorScale.minimumValue = 0;
colorScale.maximumValue = 30;
const areaSeries = new IgrGeographicScatterAreaSeries( { name: "areaSeries" });
areaSeries.dataSource = data;
areaSeries.longitudeMemberPath = "lon";
areaSeries.latitudeMemberPath = "lat";
areaSeries.colorMemberPath = "value";
areaSeries.colorScale = colorScale;
this.geoMap.series.add(areaSeries);
}