React コンテンツのナビゲーション

IgrGeographicMap コントロールのナビゲーションは、既定では有効にされており、マップ コンテンツのズームとパンが可能です。ただし、この動作は zoomable プロパティを使用して変更できます。マップでは同期ズームのみが許可されていること、つまり、アスペクト比を維持したままマップコンテンツをスケーリングすることを知っておくことが重要です。結果として、マップコンテンツを水平方向にスケーリングせずに垂直方向にスケーリングすることはできません。

React コンテンツのナビゲーションの例

EXAMPLE

DATA

TSX

import { IgrGeographicMap } from "@infragistics/igniteui-react-maps";

export enum MapRegion {
    Caribbean = "Caribbean",
    UnitedStates = "United States",
    UnitedKingdom = "United Kingdom",
    European = "European",
    SouthAfrica = "South Africa",
    Poland = "Poland",
    Australia = "Australia",
    Japan = "Japan",
    Uruguay = "Uruguay",
    Egypt = "Egypt",
    Hawaii = "Hawaii",
}

export class MapUtils {

    public static navigateTo(geoMap: IgrGeographicMap, name: MapRegion): void {

        const geoRect = this.getRegions()[name];
        // console.log("MapUtils " + name) ;
        geoMap.zoomToGeographic(geoRect);
    }

    public static toPixel(num: number): string {
        const s = Math.abs(num).toFixed(0);
        return s + " px";
    }

    public static toLng(num: number): string {
        num = this.clamp(num, -180, 180);

        let s = Math.abs(num).toFixed(1);
        if (num < 100) {
            s = "  " + s
        }

        if (num > 0) {
            return s + "°E";
        } else  {
            return s + "°W";
        }
    }

    public static toLat(num: number): string {
        num = this.clamp(num, -90, 90);

        let s = Math.abs(num).toFixed(1);
        if (num < 100) {
            s = "  " + s
        }

        if (num > 0) {
            return s + "°N";
        } else  {
            return s + "°S";
        }
    }

    public static clamp(num: number, min: number, max: number): number {
        return Math.max(min, Math.min(max, num));
    }

    public static pad(num: number, places?: number): string {
        places = places || 20;
        let s = num.toFixed(1).toString();
        while (s.length < places) {s = " " + s;}
        return s;
    }

    public static getBingKey(): string {
        return "Avlo7qsH1zZZI0XNpTwZ4XwvUJmCbd-mczMeUXVAW9kYYOKdmBIVRe8aoO02Xctq";
    }

    public static getRegions(): any {
        // create regions only once
        if (this.Regions === undefined) {
            this.createRegions();
        }
        return this.Regions;
    }

    private static Regions: any;

    private static addRegion(name: string, geoRect: any): void {
        geoRect.name = name;
        geoRect.longitude = geoRect.left + (geoRect.width / 2);
        geoRect.latitude = geoRect.top + (geoRect.height / 2);

        this.Regions[name] = geoRect;
    }

