Blazor マップの概要

    Ignite UI for Blazor Map コンポーネントを使用すると、ビューモデルからの地理的位置を含むデータ、またはシェープ ファイルからロードされた地理空間データを地理的画像マップに表示できます。

    Blazor マップの例

    以下のサンプルは、Bubble Series (バブル シリーズ) とも呼ばれる IgbGeographicProportionalSymbolSeries を使用して IgbGeographicMap にデータを表示する方法を示しています。

    EXAMPLE
    MODULES
    WorldCity.cs
    WorldLocations.cs
    RAZOR
    CSS

    このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    Blazor 地図コンポーネントを使用すると、Bing Maps™ および Open Street Maps から地理的画像をレンダリングできます。マップは何万ものデータポイントをプロットし、コントロールがリアルタイム フィードを処理できるように数ミリ秒ごとにそれらを更新します。

    マップの Series プロパティは、無制限の地理的シリーズのレンダリングをサポートするために使用されます。このプロパティは、地理的シリーズ オブジェクトのコレクションで、任意のタイプの地理的シリーズをそれに追加できます。たとえば、都市などの地理的位置をプロットするために IgbGeographicSymbolSeries、またこれらの地理的位置の間の接続 (道路など) をプロットするために IgbGeographicPolylineSeries を追加できます。

    Map は、マウス、キーボード、またはコードビハインドを使用して、マップ コンテンツをナビゲーションするためのカスタマイズ可能なナビゲーション動作を提供します。

    モジュールの要件

    IgbGeographicMap には以下のモジュールが必要ですが、DataChartInteractivityModule は、マップ コンテンツのパンやズームなどのマウス操作にのみ必要です。

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

    使用方法

    マップ モジュールがインポートされたので、以下のステップは地理的地図を作成することです。以下のコードは、これを実行して地図内でズームを有効にする方法を示しています。

    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true" />
    razor

    その他のリソース

    関連する Blazor マップ機能の詳細については、以下のトピックを参照してください。

    API リファレンス

    以下は上記のセクションで説明した API メンバーのリストです。