React Azure Maps からの画像の表示

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

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

    コード スニペット

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

    import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrAzureMapsImagery } from 'igniteui-react-maps';
import { AzureMapsImageryStyle } from 'igniteui-react-maps';
// ...
const tileSource = new IgrAzureMapsImagery();
tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY";
tileSource.imageryStyle = AzureMapsImageryStyle.Satellite; // or
tileSource.imageryStyle = AzureMapsImageryStyle.Road; // or
tileSource.imageryStyle = AzureMapsImageryStyle.DarkGrey; // Traffic, Weather etc.

const geoMap = new IgrGeographicMap({ name: "geoMap" });
geoMap.backgroundContent = tileSource;

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

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

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

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

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

    コード スニペット

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

    // App.tsx
import React, { useEffect, useRef } from 'react';
import { 
  IgrGeographicMap, 
  IgrGeographicTileSeries, 
  IgrAzureMapsImagery, 
  AzureMapsImageryStyle 
} from 'igniteui-react-maps';

export default function App() {
    const mapRef = useRef<IgrGeographicMap>(null);
    const tileSeriesRef = useRef<IgrGeographicTileSeries>(null);
    const azureKey = "<YOUR_KEY_HERE>";

    // Update TileSeries
    const series = new IgrGeographicTileSeries({
    name: "AzureTileSeries",
    });

    const overlay = new IgrAzureMapsImagery({});
    overlay.apiKey = azureKey;
    overlay.imageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay;
    series.tileImagery = overlay;

    // Update Map Background
    const background = new IgrAzureMapsImagery({});
    background.apiKey = azureKey;
    background.imageryStyle = AzureMapsImageryStyle.DarkGrey;
    this.geoMap.backgroundContent = background;

    this.geoMap.series.add(series);

    return (
        <div style={{ height: "100vh" }}>
        <IgrGeographicMap
            ref={mapRef}
            width="100%" height="100%"
            zoomable={true}>
            <IgrGeographicTileSeries ref={tileSeriesRef} />
        </IgrGeographicMap>
        </div>
    );
}

    プロパティ

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

    プロパティ名 プロパティ タイプ 説明
    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 リファレンス