Web Components Bing Maps 画像の表示

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

Web Components Bing Maps 画像の表示の例

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 { MapUtils, MapRegion } from './MapUtils';
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { BingMapsImageryStyle } from 'igniteui-webcomponents-maps';
import { IgcBingMapsMapImagery } from 'igniteui-webcomponents-maps';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataChartInteractivityModule,
    IgcGeographicMapModule
);

export class MapDisplayImageryBingTiles {

    private geoMap1: IgcGeographicMapComponent;
    private geoMap2: IgcGeographicMapComponent;
    private geoMap3: IgcGeographicMapComponent;

    constructor() {

        this.geoMap1 = document.getElementById('map1') as IgcGeographicMapComponent;
        this.geoMap2 = document.getElementById('map2') as IgcGeographicMapComponent;
        this.geoMap3 = document.getElementById('map3') as IgcGeographicMapComponent;

        this.createMap1(this.geoMap1);
        this.createMap2(this.geoMap2);
        this.createMap3(this.geoMap3);
    }

    createMap1(map: IgcGeographicMapComponent) {
        map.zoomable = true;

        const tileSource = new IgcBingMapsMapImagery();
        tileSource.apiKey = MapUtils.getBingKey();
        tileSource.imageryStyle = BingMapsImageryStyle.Aerial;
        // resolving BingMaps uri based on HTTP protocol of hosting website
        let tileUri = tileSource.actualBingImageryRestUri;
        let isHttpSecured = window.location.toString().startsWith('https:');
        if (isHttpSecured) {
            tileSource.bingImageryRestUri = tileUri.replace('http:', 'https:');
        } else {
            tileSource.bingImageryRestUri = tileUri.replace('https:', 'http:');
        }

        map.backgroundContent = tileSource;

        // optional - navigating to a map region
        MapUtils.navigateTo(map, MapRegion.Caribbean);
    }

    createMap2(map: IgcGeographicMapComponent) {
        map.zoomable = true;
        const tileSource = new IgcBingMapsMapImagery();
        tileSource.apiKey = MapUtils.getBingKey();
        tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels;
        // resolving BingMaps uri based on HTTP protocol of hosting website
        let tileUri = tileSource.actualBingImageryRestUri;
        let isHttpSecured = window.location.toString().startsWith('https:');
        if (isHttpSecured) {
            tileSource.bingImageryRestUri = tileUri.replace('http:', 'https:');
        } else {
            tileSource.bingImageryRestUri = tileUri.replace('https:', 'http:');
        }

        map.backgroundContent = tileSource;

        // optional - navigating to a map region
        MapUtils.navigateTo(map, MapRegion.Caribbean);
    }

    createMap3(map: IgcGeographicMapComponent) {
        map.zoomable = true;
        const tileSource = new IgcBingMapsMapImagery();
        tileSource.apiKey = MapUtils.getBingKey();
        tileSource.imageryStyle = BingMapsImageryStyle.Road;
        // resolving BingMaps uri based on HTTP protocol of hosting website
        let tileUri = tileSource.actualBingImageryRestUri;
        let isHttpSecured = window.location.toString().startsWith('https:');
        if (isHttpSecured) {
            tileSource.bingImageryRestUri = tileUri.replace('http:', 'https:');
        } else {
            tileSource.bingImageryRestUri = tileUri.replace('https:', 'http:');
        }

        map.backgroundContent = tileSource;

        // optional - navigating to a map region
        MapUtils.navigateTo(map, MapRegion.Caribbean);
    }
}

new MapDisplayImageryBingTiles();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>MapDisplayImageryBingTiles</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 horizontal" >
    <igc-geographic-map id="map1" class="container" height="100%" width="100%"></igc-geographic-map>
    <igc-geographic-map id="map2" class="container" height="100%" width="100%"></igc-geographic-map>
    <igc-geographic-map id="map3" class="container" height="100%" width="100%"></igc-geographic-map>
</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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

コード スニペット

以下のコード スニペットは、IgcBingMapsMapImagery を使用して Web Components IgcGeographicMapComponent で Bing Maps からの地理的画像を表示する方法を示します。

プロパティ

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

プロパティ名	プロパティ型	概要
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
• IgcBingMapsMapImagery
• IgcGeographicMapComponent