Blazor Azure Maps からの画像の表示 PREVIEW

Blazor IgbAzureMapsImagery は、Microsoft® が提供する地理的画像マッピング サービスです。 世界の地理的画像タイルを複数のスタイルで供します。この地理的画像サービスは、www.azure.microsoft.com ウェブサイトから直接アクセスできます。Ignite UI for Blazor Map コンポーネントは、IgbAzureMapsImagery クラスを使用して、地図の背景コンテンツに Azure Maps の地理的画像を表示します。

Blazor Azure Maps からの画像の表示例

コード スニペット

以下のコード スニペットは、IgbAzureMapsImagery クラスを使用して Blazor IgbGeographicMap で Azure Maps からの地理的画像タイルを表示する方法を示します。

@using IgniteUI.Blazor.Controls

<IgbGeographicMap @ref="AzureMap"
    Height="100%" Width="100%"
    Zoomable="true"
    BackgroundContent="@AzureImagery">
</IgbGeographicMap>

@code {
    
    private IgbGeographicMap AzureMap;
    private IgbAzureMapsImagery AzureImagery { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        //Update Map Background
        AzureImagery = new IgbAzureMapsImagery
        {
            ApiKey = AzureKey,
            ImageryStyle = AzureMapsImageryStyle.Satellite
        };
    }
}

Blazor Azure Maps の画像上にタイル シリーズ オーバーレイを表示する例

IgbGeographicTileSeries を使用する際には、ベース マップ スタイル (例: Satellite, Road, DarkGrey) の上にオーバーレイ (交通情報、天気、ラベル) を重ね合わせることができます。例えば Satellite と TerraOverlay を組み合わせることで、地形を視覚化できます。

• ベース スタイル: Satellite、Road、Terra、DarkGrey がコアとなる背景タイルを提供します。
• オーバーレイ スタイル: 交通情報や天気の画像 (TrafficRelativeOverlay、WeatherRadarOverlay など) は、タイル シリーズに割り当てることでベース スタイル上に重ねられるよう設計されています。
• ハイブリッド スタイル: HybridRoadOverlay や HybridDarkGreyOverlay などのバリエーションは、ベース スタイルにラベルや道路などのオーバーレイをあらかじめ組み合わせているため、複数のレイヤーを手動で管理する必要はありません。

この設計により、より豊かなマップ表現が可能になります。例えば:

• Satellite 画像に TrafficOverlay を重ねて、実際の地図上に渋滞状況をハイライト表示。
• Terra に WeatherRadarOverlay を組み合わせて、地形と降水を同時に視覚化。
• DarkGrey と LabelsRoadOverlay を適用し、ダッシュボードに適したコントラストの高いビューを実現。

コード スニペット

次のコード スニペットは、IgbAzureMapsImagery クラスと IgbGeographicTileSeries クラスを使用して、Blazor IgbGeographicMap の交通情報と濃い灰色のマップを結合した背景画像の上に地理画像タイルを表示する方法を示しています。

@using IgniteUI.Blazor.Controls

<IgbGeographicMap @ref="AzureMap"
                          Height="100%" Width="100%"
                          Zoomable="true"
                          BackgroundContent="@AzureImagery">
        <IgbGeographicTileSeries @ref="ImagerySeries" />
</IgbGeographicMap>

@code {
    
    private IgbGeographicMap AzureMap;
    private IgbAzureMapsImagery AzureImagery { get; set; }
    private IgbGeographicTileSeries ImagerySeries;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        
        //Update TileSeries
        var imagery = new IgbAzureMapsImagery
        {
            ApiKey = AzureKey,
            ImageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay
        };

        ImagerySeries.TileImagery = imagery;

        //Update Map Background
        AzureImagery = new IgbAzureMapsImagery
        {
            ApiKey = AzureKey,
            ImageryStyle = AzureMapsImageryStyle.DarkGrey
        };
    }
}

プロパティ

以下の表で、IgbAzureMapsImagery クラスのプロパティを説明します。

プロパティ名	プロパティ タイプ	説明
ApiKey	string	Azure Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは azure.microsoft.com ウェブサイトから取得してください。
ImageryStyle	AzureMapsImageryStyle	Azure Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の AzureMapsImageryStyle 列挙値に設定できます。 Satellite - 道路またはラベルのオーバーレイなしの衛星地図スタイルを指定します。 Road - 道路およびラベル付きの衛星地図スタイルを指定します。 TerraOverlay - 標高や地形の特徴をハイライト表示する陰影起伏付きの地形マップ スタイルを指定します。 LabelsRoadOverlay - 航空写真オーバーレイなしで都市ラベルを表示する複数のオーバーレイの 1 つです。 DarkGrey - コントラストやオーバーレイのハイライト表示に適したダーク グレーのベース マップ スタイルを指定します。 HybridRoadOverlay - 衛星画像の背景に道路とラベルのオーバーレイを組み合わせます。 HybridDarkGreyOverlay - 衛星画像の背景にダーク グレーのラベル オーバーレイを組み合わせます。 LabelsDarkGreyOverlay - ダーク グレーのベース マップ上に都市ラベルを表示する複数のオーバーレイの 1 つです。 TrafficDelayOverlay - 交通遅延や渋滞エリアをリアルタイムで表示します。 TrafficAbsoluteOverlay - 現在の交通速度を絶対値で表示します。 TrafficReducedOverlay - 減少した交通流を光ベースの視覚化で表示します。 TrafficRelativeOverlay - 通常の状況に対する相対的な交通速度を表示します。 WeatherRadarOverlay - 降水のほぼリアルタイムのレーダー画像を表示します。 WeatherInfraredOverlay - 雲量の赤外線衛星画像を表示します。

API リファレンス

• AzureMapsImageryStyle
• IgbAzureMapsImagery
• IgbGeographicMap