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

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

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

コード スニペット

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

<IgrGeographicMap
    ref={this.mapRef}
    height="100%"
    width="100%"
    zoomable={true} />

import { IgrGeographicMap, IgrOpenStreetMapImagery } from 'igniteui-react-maps';
// ...
private map: IgrGeographicMap
private mapRef(r: IgrGeographicMap) {
    this.map = r;
    this.setState({});
}
this.mapRef = this.mapRef.bind(this);
var osmImagery = new IgrOpenStreetMapImagery();
this.map.backgroundContent = osmImagery;

API リファレンス