Angular マップの概要

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

    Angular マップの例

    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>