Web Components コンテンツのナビゲーション

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

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

EXAMPLE

DATA

TS

HTML

CSS

import { IgcGeographicMapComponent } from 'igniteui-webcomponents-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: IgcGeographicMapComponent, 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 { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcRectChangedEventArgs } from 'igniteui-webcomponents-core'
import { IgcSeriesViewerComponent } from 'igniteui-webcomponents-charts'
import { ModuleManager } from 'igniteui-webcomponents-core';
import { MapUtils } from './MapUtils';

ModuleManager.register(
    IgcDataChartInteractivityModule,
    IgcGeographicMapModule
);

export class MapNavigation {

    private geoMap: IgcGeographicMapComponent;

    constructor() {
        this.lblGeoTop = document.getElementById('lblGeoTop') as HTMLLabelElement;
        this.lblGeoLeft = document.getElementById('lblGeoLeft') as HTMLLabelElement;
        this.lblGeoHeight = document.getElementById('lblGeoHeight') as HTMLLabelElement;
        this.lblGeoWidth = document.getElementById('lblGeoWidth') as HTMLLabelElement;
        this.lblGeoLongitude = document.getElementById('lblGeoLongitude') as HTMLLabelElement;
        this.lblGeoLatitudes = document.getElementById('lblGeoLatitudes') as HTMLLabelElement;

        this.lblWindowTop = document.getElementById('lblWindowTop') as HTMLLabelElement;
        this.lblWindowLeft = document.getElementById('lblWindowLeft') as HTMLLabelElement;
        this.lblWindowHeight = document.getElementById('lblWindowHeight') as HTMLLabelElement;
        this.lblWindowWidth = document.getElementById('lblWindowWidth') as HTMLLabelElement;
        this.lblWindowScale = document.getElementById('lblWindowScale') as HTMLLabelElement;
        this.lblWindowPositionX = document.getElementById('lblWindowPositionX') as HTMLLabelElement;
        this.lblWindowPositionY = document.getElementById('lblWindowPositionY') as HTMLLabelElement;
        this.lblWindowHoverX = document.getElementById('lblWindowHoverX') as HTMLLabelElement;
        this.lblWindowHoverY = document.getElementById('lblWindowHoverY') as HTMLLabelElement;

        this.lblPixelX = document.getElementById('lblPixelX') as HTMLLabelElement;
        this.lblPixelY = document.getElementById('lblPixelY') as HTMLLabelElement;

        const selectMapRegion = document.getElementById("selectMapRegion") as HTMLSelectElement;
        selectMapRegion!.addEventListener("change", this.onMapRegionChanged );

        this.onMapWindowChanged = this.onMapWindowChanged.bind(this);
        this.onMapMouseMove = this.onMapMouseMove.bind(this);
        this.onMapRegionChanged = this.onMapRegionChanged.bind(this);

        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
        this.geoMap.actualWindowRectChanged = this.onMapWindowChanged;
        this.geoMap.zoomable = true;
        this.geoMap.addEventListener('mousemove', this.onMapMouseMove, false);
        const usaRegion = { left: -134.5, top: 16.0, width: 70.0, height: 37.0 };
        this.geoMap.zoomToGeographic(usaRegion);
    }

    public onMapRegionChanged = (e: any) => {
        let name = e.target.value as String;
        const regions =  MapUtils.getRegions();
        for (const key in regions) {
            if (key === name && regions.hasOwnProperty(key)) {
                const region = regions[key];
                this.geoMap.zoomToGeographic(region);
                break;
            }
        }
    }

    public onMapWindowChanged(map: IgcSeriesViewerComponent, e: IgcRectChangedEventArgs) {
        // storing window location and size (values between 0.0 and 1.0)
        const windowRect = e.newRect;

        // converting window rect to geographic rect/region:
        const geoRect: any = this.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);

        //console.log("onWindowRectChange " + windowRect.left.toString());
        this.lblGeoTop.innerText    = "T: " + MapUtils.toLat(geoRect.top);
        this.lblGeoLeft.innerText   = "L: " + MapUtils.toLng(geoRect.left);
        this.lblGeoHeight.innerText = "H: " + MapUtils.toLng(geoRect.height);
        this.lblGeoWidth.innerText  = "W: " + MapUtils.toLng(geoRect.width);

