Angular Azure Maps からの画像 Preview

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

Angular Azure Maps からの画像の表示 - 概要

Angular Azure Maps からの画像の表示 - コード例

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

<igx-geographic-map #map
    width="100%"
    height="100%"
    zoomable="true" >
</igx-geographic-map>

import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxAzureMapsImagery } from 'igniteui-angular-maps';
// ...
const tileSource = new IgxAzureMapsImagery();
tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY";
tileSource.imageryStyle = AzureMapsImageryStyle.Satellite; // or
tileSource.imageryStyle = AzureMapsImageryStyle.TerraOverlay; // or
tileSource.imageryStyle = AzureMapsImageryStyle.Road; //or Traffic & Weather etc.

this.map.backgroundContent = tileSource;

Azure Maps からの画像オーバーレイ - 概要

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

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

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

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

Azure Maps からの画像オーバーレイ - コード例

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

<igx-geographic-map #map height="100%" width="100%" zoomable="true">
  <igx-geographic-tile-series #tileSeries></igx-geographic-tile-series>
</igx-geographic-map>

export class AppComponent implements AfterViewInit {
  @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent;
  @ViewChild('tileSeries', { static: true }) public tileSeries!: IgxGeographicTileSeriesComponent;

  public azureImagery!: IgxAzureMapsImagery;
  public azureKey: string = "<YOUR_KEY_HERE>";

  ngAfterViewInit(): void {
    // Update TileSeries
    const overlay = new IgxAzureMapsImagery();
    overlay.apiKey = this.azureKey;
    overlay.imageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay;
    this.tileSeries.tileImagery = overlay;

    // Update Map Background
    this.azureImagery = new IgxAzureMapsImagery();
    this.azureImagery.apiKey = this.azureKey;
    this.azureImagery.imageryStyle = AzureMapsImageryStyle.DarkGrey;
    this.map.backgroundContent = this.azureImagery;
  }
}

プロパティ

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

API リファレンス