Angular 地理ポリライン マップ

    Angular マップ コンポーネントでは、IgxGeographicPolylineSeriesComponent を使用して、地理的コンテキストでポリラインを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市または空港などの地理的位置間の道路または接続を描画するためにしばしば使用されます。

    Angular 地理ポリライン マップの例

    IgxGeographicPolylineSeriesComponent は、IgxGeographicShapeSeriesComponent とよく似ていますが、地理空間データがポリゴンではなくポリラインでレンダリングされる点が異なります。

    データ要件

    コントロール内の他の種類の地理的シリーズと同様に、IgxGeographicPolylineSeriesComponent には、オブジェクトの配列にバインドできる ItemsSource プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、ShapeMemberPath プロパティにマップされます。IgxGeographicPolylineSeriesComponent は、コントロールで多角形をプロットするために、このマップされたデータ列のポイントを使用します。

    コード スニペット

    以下のコードは、IgxShapeDataSource を使用してシェイプ ファイルからロードした都市の場所に IgxGeographicPolylineSeriesComponent をバインドする方法を示します。

    <div className="sampleRoot" >
    
            <igx-geographic-map #map
                width="700px"
                height="500px"
                zoomable="true"
                >
            </igx-geographic-map>
    </div>
    <ng-template let-series="series" let-item="item" #template>
    <div>
        <span>
        {{item.country}} {{item.type}}
        </span>
        <br />
        <span>
        Length: {{item.length}} miles
        </span>
    </div>
    </ng-template>
    
    import { AfterViewInit, Component, EmbeddedViewRef, TemplateRef, ViewChild} from "@angular/core";
    import { IgxShapeDataSource } from 'igniteui-angular-core';
    import { IgxIgxGeographicMapComponent } from 'igniteui-angular-maps';
    import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
    
    @Component({
      selector: "app-map-geographic-shape-polyline-series",
      styleUrls: ["./map-geographic-shape-polyline-series.component.scss"],
      templateUrl: "./map-geographic-shape-polyline-series.component.html"
    })
    
    export class MapTypeShapePolylineSeriesComponent implements AfterViewInit {
    
      @ViewChild ("map")
      public map: IgxGeographicMapComponent;
    
      @ViewChild("template")
      public tooltip: TemplateRef<object>;
    
      constructor() {
      }
    
      public ngAfterViewInit(): void {
        this.map.windowRect = { left: 0.195, top: 0.325, width: 0.2, height: 0.1 };
    
        const sds = new IgxShapeDataSource();
        sds.shapefileSource = "/assets/Shapes/AmericanRoads.shp";
        sds.databaseSource  = "/assets/Shapes/AmericanRoads.dbf";
        sds.dataBind();
        sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
      }
    
      public onDataLoaded(sds: IgxShapeDataSource, e: any) {
        const shapeRecords = sds.getPointData();
        console.log("loaded /Shapes/AmericanRoads.shp " + shapeRecords.length);
    
        const roadsUSA: any[] = [];
        const roadsMEX: any[] = [];
        const roadsCAN: any[] = [];
    
        // filtering records of loaded shapefile
        for (const record of shapeRecords) {
            // reading field values loaded from DBF file
            const type = record.fieldValues.RoadType;
            const road = {
                country: record.fieldValues.Country,
                length: record.fieldValues.RoadLength / 10,
                points: record.points,
                type: type === 1 ? "Highway" : "Road"
            };
            // grouping road items by country names
            if (type === 1 || type === 2) {
                if (road.country === "USA") {
                    roadsUSA.push(road);
                } else if (road.country === "MEX") {
                    roadsMEX.push(road);
                } else if (road.country === "CAN") {
                    roadsCAN.push(road);
                }
            }
        }
    
        // creating polyline series for roads of each country
        this.addSeriesWith(roadsCAN, "rgba(252, 32, 32, 0.9)");
        this.addSeriesWith(roadsUSA, "rgba(3, 121, 231, 0.9)");
        this.addSeriesWith(roadsMEX, "rgba(14, 194, 14, 0.9)");
    }
    
      public addSeriesWith(shapeData: any[], shapeBrush: string) {
            const lineSeries = new IgxGeographicPolylineSeriesComponent ();
            lineSeries.dataSource = shapeData;
            lineSeries.shapeMemberPath = "points";
            lineSeries.shapeFilterResolution = 2.0;
            lineSeries.shapeStrokeThickness = 2;
            lineSeries.shapeStroke = shapeBrush;
            lineSeries.tooltipTemplate = this.tooltip;
            this.map.series.add(lineSeries);
        }
    }
    

    API リファレンス