Angular Bing Maps 画像の表示

IgxBingMapsMapImagery は、Microsoft® 社が提供する地理的画像マッピング サービスです。世界の地理的画像タイルを 3 以上提供します。この地理的画像サービスは、www.bing.com/maps に直接アクセスして利用できます。Ignite UI for Angular マップ コンポーネントは、IgxBingMapsMapImagery クラスを使用して、地図の背景コンテンツに Bing Maps の地理的画像を表示します。

Angular Bing Maps 画像の表示の例

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

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

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

無料で試してみる

コード スニペット

以下のコード スニペットは、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

プロパティ

以下の表で、IgxBingMapsMapImagery クラスのプロパティを説明します。

プロパティ名	プロパティ型	概要
apiKey	文字列	Bing Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは www.bingmapsportal.com ウェブサイトから取得してください。
imageryStyle	BingMapsImageryStyle	Bing Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の BingMapsImageryStyle 列挙値に設定できます。Aerial - 道路またはラベルオーバーレイなしの Aerial マップ スタイルを指定します。 Aerial - 道路およびラベル付きの衛星地図スタイルを指定します。 AerialWithLabels - 道路およびラベル付きの衛星地図スタイルを指定します。 Road - 衛星オーバーレイなしの道路地図スタイルを指定します。
bingImageryRestUri	文字列	TilePath と SubDomain の位置を指定する Bing Imagery REST URI を設定するためのプロパティを表します。これはオプションのプロパティです。指定されていない場合、デフォルトの REST URI を使用します。
cultureName	文字列	タイル ソースのカルチャ名を設定するためのプロパティを表します。
isDeferredLoad	ブール値	Bing Maps サービスが有効なプロパティ値の割り当てで自動初期化するかどうかを指定するプロパティを表します。
isInitialized	ブール値	True に設定されているプロパティは、Bing Maps サービスからの地理的画像タイルが初期化され、マップ コンポーネントでのレンダリングの準備ができたときに発生することを表します。
subDomains	SubDomainsCollection	URI サブ ドメインの画像コレクションを表します。
tilePath	文字列	マップ タイル画像 URI を設定するプロパティを表します。これは Bing Maps の実際の位置です。

API リファレンス

• BingMapsImageryStyle
• IgxBingMapsMapImagery
• IgxGeographicMapComponent