Web Components Azure Maps からの画像の表示
Web Components IgcAzureMapsImagery は、Microsoft® が提供する地理的画像マッピング サービスです。
世界の地理的画像タイルを複数のスタイルで供します。この地理的画像サービスは、www.azure.microsoft.com ウェブサイトから直接アクセスできます。Ignite UI for Web Components Map コンポーネントは、IgcAzureMapsImagery クラスを使用して、地図の背景コンテンツに Azure Maps の地理的画像を表示します。
Web Components Azure Maps からの画像の表示例
コード スニペット
以下のコード スニペットは、IgcAzureMapsImagery クラスを使用して Web Components IgcGeographicMapComponent で 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;
Web Components Azure Maps の画像上にタイル シリーズ オーバーレイを表示する例
IgcGeographicTileSeriesComponent を使用する際には、ベース マップ スタイル (例: Satellite, Road, DarkGrey) の上にオーバーレイ (交通情報、天気、ラベル) を重ね合わせることができます。例えば Satellite と TerraOverlay を組み合わせることで、地形を視覚化できます。
- ベース スタイル: Satellite、Road、Terra、DarkGrey がコアとなる背景タイルを提供します。
- オーバーレイ スタイル: 交通情報や天気の画像 (
TrafficRelativeOverlay、WeatherRadarOverlayなど) は、タイル シリーズに割り当てることでベース スタイル上に重ねられるよう設計されています。 - ハイブリッド スタイル:
HybridRoadOverlayやHybridDarkGreyOverlayなどのバリエーションは、ベース スタイルにラベルや道路などのオーバーレイをあらかじめ組み合わせているため、複数のレイヤーを手動で管理する必要はありません。
この設計により、より豊かなマップ表現が可能になります。例えば:
- Satellite 画像に TrafficOverlay を重ねて、実際の地図上に渋滞状況をハイライト表示。
- Terra に WeatherRadarOverlay を組み合わせて、地形と降水を同時に視覚化。
- DarkGrey と LabelsRoadOverlay を適用し、ダッシュボードに適したコントラストの高いビューを実現。
コード スニペット
次のコード スニペットは、IgcAzureMapsImagery クラスと IgcGeographicTileSeriesComponent クラスを使用して、Web Components IgcGeographicMapComponent の交通情報と濃い灰色のマップを結合した背景画像の上に地理画像タイルを表示する方法を示しています。
<!-- 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 列挙値に設定できます。
|