Premium

Web Components Azure Maps からの画像 Preview

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

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

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

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

const tileSource = new IgcAzureMapsImagery();
tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY";
tileSource.imageryStyle = AzureMapsImageryStyle.Satellite; // or
tileSource.imageryStyle = AzureMapsImageryStyle.Road; // or
tileSource.imageryStyle = AzureMapsImageryStyle.DarkGrey; // Traffic, Weather etc.

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 Traffic Tile Series With Background

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

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

<!-- index.html -->
<html>
  <head>
    <script type="module" src="index.ts"></script>
  </head>
  <body style="margin:0;">
    <igc-geographic-map id="map" width="100%" height="100%" zoomable="true">
      <igc-geographic-tile-series id="tileSeries"></igc-geographic-tile-series>
    </igc-geographic-map>
  </body>
</html>

// index.ts
import {
  IgcGeographicMapComponent,
  IgcGeographicTileSeriesComponent,
  IgcAzureMapsImagery,
  AzureMapsImageryStyle,
  IgcGeographicMapModule
} from 'igniteui-webcomponents-maps';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcGeographicMapModule);

const azureKey = "<YOUR_KEY_HERE>";

window.addEventListener("load", () => {
  const map = document.getElementById("map") as IgcGeographicMapComponent;
  const tileSeries = document.getElementById("tileSeries") as IgcGeographicTileSeriesComponent;

  // Update TileSeries
  const overlay = new IgcAzureMapsImagery();
  overlay.apiKey = azureKey;
  overlay.imageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay;
  tileSeries.tileImagery = overlay;

  // Update Map Background
  const background = new IgcAzureMapsImagery();
  background.apiKey = azureKey;
  background.imageryStyle = AzureMapsImageryStyle.DarkGrey;
  map.backgroundContent = background;
});

プロパティ

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

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

API リファレンス

IgcAzureMapsImagery
GeographicMap