Premium

Blazor 複数のシェイプファイルのバインドとオーバーレイ

Ignite UI for Blazor マップでは、複数の地理的シリーズオブジェクトを追加して、複数のシェープファイルを地理空間データでオーバーレイすることができます。たとえば、港湾の地理的位置をプロットするための IgbGeographicSymbolSeries、港湾間のルートをプロットするための IgbGeographicPolylineSeries、国の形状をプロットするための IgbGeographicShapeSeries などがあります。

Blazor 複数のシェイプファイルのバインドとオーバーレイの例

このトピックでは、マップコンポーネントに複数の地理的シリーズを表示する方法について段階的に説明します。すべての地理的シリーズは、IgbShapefileRecord クラスを使用して形状ファイルからロードされた地理空間データに従ってプロットします。IgbShapefileRecord オブジェクトの詳細については、シェープファイルのバインディングのトピックを参照してください。

IgbGeographicSymbolSeries – 主要都市の場所を表示します。
IgbGeographicPolylineSeries – 主要ポート間のルートを表示します。
IgbGeographicShapeSeries – 世界の国々の形を表示します。

目的のデータをプロットするために、地理的シリーズを上記の組み合わせまたは他の組み合わせで使用できます。

コンポーネントのインポート

まず、必要なコンポーネントとモジュールをインポートします。

@using IgniteUI.Blazor.Controls;

パンやズームなどのマップのマウス操作は IgbDataChartInteractivityModule で提供されます。このモジュールはどのコンポーネントからも要求されないため、登録する必要があります。IgbGeographicMapModule の登録は任意です。IgbGeographicMap は初めてレンダリングされるときにこのモジュールを読み込みます (コンポーネントモジュールを参照)。

// in Program.cs file
builder.Services.AddIgniteUIBlazor(
    typeof(IgbGeographicMapModule),
    typeof(IgbDataChartInteractivityModule)
);

シリーズの作成

次に、後で異なるタイプのシェープファイルをロードする地理的シリーズでマップを作成します。

<IgbGeographicMap
    @ref="geoMap"
    Height="100%"
    Width="100%"
    Zoomable="true">
    <IgbGeographicShapeSeries
        @ref="polygonSeries"
        ShapeMemberPath="Points"
        ShapeFill="rgb(150, 150, 150)"
        ShapeStroke="Black"
        ShapeStrokeThickness="1" />
    <IgbGeographicPolylineSeries
        @ref="lineSeries"
        ShapeMemberPath="Points"
        ShapeStroke="rgba(147, 15, 180, 0.5)"
        Thickness="3" />
    <IgbGeographicSymbolSeries
        @ref="symbolSeries"
        LongitudeMemberPath="Longitude"
        LatitudeMemberPath="Latitude"
        MarkerType="MarkerType.Circle"
        MarkerOutline="rgba(2, 102, 196, 1)"
        MarkerBrush="White" />
</IgbGeographicMap>

シェープファイルの読み込み

次に、ページのコンストラクターで、地理マップコンポーネントに表示する各シェープファイルの IgbShapefileRecord を追加します。各ソースには、そのレコードをデータに変換するメソッドが渡されます。これらのメソッドは MapMultipleShapesReaders クラスに属し、以下の各セクションで示します。

@using IgniteUI.Blazor.Controls;
// ...
private MapMultipleShapesReaders mapMultipleShapesReaders = new MapMultipleShapesReaders();
// ...
var root = "https://static.infragistics.com/xplatform/shapes/";
var readers = this.mapMultipleShapesReaders;

var sdsPolygons = new IgbShapeDataSource()
{
    ShapefileSource = root + "WorldCountries.shp",
    DatabaseSource = root + "WorldCountries.dbf"
};
sdsPolygons.ImportCompleted += readers.ReadPolygons;
sdsPolygons.DataBind();

var sdsPolylines = new IgbShapeDataSource()
{
    ShapefileSource = root + "WorldCableRoutes.shp",
    DatabaseSource = root + "WorldCableRoutes.dbf"
};
sdsPolylines.ImportCompleted += readers.ReadPolylines;
sdsPolylines.DataBind();

var sdsLocations = new IgbShapeDataSource()
{
    ShapefileSource = root + "WorldCities.shp",
    DatabaseSource = root + "WorldCities.dbf"
};
sdsLocations.ImportCompleted += readers.ReadPoints;
sdsLocations.DataBind();

ポリゴンの処理

世界の国々の IgbShapefileRecord に読み込まれた形状データを処理し、IgbGeographicShapeSeries オブジェクトに割り当てます。

/// <summary>Country shapes, with the fields the tooltip shows taken from the .DBF file.</summary>
public void ReadPolygons(object sender, EventArgs e)
{
    var sds = sender as IgbShapeDataSource;
    var geoPolygons = new List<object>();
    // parsing shapefile data and creating geo-polygons
    foreach (var record in sds.GetPointData())
    {
        // using field/column names from .DBF file
        geoPolygons.Add(new
        {
            points = record.Points,
            name = record.FieldValues["NAME"],
            population = record.FieldValues["POP_2005"]
        });
    }

    var map = this.geoMap;
    var polygonSeries = map.Series[0] as IgbGeographicShapeSeries;
    polygonSeries.DataSource = geoPolygons;
}