    private static createRegions(): void {
        this.Regions = {};
        this.addRegion(MapRegion.Australia, { left: 81.5, top: -52.0, width: 98.0, height: 56.0 });
        this.addRegion(MapRegion.Caribbean, { left: -92.9, top: 5.4, width: 35.1, height: 25.8 });
        this.addRegion(MapRegion.Egypt, { left: 19.3, top: 19.9, width: 19.3, height: 13.4 });
        this.addRegion(MapRegion.European, { left: -36.0, top:31.0, width: 98.0, height: 38.0 });
        this.addRegion(MapRegion.Japan, { left: 122.7, top: 29.4, width: 27.5, height: 17.0 });
        this.addRegion(MapRegion.Hawaii, { left: -161.2, top: 18.5, width: 6.6, height: 4.8 });
        this.addRegion(MapRegion.Poland, { left: 13.0, top: 48.0, width: 11.0, height: 9.0 });
        this.addRegion(MapRegion.SouthAfrica, { left: 9.0, top: -37.1, width: 26.0, height: 17.8 });
        this.addRegion(MapRegion.UnitedStates, { left: -134.5, top: 16.0, width: 70.0, height: 37.0 });
        this.addRegion(MapRegion.UnitedKingdom, { left: -15.0, top: 49.5, width: 22.5, height: 8.0 });
        this.addRegion(MapRegion.Uruguay, { left: -62.1, top: -35.7, width: 10.6, height: 7.0 });
    }

}
tsコピー

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

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

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

    public geoMap: IgrGeographicMap;

    public NavigationOptions: JSX.Element[] = [];
    public NavigationRegions: any = {};

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

        this.onMapRef = this.onMapRef.bind(this);
        this.onMapWindowRectChanged = this.onMapWindowRectChanged.bind(this);
        this.onSelectionChanged = this.onSelectionChanged.bind(this);
        this.onMapMouseMove = this.onMapMouseMove.bind(this);

        // generating navigation regions and options
        const regions =  MapUtils.getRegions();
        for (const key in regions) {
            if (regions.hasOwnProperty(key)) {
                const region = regions[key];
                const name = region.name;
                this.NavigationRegions[name] = region;
                this.NavigationOptions.push(<option id={name} key={name}>{name}</option>);
            }
        }

        this.state = {
            selectedRegion: MapRegion.UnitedStates,
            mapRegion: this.NavigationRegions[MapRegion.UnitedStates],
            mapHoverGeographicCoordinate: { x: 0, y: 0 },
            mapHoverRelativeCoordinate: { x: 0, y: 0 },
            mapHoverWindowCoordinate: { x: 0, y: 0 },

            windowScale: 0,
            windowPositionVertical: 0,
            windowPositionHorizontal: 0,
            getRect: { left: -180, top: -75, height: 170, width: 360 },
            geoT: "",
            geoL: "",
            geoH: "",
            geoW: "",
            winT: "",
            winL: "",
            winH: "",
            winW: "",
        };
    }

    public render(): JSX.Element {
        return (
            <div className="container sample"    >

                <div className="container" id="map" >
                    <IgrGeographicMap
                        ref={this.onMapRef}
                        actualWindowRectChanged={this.onMapWindowRectChanged}
                        width="100%"
                        height="100%"
                        zoomable="true"/>
                </div>

                <div className="overlay-left overlay-border vertical" style={{background: "rgba(217, 217, 217, 0.5)"}} >
                    <label style={{fontWeight: 600}}>Zoom to Map Region</label>
                    <select value={this.state.selectedRegion} onChange={this.onSelectionChanged}>
                            {this.NavigationOptions}
                    </select>
                    <label style={{fontWeight: 600}}>Map Geographic Rect</label>
                    <div className="horizontal" >
                        <div className="vertical"  style={{marginRight: "1rem"}}>
                            <label >{this.state.geoT}</label>
                            <label >{this.state.geoL}</label>
                        </div>
                        <div className="vertical">
                            <label >{this.state.geoH}</label>
                            <label >{this.state.geoW}</label>
                        </div>
                    </div>

                    <label style={{fontWeight: 600}}>Map Window Rect</label>
                    <div className="horizontal" >
                        <div className="vertical"  style={{marginRight: "1rem"}}>
                            <label >{this.state.winT}</label>
                            <label >{this.state.winL}</label>
                        </div>
                        <div className="vertical">
                            <label >{this.state.winH}</label>
                            <label >{this.state.winW}</label>
                        </div>
                    </div>

                    <label style={{fontWeight: 600}}>Map Window Position</label>
                    <div className="horizontal">
                        <div className="vertical"  style={{marginRight: "1rem"}}>
                            <label >Horizontal:</label>
                            <label >Vertical:</label>
                            <label >Scale:</label>
                        </div>
                        <div className="vertical">
                            <label >{this.state.windowPositionHorizontal.toFixed(4)}</label>
                            <label >{this.state.windowPositionVertical.toFixed(4)}</label>
                            <label >{this.state.windowScale.toFixed(4)}</label>
                        </div>
                    </div>

                    <label style={{fontWeight: 600}}>Map Hover Coordinates</label>
                    <div className="horizontal">
                        <div className="vertical" style={{marginRight: "1rem"}}>
                            <label >Window X: </label>
                            <label >Window Y: </label>
                            <label >Longitude: </label>
                            <label >Latitude: </label>
                            <label >Pixel X: </label>
                            <label >Pixel Y: </label>
                        </div>
                        <div className="vertical">
                            <label >{this.state.mapHoverWindowCoordinate.x.toFixed(4)}</label>
                            <label >{this.state.mapHoverWindowCoordinate.y.toFixed(4)}</label>
                            <label >{MapUtils.toLng(this.state.mapHoverGeographicCoordinate.x)}</label>
                            <label >{MapUtils.toLat(this.state.mapHoverGeographicCoordinate.y)}</label>
                            <label >{MapUtils.toPixel(this.state.mapHoverRelativeCoordinate.x)}</label>
                            <label >{MapUtils.toPixel(this.state.mapHoverRelativeCoordinate.y)}</label>
                        </div>
                    </div>
                </div>

                <div className="overlay-bottom-right overlay-border">Imagery Tiles: @ESRI/ArcGIS</div>
            </div>
        );
    }

    public windowPositionHorizontalChanged = (e: any) => {
        this.geoMap.windowPositionHorizontal = e.target.valueAsNumber;
    }

    public windowPositionVerticalChanged = (e: any) => {
        this.geoMap.windowPositionVertical = e.target.valueAsNumber;
    }

    public windowScaleChanged = (e: any) => {
        this.geoMap.windowScale = e.target.valueAsNumber;
    }

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

        this.geoMap = geoMap;
        this.geoMap.zoomToGeographic({ left:-134.5, top:16.5, width:70.0, height:37.0 });
        this.geoMap.windowPositionHorizontal = 0.1;
        this.geoMap.windowPositionVertical = 0.1;
        this.geoMap.windowScale = 0.1;
    }

    public onMapWindowRectChanged(viewer: IgrSeriesViewer, e: IgrRectChangedEventArgs) {
        let geoMap = viewer as IgrGeographicMap;

        // storing window location and size (values between 0.0 and 1.0)
        const windowRect: IgRect = e.newRect;

        // converting window rect to geographic rect/region:
        const geoRect: any = geoMap.getGeographicFromZoom(windowRect);
        geoRect.bottom = geoRect.top  + geoRect.height;
        geoRect.right  = geoRect.left + geoRect.width;
        // calculating center of geographic region
        geoRect.latitude  = geoRect.top  + (geoRect.height / 2);
        geoRect.longitude = geoRect.left + (geoRect.width / 2);

        this.setState({
            mapRegion: geoRect,
            windowPositionHorizontal: geoMap.actualWindowPositionHorizontal,
            windowPositionVertical: geoMap.actualWindowPositionVertical,
            windowScale: geoMap.actualWindowScale,
            geoT: "T: " + MapUtils.toLat(geoRect.top),
            geoL: "L: " + MapUtils.toLng(geoRect.left),
            geoH: "H: " + MapUtils.toLng(geoRect.height),
            geoW: "W: " + MapUtils.toLng(geoRect.width),
            winT: "T: " + windowRect.top.toFixed(4),
            winL: "L: " + windowRect.left.toFixed(4),
            winH: "H: " + windowRect.height.toFixed(4),
            winW: "W: " + windowRect.width.toFixed(4),
        });
    }

    public onMapMouseMove(e: any) {
        const bounds = e.target.getBoundingClientRect();
        const relativeCoordinate = {
            x: e.clientX - bounds.left,
            y: e.clientY - bounds.top
        };

        const windowCoordinate = {
            x: (e.clientX - bounds.left) / bounds.width,
            y: (e.clientY - bounds.top) / bounds.height
        };

        // converting mouse pixel coordinate to geographic coordinate:
        const geoCoordinate: any = this.geoMap.getGeographicPoint(relativeCoordinate);

        this.setState({
            mapHoverGeographicCoordinate: geoCoordinate,
            mapHoverRelativeCoordinate: relativeCoordinate,
            mapHoverWindowCoordinate: windowCoordinate
        });
    }

    public componentDidMount() {
        const elem = document.getElementById('map');
        elem.addEventListener('mousemove', this.onMapMouseMove, false);
    }

    public onSelectionChanged = (e: any) =>{
        if (this.geoMap === undefined) return;

        const name = e.target.value.toString();
        const region = this.NavigationRegions[name];

        this.geoMap.zoomToGeographic(region);

        this.setState({ selectedRegion: name});
    }
}

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

