Angular Azure Maps의 이미지 미리 보기

Angular IgxAzureMapsImagery는 Microsoft®에서 제공하는 지리 영상 매핑 서비스입니다. 세계의 여러 스타일의 지리 이미지 타일을 제공합니다. 이 지리 이미지 서비스는 www.azure.microsoft.com 웹사이트에서 직접 액세스할 수 있습니다. Ignite UI for Angular 맵 구성 요소는 클래스를 사용하여 맵의 백그라운드 콘텐츠에 Azure Maps의 지리적 이미지를 표시할 수 있습니다 IgxAzureMapsImagery.

Angular Displaying Imagery from Azure Maps - Overview

Angular Displaying Imagery from Azure Maps - Code Example

다음 코드 조각은 클래스를 사용하여 IgxAzureMapsImagery Angular IgxGeographicMapComponent에서 Azure Maps의 지리적 이미지 타일을 표시하는 방법을 보여 줍니다.

<igx-geographic-map #map
    width="100%"
    height="100%"
    zoomable="true" >
</igx-geographic-map>

import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxAzureMapsImagery } from 'igniteui-angular-maps';
// ...
const tileSource = new IgxAzureMapsImagery();
tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY";
tileSource.imageryStyle = AzureMapsImageryStyle.Satellite; // or
tileSource.imageryStyle = AzureMapsImageryStyle.TerraOverlay; // or
tileSource.imageryStyle = AzureMapsImageryStyle.Road; //or Traffic & Weather etc.

this.map.backgroundContent = tileSource;

Angular Overlaying Imagery from Azure Maps - Overview

로 IgxGeographicTileSeriesComponent 작업할 때 오버 레이 (교통, 날씨, 레이블)를 기본 맵 스타일 위에 결합할 수 있습니다. 위성, 도로 또는 DarkGrey. 예를 들어 TerraOverlay를 사용합니다. 지형을 시각화하는 위성.

기본 스타일: 위성, 도로, 테라, 다크 그레이가 핵심 배경 타일을 제공합니다.
오버레이 스타일: 교통 및 날씨 이미지(예: , TrafficRelativeOverlay, WeatherRadarOverlay)는 타일 시리즈에 할당하여 기본 스타일 위에 레이어링되도록 설계되었습니다.
하이브리드 스타일: 기본 스타일과 유사 HybridRoadOverlay 하고 HybridDarkGreyOverlay 이미 기본 스타일을 오버레이(레이블, 도로 등)와 결합하므로 여러 레이어를 수동으로 관리할 필요가 없습니다.

이 디자인을 사용하면 다음과 같이 더 풍부한 지도를 구축할 수 있습니다.

TrafficOverlay를 사용하여 위성 이미지를 표시하여 실제 이미지의 혼잡을 강조 표시합니다.
WeatherRadarOverlay와 함께 Terra를 사용하여 강수량이 있는 지형을 시각화합니다.
LabelsRoadOverlay와 함께 DarkGrey를 적용하여 대시보드 친화적이고 대비가 많은 보기를 제공합니다.

Azure Traffic Tile Series with Background(배경)

Angular Overlaying Imagery from Azure Maps - Code Example

다음 코드 스니펫은 배경 이미지 위에 지리 이미지 타일을 표시하는 방법을 보여줍니다. Angular IgxGeographicMapComponent 사용하는 IgxAzureMapsImagery 차량과 IgxGeographicTileSeriesComponent 클래스를 위한 어두운 회색 지도가 제공됩니다.

<igx-geographic-map #map height="100%" width="100%" zoomable="true">
  <igx-geographic-tile-series #tileSeries></igx-geographic-tile-series>
</igx-geographic-map>

export class AppComponent implements AfterViewInit {
  @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent;
  @ViewChild('tileSeries', { static: true }) public tileSeries!: IgxGeographicTileSeriesComponent;

  public azureImagery!: IgxAzureMapsImagery;
  public azureKey: string = "<YOUR_KEY_HERE>";

  ngAfterViewInit(): void {
    // Update TileSeries
    const overlay = new IgxAzureMapsImagery();
    overlay.apiKey = this.azureKey;
    overlay.imageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay;
    this.tileSeries.tileImagery = overlay;

    // Update Map Background
    this.azureImagery = new IgxAzureMapsImagery();
    this.azureImagery.apiKey = this.azureKey;
    this.azureImagery.imageryStyle = AzureMapsImageryStyle.DarkGrey;
    this.map.backgroundContent = this.azureImagery;
  }
}

Properties

다음 표에는 클래스의 속성이 요약되어 있습니다. IgxAzureMapsImagery

속성 이름	부동산 유형	설명
`apiKey`	끈	Azure Maps 이미지 서비스에 필요한 API 키를 설정하기 위한 속성을 나타냅니다. 이 키는 azure.microsoft.com 웹 사이트에서 가져와야 합니다.
`imageryStyle`	`AzureMapsImageryStyle`	Azure Maps 이미지 타일 맵 스타일을 설정하기 위한 속성을 나타냅니다. 이 속성은 다음`AzureMapsImageryStyle` 열거형 값으로 설정할 수 있습니다. 위성 - 도로 또는 레이블 중첩이 없는 위성 맵 스타일을 지정합니다. 도로 - 도로 및 레이블 중첩이 있는 항공 지도 스타일을 지정합니다. DarkGrey - 대비 및 강조 표시 중첩을 위한 짙은 회색 베이스맵 스타일을 지정합니다 TerraOverlay - 음영 처리된 릴리프가 있는 지형 맵 스타일을 지정하여 고도 및 랜드스케이프 피처를 강조 표시합니다 LabelsRoadOverlay - 공중 오버레이가 없는 도시 레이블의 여러 오버레이 중 하나입니다. HybridRoadOverlay - 도로 및 레이블 오버레이와 결합된 위성 배경 HybridDarkGreyOverlay - 짙은 회색 레이블 오버레이와 결합된 위성 배경 LabelsDarkGreyOverlay - 짙은 회색 베이스맵 위에 도시 레이블을 오버레이하는 여러 항목 중 하나 TrafficDelayOverlay - 트래픽 지연 및 혼잡 영역을 실시간으로 표시합니다. TrafficAbsoluteOverlay - 현재 트래픽 속도를 절대값으로 표시합니다. TrafficReducedOverlay - 조명 기반 시각화를 통해 감소된 트래픽 흐름을 표시합니다. TrafficRelativeOverlay - 정상 조건과 관련된 트래픽 속도를 표시합니다. TrafficRelativeDarkOverlay - 대비를 높이기 위해 어두운 베이스맵에 정상 조건과 관련된 교통 속도를 표시합니다. WeatherRadarOverlay - 강수량에 대한 거의 실시간 레이더 이미지를 표시합니다. WeatherInfraredOverlay - 구름 덮개의 적외선 위성 이미지를 표시합니다.