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
    height="100%"
    width="100%"
    zoomable="true">
</igx-geographic-map>

import { IgxGeographicMapComponent, IgxOpenStreetMapImagery } from 'igniteui-angular-maps';
// ...
@ViewChild("map", { static: true } )
private map: IgxGeographicMapComponent
var osmImagery = new IgxOpenStreetMapImagery();
this.map.backgroundContent = osmImagery;

API リファレンス