Angular オープン ストリート マップ画像の表示

Angular IgxOpenStreetMapImagery は、世界中の OpenStreetMap© のコントリビューターが共同で作成した無料の地理的画像マッピングサービスです。これは、構成オプションなしで、道路地図スタイル限定で世界の地理的画像を提供します。この地理的画像サービスは、www.OpenStreetMap.org に直接アクセスして利用できます。 デフォルトでは、Ignite UI for Angular マップ コンポーネントには、Open Street Maps の地理的画像が既に表示されています。したがって、Open Street Maps から地理的画像を表示するように、コントロールを構成する必要はありません。

Angular オープン ストリート マップ画像の表示の例

コード スニペット

このコード例では、マップ コンポーネントの BackgroundContent を OpenStreetMap© コントリビューターの地理画像を提供する IgxOpenStreetMapImagery オブジェクトに明示的に設定します。

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

import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxOpenStreetMapImagery } from 'igniteui-angular-maps';
// ...
public map: IgxGeographicMapComponent;

const tileSource = new IgxOpenStreetMapImagery();
this.map.backgroundContent = tileSource;

API リファレンス