ポリラインの処理

IgbShapefileRecord に読み込まれた形状データを処理し、主要都市間の通信ルートを使用して、IgbGeographicPolylineSeries オブジェクトに割り当てます。

/// <summary>Connections between places, each record one path.</summary>
public void ReadPolylines(object sender, EventArgs e)
{
    var sds = sender as IgbShapeDataSource;
    var geoPolylines = new List<object>();
    // parsing shapefile data and creating geo-polylines
    foreach (var record in sds.GetPointData())
    {
        // using field/column names from .DBF file
        geoPolylines.Add(new
        {
            points = record.Points,
            name = record.FieldValues["Name"],
            capacity = record.FieldValues["CapacityG"],
            distance = record.FieldValues["DistanceKM"],
            isOverLand = (double)record.FieldValues["OverLand"] == 0,
            isActive = (double)record.FieldValues["NotLive"] != 0,
            service = record.FieldValues["InService"]
        });
    }

    var map = this.geoMap;
    var lineSeries = map.Series[1] as IgbGeographicPolylineSeries;
    lineSeries.DataSource = geoPolylines;
}

ポイントの処理

IgbShapefileRecord に読み込まれた世界各国の形状データを処理し、IgbGeographicSymbolSeries オブジェクトに割り当てます。

/// <summary>Cities with a known population, one point per record.</summary>
public void ReadPoints(object sender, EventArgs e)
{
    var sds = sender as IgbShapeDataSource;
    var geoLocations = new List<object>();
    // parsing shapefile data and creating geo-locations
    foreach (var record in sds.GetPointData())
    {
        var pop = (double)record.FieldValues["POPULATION"];
        if (pop > 0)
        {
            // each of these records holds a single point
            // using field/column names from .DBF file
            geoLocations.Add(new
            {
                latitude = record.Points[0][0].Y,
                longitude = record.Points[0][0].X,
                city = record.FieldValues["NAME"],
                population = pop
            });
        }
    }

    var map = this.geoMap;
    var symbolSeries = map.Series[2] as IgbGeographicSymbolSeries;
    symbolSeries.DataSource = geoLocations;
}

マップ背景

また形状ファイルがアプリケーションのために十分な地理的文脈 (国の形状など) を提供した際に、地図背景コンテンツで地理的画像を非表示にしたい場合があります。

<IgbGeographicMap
    @ref="geoMap"
    Height="100%"
    Width="100%"
    BackgroundContent="@null" />

概要

上記すべてのコードスニペットを以下のコードブロックにまとめて、プロジェクトに簡単にコピーできます。

<IgbGeographicMap
    @ref="geoMap"
    Height="100%"
    Width="100%"
    Zoomable="true">
    <IgbGeographicShapeSeries
        @ref="polygonSeries"
        ShapeMemberPath="Points"
        ShapeFill="rgb(150, 150, 150)"
        ShapeStroke="Black"
        ShapeStrokeThickness="1" />
    <IgbGeographicPolylineSeries
        @ref="lineSeries"
        ShapeMemberPath="Points"
        ShapeStroke="rgba(147, 15, 180, 0.5)"
        Thickness="3" />
    <IgbGeographicSymbolSeries
        @ref="symbolSeries"
        LongitudeMemberPath="Longitude"
        LatitudeMemberPath="Latitude"
        MarkerType="MarkerType.Circle"
        MarkerOutline="rgba(2, 102, 196, 1)"
        MarkerBrush="White" />
</IgbGeographicMap>

@using IgniteUI.Blazor.Controls;
// ...
private MapMultipleShapesReaders mapMultipleShapesReaders = new MapMultipleShapesReaders();
// ...
var root = "https://static.infragistics.com/xplatform/shapes/";
var readers = this.mapMultipleShapesReaders;

var sdsPolygons = new IgbShapeDataSource()
{
    ShapefileSource = root + "WorldCountries.shp",
    DatabaseSource = root + "WorldCountries.dbf"
};
sdsPolygons.ImportCompleted += readers.ReadPolygons;
sdsPolygons.DataBind();

var sdsPolylines = new IgbShapeDataSource()
{
    ShapefileSource = root + "WorldCableRoutes.shp",
    DatabaseSource = root + "WorldCableRoutes.dbf"
};
sdsPolylines.ImportCompleted += readers.ReadPolylines;
sdsPolylines.DataBind();

var sdsLocations = new IgbShapeDataSource()
{
    ShapefileSource = root + "WorldCities.shp",
    DatabaseSource = root + "WorldCities.dbf"
};
sdsLocations.ImportCompleted += readers.ReadPoints;
sdsLocations.DataBind();

API リファレンス

IgbGeographicPolylineSeries
IgbGeographicShapeSeries
IgbGeographicSymbolSeries
IgbShapefileRecord

Blazor 複数のシェイプ ファイルのバインドとオーバーレイ