        this.lblWindowTop.innerText    = "T: " + windowRect.top.toFixed(4);
        this.lblWindowLeft.innerText   = "L: " + windowRect.left.toFixed(4);
        this.lblWindowHeight.innerText = "H: " + windowRect.height.toFixed(4);
        this.lblWindowWidth.innerText  = "W: " + windowRect.width.toFixed(4);
        this.lblWindowScale.innerText = this.geoMap.actualWindowScale.toFixed(4);
        this.lblWindowPositionX.innerText = windowRect.left.toFixed(4);
        this.lblWindowPositionY.innerText = windowRect.top.toFixed(4);
    }

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

        this.lblPixelX.innerText = MapUtils.toPixel(relativeCoordinate.x);
        this.lblPixelY.innerText = MapUtils.toPixel(relativeCoordinate.y);

        // converting mouse pixel coordinate to geographic coordinate:
        const geoCoordinate: any = this.geoMap.getGeographicPoint(relativeCoordinate);
        this.lblGeoLongitude.innerText = MapUtils.toLng(geoCoordinate.x);
        this.lblGeoLatitudes.innerText = MapUtils.toLat(geoCoordinate.y);

        // converting mouse pixel coordinate to window coordinate:
        const windowCoordinateX = (e.clientX - bounds.left) / bounds.width;
        const windowCoordinateY = (e.clientY - bounds.top) / bounds.height;
        this.lblWindowHoverX.innerText = windowCoordinateX.toFixed(4);
        this.lblWindowHoverY.innerText = windowCoordinateY.toFixed(4);
    }

    private lblGeoTop: HTMLLabelElement;
    private lblGeoLeft: HTMLLabelElement;
    private lblGeoHeight: HTMLLabelElement;
    private lblGeoWidth: HTMLLabelElement;
    private lblGeoLongitude: HTMLLabelElement;
    private lblGeoLatitudes: HTMLLabelElement;

    private lblWindowTop: HTMLLabelElement;
    private lblWindowLeft: HTMLLabelElement;
    private lblWindowHeight: HTMLLabelElement;
    private lblWindowWidth: HTMLLabelElement;
    private lblWindowScale: HTMLLabelElement;
    private lblWindowHoverX: HTMLLabelElement;
    private lblWindowHoverY: HTMLLabelElement;
    private lblWindowPositionX: HTMLLabelElement;
    private lblWindowPositionY: HTMLLabelElement;

    private lblPixelX: HTMLLabelElement;
    private lblPixelY: HTMLLabelElement;
}

new MapNavigation();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>MapNavigation</title>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>
  <body>
    <div id="root">

<div class="container sample">
    <igc-geographic-map id="geoMap" width="100%" height="100%">
    </igc-geographic-map>

    <div class="overlay-left overlay-border vertical" style="background: rgba(217, 217, 217, 0.5)">
      <label style="font-weight: 600">Zoom to Map Region</label>
      <select id="selectMapRegion">
        <option>United States</option>
        <option>United Kingdom</option>
        <option>South Africa</option>
        <option>Poland</option>
      </select>
      <label style="font-weight: 600">Map Geographic Rect</label>
      <div  class="horizontal">
          <div  class="vertical"  style="margin-right: 1rem">
              <label id="lblGeoTop"></label>
              <label id="lblGeoLeft"></label>
          </div>
          <div  class="vertical">
              <label id="lblGeoHeight"></label>
              <label id="lblGeoWidth"></label>
          </div>
      </div>

      <label style="font-weight: 600">Map Window Rect</label>
      <div  class="horizontal">
          <div  class="vertical"  style="margin-right: 1rem">
              <label id="lblWindowTop"></label>
              <label id="lblWindowLeft"></label>
          </div>
          <div  class="vertical">
              <label id="lblWindowHeight"></label>
              <label id="lblWindowWidth"></label>
          </div>
      </div>

      <label style="font-weight: 600">Map Window Position</label>
      <div  class="horizontal">
          <div  class="vertical"  style="margin-right: 1rem">
              <label>Horizontal:</label>
              <label>Vertical:</label>
              <label>Scale:</label>
          </div>
          <div  class="vertical">
              <label id="lblWindowPositionX"> </label>
              <label id="lblWindowPositionY"> </label>
              <label id="lblWindowScale"> </label>
          </div>
      </div>

      <label style="font-weight: 600">Map Hover Coordinates</label>
      <div  class="horizontal">
          <div  class="vertical" style="margin-right: 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  class="vertical">
              <label id="lblWindowHoverX"></label>
              <label id="lblWindowHoverY"></label>
              <label id="lblGeoLongitude"> </label>
              <label id="lblGeoLatitudes"> </label>
              <label id="lblPixelX"> </label>
              <label id="lblPixelY"> </label>
          </div>
      </div>
  </div>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

地理座標

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

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

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

ウィンドウ座標

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

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

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

プロパティ

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

プロパティ名	プロパティ型	概要
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
• IgcGeographicMapComponent
• zoomable