Edit in: Codesandbox

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

地理座標

これらの座標で囲まれた地理的領域内の地図コンテンツをナビゲートします。

• 水平方向に 180°E (マイナス) から 180°W (プラス) の経度
• 垂直方向に 85°S (マイナス) から 85°N (プラス) の緯度

このコード スニペットは、地理座標を使用してマップをナビゲートする方法を示しています。

const geoMap = new IgrGeographicMap({ name: "geoMap" });

geoMap.zoomToGeographic({ left: -134.5, top: 16.5, width: 70.0, height: 37.0 });
ts

ウィンドウ座標

また、これらの相対座標で区切られたウィンドウ長方形内でマップ コンテンツをナビゲーションできます。

• 水平方向に 0.0 から 1.0 の値
• 垂直方向に 0.0 から 1.0 の値

このコード スニペットは、相対ウィンドウ座標を使用してマップをナビゲートする方法を示しています。

const geoMap = new IgrGeographicMap({ name: "geoMap" });

geoMap.windowRect = { left: 0.1, top: 0.1, width: 0.5, height: 0.5 };
// or
geoMap.windowPositionHorizontal = 0.1;
geoMap.windowPositionVertical = 0.1;
geoMap.windowScale = 0.5;
ts

プロパティ

以下の表は IgrGeographicMap コントロールのナビゲーションで使用できるプロパティをまとめたものです。

