Angular Bing Maps 画像の表示

IgxBingMapsMapImagery は、Microsoft® 社が提供する地理的画像マッピング サービスです。世界の地理的画像タイルを 3 以上提供します。この地理的画像サービスは、www.bing.com/maps に直接アクセスして利用できます。Ignite UI for Angular マップ コンポーネントは、IgxBingMapsMapImagery クラスを使用して、地図の背景コンテンツに Bing Maps の地理的画像を表示します。

Angular Bing Maps 画像の表示の例

コード スニペット

以下のコード スニペットは、IgxBingMapsMapImagery を使用して Angular IgxGeographicMapComponent で Bing Maps からの地理的画像を表示する方法を示します。

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

import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxBingMapsMapImagery } from 'igniteui-angular-maps';
// ...
const tileSource = new IgxBingMapsMapImagery();
tileSource.apiKey = "YOUR_BING_MAPS_API_KEY";
tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels; // or
tileSource.imageryStyle = BingMapsImageryStyle.Aerial; // or
tileSource.imageryStyle = BingMapsImageryStyle.Road;

// resolving BingMaps uri based on HTTP protocol of hosting website
let tileUri = tileSource.actualBingImageryRestUri;
const isHttpSecured = window.location.toString().startsWith("https:");
if (isHttpSecured) {
    tileUri = tileUri.replace("http:", "https:");
} else {
    tileUri = tileUri.replace("https:", "http:");
}
tileSource.bingImageryRestUri = tileUri;

this.map.backgroundContent = tileSource;

プロパティ

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

プロパティ名	プロパティ型	概要
apiKey	文字列	Bing Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは www.bingmapsportal.com ウェブサイトから取得してください。
imageryStyle	BingMapsImageryStyle	Bing Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の BingMapsImageryStyle 列挙値に設定できます。Aerial - 道路またはラベルオーバーレイなしの Aerial マップ スタイルを指定します。 Aerial - 道路およびラベル付きの衛星地図スタイルを指定します。 AerialWithLabels - 道路およびラベル付きの衛星地図スタイルを指定します。 Road - 衛星オーバーレイなしの道路地図スタイルを指定します。
bingImageryRestUri	文字列	TilePath と SubDomain の位置を指定する Bing Imagery REST URI を設定するためのプロパティを表します。これはオプションのプロパティです。指定されていない場合、デフォルトの REST URI を使用します。
cultureName	文字列	タイル ソースのカルチャ名を設定するためのプロパティを表します。
isDeferredLoad	ブール値	Bing Maps サービスが有効なプロパティ値の割り当てで自動初期化するかどうかを指定するプロパティを表します。
isInitialized	ブール値	True に設定されているプロパティは、Bing Maps サービスからの地理的画像タイルが初期化され、マップ コンポーネントでのレンダリングの準備ができたときに発生することを表します。
subDomains	SubDomainsCollection	URI サブ ドメインの画像コレクションを表します。
tilePath	文字列	マップ タイル画像 URI を設定するプロパティを表します。これは Bing Maps の実際の位置です。

API リファレンス

• BingMapsImageryStyle
• IgxBingMapsMapImagery
• IgxGeographicMapComponent