Bing Maps에서 이미지 표시 Angular

Angular IgxBingMapsMapImagery는 Microsoft®에서 제공하는 지리적 이미지 매핑 서비스입니다. 세계의 3가지 스타일의 지리적 이미지 타일을 제공합니다. 이 지리 이미지 서비스는 www.bing.com/maps 웹 사이트에서 직접 액세스할 수 있습니다. Ignite UI for Angular map 구성 요소는 클래스를 사용하여 IgxBingMapsMapImagery Bing Maps의 지리적 이미지를 맵의 배경 콘텐츠에 표시할 수 있습니다.

Angular Displaying Imagery from Bing Maps Example

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

import { IgxGeographicMapComponent } from "igniteui-angular-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 MapUtility {

    public static navigateTo(geoMap: IgxGeographicMapComponent, name: MapRegion) {

        const geoRect = this.getRegions()[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) {
        geoRect.name = name;
        geoRect.longitude = geoRect.left + (geoRect.width / 2);
        geoRect.latitude = geoRect.top + (geoRect.height / 2);

        this.regions[name] = geoRect;
    }

    private static createRegions() {
        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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxGeographicMapModule } from "igniteui-angular-maps";
import { IgxDataChartInteractivityModule } from "igniteui-angular-charts";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxGeographicMapModule,
    IgxDataChartInteractivityModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { BingMapsImageryStyle } from "igniteui-angular-maps";
import { IgxBingMapsMapImagery } from "igniteui-angular-maps";
import { IgxGeographicMapComponent } from "igniteui-angular-maps";
import { MapUtility } from "./MapUtility";

@Component({
  standalone: false,
  selector: "app-root",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html"
})

export class AppComponent implements AfterViewInit {

    @ViewChild("map", { static: true })
    public map: IgxGeographicMapComponent;

    constructor() {
    }

    public ngAfterViewInit(): void {
        const tileSource = new IgxBingMapsMapImagery();
        tileSource.apiKey = MapUtility.getBingKey();
        tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels;
        let tileUri = tileSource.actualBingImageryRestUri;

        // resolving BingMaps uri based on HTTP protocol of hosting website
        const isHttpSecured = window.location.toString().startsWith("https:");
        if (isHttpSecured) {
            tileUri = tileUri.replace("http:", "https:");
        } else {
            tileUri = tileUri.replace("https:", "http:");
        }
        tileSource.bingImageryRestUri = tileUri;

        this.map.backgroundContent = tileSource;

        this.map.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.7, height: 0.7});
    }
}
tsコピー

<div class="container vertical">
    <igx-geographic-map #map
        width="100%"
        height="100%"
        zoomable="true" >
    </igx-geographic-map>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Code Snippet

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

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

import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxBingMapsMapImagery } from 'igniteui-angular-maps';
// ...
const tileSource = new IgxBingMapsMapImagery();
tileSource.apiKey = "YOUR_BING_MAPS_API_KEY";
tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels; // or
tileSource.imageryStyle = BingMapsImageryStyle.Aerial; // or
tileSource.imageryStyle = BingMapsImageryStyle.Road;

// resolving BingMaps uri based on HTTP protocol of hosting website
let tileUri = tileSource.actualBingImageryRestUri;
const isHttpSecured = window.location.toString().startsWith("https:");
if (isHttpSecured) {
    tileUri = tileUri.replace("http:", "https:");
} else {
    tileUri = tileUri.replace("https:", "http:");
}
tileSource.bingImageryRestUri = tileUri;

this.map.backgroundContent = tileSource;
ts

Properties

The following table summarized properties of the IgxBingMapsMapImagery class:

속성 이름	부동산 유형	설명
apiKey	끈	Bing Maps 이미지 서비스에 필요한 API 키를 설정하기 위한 속성을 나타냅니다. www.bingmapsportal.com 웹사이트에서 이 키를 얻어야 합니다.
imageryStyle	BingMapsImageryStyle	Bing Maps 이미지 타일 지도 스타일을 설정하기 위한 속성을 나타냅니다. 이 속성은 다음과 같이 설정할 수 있습니다.BingMapsImageryStyle 열거 값: 항공 - 도로 또는 라벨 오버레이 없이 항공 지도 스타일을 지정합니다. AerialWithLabels - 도로 및 라벨 오버레이가 포함된 항공 지도 스타일을 지정합니다. 도로 - 항공 오버레이 없이 도로 지도 스타일을 지정합니다.
bingImageryRestUri	끈	TilePath 및 SubDomains의 출처를 지정하는 Bing Imagery REST URI를 설정하기 위한 속성을 나타냅니다. 이는 선택적 속성이며 지정하지 않으면 기본 REST URI를 사용합니다.
cultureName	끈	타일 소스의 문화권 이름을 설정하기 위한 속성을 나타냅니다.
isDeferredLoad	부울	유효한 속성 값 할당 시 Bing Maps 서비스가 자동 초기화되어야 하는지 여부를 지정하는 속성을 나타냅니다.
isInitialized	부울	Bing Maps 서비스의 지리 이미지 타일이 초기화되고 지도 구성 요소에서 렌더링할 준비가 되었을 때 발생하는 True로 설정된 속성을 나타냅니다.
subDomains	SubDomainsCollection	URI 하위 도메인의 이미지 컬렉션을 나타냅니다.
tilePath	끈	지도 타일 이미지 URI를 설정하는 속성을 나타냅니다. 이는 Bing 지도의 실제 위치입니다.

API References

• BingMapsImageryStyle
• IgxBingMapsMapImagery
• IgxGeographicMapComponent