Web Components 지도 콘텐츠 탐색

​IgcGeographicMapComponent 컨트롤의 탐색은 기본적으로 활성화되어 있으며 이를 통해 지도 콘텐츠의 확대/축소 및 이동이 가능합니다. 그러나 이 동작은 zoomable 속성을 사용하여 변경할 수 있습니다. 지도에서는 동기화된 확대/축소(보존된 종횡비로 지도 콘텐츠의 크기 조정)만 허용한다는 점을 아는 것이 중요합니다. 결과적으로 지도 콘텐츠를 수평으로 확장하지 않고 수직으로 확장하는 것은 불가능하며 그 반대의 경우도 마찬가지입니다.

Web Components Navigating Map Content Example

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

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Geographic Coordinates

다음 좌표로 묶인 지리적 영역 내에서 지도 콘텐츠를 탐색합니다.

• 수평으로 180°E(음수)에서 180°W(양수) 경도
• 수직으로 위도 85°S(음수)에서 85°N(양수)까지

이 코드 조각은 지리적 좌표를 사용하여 지도를 탐색하는 방법을 보여줍니다.

Window Coordinates

또한 다음 상대 좌표로 경계가 지정된 창 직사각형 내에서 지도 콘텐츠를 탐색할 수 있습니다.

• 수평으로 0.0에서 1.0 값
• 수직으로 0.0에서 1.0 값

이 코드 조각은 상대 창 좌표를 사용하여 지도를 탐색하는 방법을 보여줍니다.

Properties

다음 표에는 IgcGeographicMapComponent 컨트롤 탐색에 사용할 수 있는 속성이 요약되어 있습니다.

속성 이름	부동산 유형	설명
windowRect	직사각형	지도 콘텐츠의 볼 수 있는 영역에서 탐색 창의 새 위치와 크기를 설정합니다. 0, 0, 1, 1 값을 갖는 Rect는 탐색 창에서 전체 지도 콘텐츠를 축소합니다.
windowScale	숫자	지도 컨트롤 내 탐색 창의 새 크기를 설정합니다. 에 저장된 너비 또는 높이의 최소값과 동일합니다.windowRect 재산
windowPositionHorizontal	숫자	지도 컨트롤의 왼쪽 가장자리에서 탐색 창 앵커 포인트의 새로운 수평 위치를 설정합니다. 이는 왼쪽에 저장된 값과 동일합니다.windowRect 재산.
windowPositionVertical	숫자	지도 컨트롤의 상단 가장자리에서 탐색 창 앵커 포인트의 새로운 수직 위치를 설정합니다. Top에 저장된 값과 동일합니다.windowRect 재산.
actualWindowRect	직사각형	지도 콘텐츠의 볼 수 있는 영역에서 탐색 창의 현재 위치와 크기를 나타냅니다. 0, 0, 1, 1 값을 갖는 Rect는 탐색 창에 전체 지도 콘텐츠를 표시합니다.
actualWindowScale	숫자	지도 컨트롤에 있는 탐색 창의 현재 크기를 나타냅니다. 에 저장된 너비 또는 높이의 가장 작은 값과 같습니다.actualWindowRect 재산
actualWindowPositionHorizontal	숫자	지도 컨트롤의 왼쪽 가장자리에서 탐색 창 앵커 지점의 현재 수평 위치를 나타냅니다. 이는 왼쪽에 저장된 값과 동일합니다.actualWindowRect 재산.
actualWindowPositionVertical	숫자	지도 컨트롤의 상단 가장자리에서 탐색 창 앵커 포인트의 수직 위치를 나타냅니다. Top에 저장된 값과 동일합니다.actualWindowRect 재산.

API References

• actualWindowRect
• windowRect
• IgcGeographicMapComponent
• zoomable