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	직사각형	지도 콘텐츠의 볼 수 있는 영역에서 탐색 창의 새 위치와 크기를 설정합니다. 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 참조

• actualWindowRect
• windowRect
• IgcGeographicMapComponent
• zoomable