Angular マップの概要

Ignite UI for Angular Map コンポーネントを使用すると、ビューモデルからの地理的位置を含むデータ、またはシェープファイルからロードされた地理空間データを地理的画像マップに表示できます。

Angular マップの例

以下のサンプルは、Bubble Series (バブルシリーズ) とも呼ばれる IgxGeographicProportionalSymbolSeriesComponent を使用して IgxGeographicMapComponent にデータを表示する方法を示しています。

Angular 地図コンポーネントを使用すると、Bing Maps™ および Open Street Maps から地理的画像をレンダリングできます。マップは何万ものデータポイントをプロットし、コントロールがリアルタイムフィードを処理できるように数ミリ秒ごとにそれらを更新します。

マップの Series プロパティは、無制限の地理的シリーズのレンダリングをサポートするために使用されます。このプロパティは、地理的シリーズオブジェクトのコレクションで、任意のタイプの地理的シリーズをそれに追加できます。たとえば、都市などの地理的位置をプロットするために IgxGeographicSymbolSeriesComponent、またこれらの地理的位置の間の接続 (道路など) をプロットするために IgxGeographicPolylineSeriesComponent を追加できます。

Map は、マウス、キーボード、またはコードビハインドを使用して、マップコンテンツをナビゲーションするためのカスタマイズ可能なナビゲーション動作を提供します。

依存関係

地理マップコンポーネントを使用するには、はじめにこれらのパッケージをインストールする必要があります。

npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts
npm install --save igniteui-angular-maps

モジュールの要件

IgxGeographicMapComponent には以下のモジュールが必要ですが、DataChartInteractivityModule は、マップコンテンツのパンやズームなどのマウス操作にのみ必要です。

// app.module.ts
import { IgxGeographicMapModule } from 'igniteui-angular-maps';
import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxGeographicMapModule,
		IgxDataChartInteractivityModule
        // ...
    ]
})
export class AppModule {}

import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';

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

export class MapOverviewComponent implements AfterViewInit {

    @ViewChild ("map")
    public map: IgxGeographicMapComponent;
    constructor() {
    }

    public ngAfterViewInit(): void {
        this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 };
    }
}

使用方法

マップモジュールがインポートされたので、以下のステップは地理的地図を作成することです。以下のコードは、これを実行して地図内でズームを有効にする方法を示しています。

<div className="sampleRoot" >
    <igx-geographic-map #map
        width="700px"
        height="500px"
        zoomable="true" >
    </igx-geographic-map>
</div>

その他のリソース

関連する Angular マップ機能の詳細については、以下のトピックを参照してください。

地理マップのナビゲーション

API リファレンス

以下は上記のセクションで説明した API メンバーのリストです。