Premium

Blazor 複数データソースのバインド

Ignite UI for Blazor マップでは、カスタムデータソースを地理空間データとオーバーレイするために複数の地理的シリーズオブジェクトを追加できます。たとえば、空港の地理的位置をプロットするための IgbGeographicSymbolSeries、空港間のフライトをプロットするための IgbGeographicPolylineSeries、主要な地理座標のグリッド線をプロットするための別の IgbGeographicPolylineSeries などです。

Blazor 複数データソースのバインドの例

このトピックでは、以下の地理空間データをプロットする複数の地理的シリーズを表示するための手順を説明します。

IgbGeographicSymbolSeries – 主要空港の場所を表示します。
IgbGeographicPolylineSeries – 空港間のフライトを表示します。
IgbGeographicPolylineSeries – 主座標のグリッド線を表示します。

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

データソースの作成

Ignite UI for Blazor マップに表示するすべての地理的シリーズのデータソースを作成します。たとえば、WorldConnections スクリプトを使用できます。

<IgbGeographicMap
    @ref="geoMap"
    Height="100%"
    Width="100%"
    Zoomable="true">
</IgbGeographicMap>

フライトのオーバーレイ

主要空港間のフライト接続を持つ最初の IgbGeographicPolylineSeries オブジェクトを作成し、Ignite UI for Blazor マップの Series コレクションに追加します。

<IgbGeographicPolylineSeries
    @ref="lineSeries"
    DataSource="WorldFlights"
    ShapeMemberPath="Points"
    ShapeStroke="rgba(196, 14, 14, 0.05)"
    ShapeStrokeThickness="4" />

グリッド線のオーバーレイ

地理グリッド線を使用して2番目の IgbGeographicPolylineSeries オブジェクトを作成し、それを GeographicMap の Series コレクションに追加します。

<IgbGeographicPolylineSeries
    @ref="gridSeries"
    DataSource="WorldGridlines"
    ShapeMemberPath="Points"
    ShapeStroke="Gray"
    ShapeStrokeThickness="1" />

空港のオーバーレイ

空港ポイントを使用して IgbGeographicSymbolSeries オブジェクトを作成し、それを Ignite UI for Blazor 地理マップの Series コレクションに追加します。

<IgbGeographicSymbolSeries
    @ref="symbolSeries"
    DataSource="WorldAirports"
    LatitudeMemberPath="Lat"
    LongitudeMemberPath="Lon"
    MarkerType="MarkerType.Circle"
    MarkerBrush="rgba(170, 211, 223, 1)"
    MarkerOutline="rgba(73, 73, 73, 1)"
    Thickness="1" />

まとめ

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

<IgbGeographicMap
    @ref="geoMap"
    Height="100%"
    Width="100%"
    Zoomable="true">
    <IgbGeographicPolylineSeries
        @ref="lineSeries"
        DataSource="WorldFlights"
        ShapeMemberPath="Points"
        ShapeStroke="rgba(196, 14, 14, 0.05)"
        ShapeStrokeThickness="4" />
    <IgbGeographicPolylineSeries
        @ref="gridSeries"
        DataSource="WorldGridlines"
        ShapeMemberPath="Points"
        ShapeStroke="Gray"
        ShapeStrokeThickness="1" />
    <IgbGeographicSymbolSeries
        @ref="symbolSeries"
        DataSource="WorldAirports"
        LatitudeMemberPath="Lat"
        LongitudeMemberPath="Lon"
        MarkerType="MarkerType.Circle"
        MarkerBrush="rgba(170, 211, 223, 1)"
        MarkerOutline="rgba(73, 73, 73, 1)"
        Thickness="1" />
</IgbGeographicMap>

Blazor 複数データ ソースのバインド