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

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

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// for handling of maps events
import { IgrRectChangedEventArgs } from "@infragistics/igniteui-react-core";
import { IgrGeographicMapModule } from "@infragistics/igniteui-react-maps";
import { IgrGeographicMap } from "@infragistics/igniteui-react-maps";
import { IgrOpenStreetMapImagery } from "@infragistics/igniteui-react-maps";
import { IgrDataChartInteractivityModule, IgrSeriesViewer } from "@infragistics/igniteui-react-charts";

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();

export default class MapDisplayImageryOSM extends React.Component<any, any> {

    public geoMap: IgrGeographicMap;

    constructor(props: any) {
        super(props);

        this.onMapRef = this.onMapRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" >
                    <IgrGeographicMap
                        ref={this.onMapRef}
                        // actualWindowRectChanged={this.onMapWindowRectChanged}
                        width="100%"
                        height="100%"
                        zoomable="true"/>
                </div>
                <div className="overlay-bottom-right overlay-border">Imagery Tiles: @OpenStreetMap</div>
            </div>
        );
    }

    public onMapRef(geoMap: IgrGeographicMap) {
        if (!geoMap) { return; }

        const mapImagery = new IgrOpenStreetMapImagery();
        geoMap.backgroundContent = mapImagery;

        const geoRect = { left: -150.0, top: -60.0, width: 315.0, height: 140.0 };
        geoMap.zoomToGeographic(geoRect);
    }

    public onMapWindowRectChanged(viewer: IgrSeriesViewer, e: IgrRectChangedEventArgs) {
        let geoMap = viewer as IgrGeographicMap;
        // const rect = e.newRect;
        // console.log("win \n left:" + rect.left +
        // ", top:" + rect.top + ", width:"  + rect.width + ", height:"  + rect.height);

        // const geo = geoMap.getGeographicFromZoom(rect);
        // console.log("geo \n left:" + geo.left +
        // ", top:" + geo.top + ", width:"  + geo.width + ", height:"  + geo.height);
    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MapDisplayImageryOSM/>);
tsxコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

コード スニペット

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

import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrOpenStreetMapImagery } from 'igniteui-react-maps';
// ...
const tileSource = new IgrOpenStreetMapImagery();

const geoMap = new IgrGeographicMap({ name: "geoMap" });
geoMap.backgroundContent = tileSource;
ts

API リファレンス

• BackgroundContent
• IgrOpenStreetMapImagery