プロパティ名	プロパティ型	概要
windowRect	Rect	地図コンテンツの表示領域にナビゲーション ウィンドウの新しい位置とサイズを設定します。0、0、1、1 の値で長方形を指定すると、ナビゲーション ウィンドウのマップ コンテンツ全体がズームアウトされます。
windowScale	number	マップ コントロールのナビゲーション ウィンドウの新しいサイズを設定します。windowRect プロパティに格納されている Width または Height の最小値です。
windowPositionHorizontal	number	マップ コントロールの左端からのナビゲーション ウィンドウのアンカー ポイントの新しい水平位置を設定します。これは windowRect プロパティの Left に保存された値と等しくなります。
windowPositionVertical	number	ナビゲーション ウィンドウのアンカー ポイントの、地図コントロールの上端からの新しい垂直位置を設定します。これは windowRect プロパティの Top に保存された値と等しくなります。
actualWindowRect	Rect	マップ コンテンツの表示領域内のナビゲーション ウィンドウの現在の位置とサイズを示します。0、0、1、1の値で長方形を指定すると、ナビゲーション ウィンドウにマップ コンテンツ全体が表示されます。
actualWindowScale	number	マップ コントロールのナビゲーション ウィンドウの現在のサイズを示します。actualWindowRect プロパティに格納されている Width または Height の最小値と同じです。
actualWindowPositionHorizontal	number	マップ コントロールの左端からのナビゲーション ウィンドウのアンカー ポイントの現在の水平位置を示します。actualWindowRect プロパティの Left に保存された値と等しくなります。
actualWindowPositionVertical	number	マップコントロールの上端からのナビゲーションウィンドウのアンカーポイントの垂直位置を示します。actualWindowRect プロパティの Top に保存された値と等しくなります。

API リファレンス

• actualWindowRect
• windowRect
• IgrGeographicMap
• zoomable