Angular Esri Maps から地理的画像を表示

IgxArcGISOnlineMapImagery は、Esri によって作成された無料の地理的画像マッピング サービスです。世界の地理的画像タイルの 40 スタイル以上を提供します。この地理的画像サービスは、www.arcgisonline.com に直接アクセスして利用できます。

Angular Esri Maps から地理的画像を表示の例

コード スニペット

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

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

import { IgxGeographicMapComponent, IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
// ...
@ViewChild("oceansMap", { static: true } )
private oceansMap: IgxGeographicMapComponent
var oceansMapImagery = new IgxArcGISOnlineMapImagery();
oceansMapImagery.mapServerUri = "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer";
this.oceansMap.backgroundContent = oceansMapImagery;

Esri ユーティリティ

また、Esri 画像サーバーのすべてのスタイルを定義する EsriUtility を使用することもできます。

import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
import { EsriUtility, EsriStyle } from './EsriUtility';
// ...
public geoMap: IgxGeographicMapComponent;

const tileSource = new IgxArcGISOnlineMapImagery();
tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap);

this.geoMap.backgroundContent = tileSource;

API リファレンス