Web Components シェープ ファイルを地理的データにバインディング

    Ignite UI for Web Components Map コンポーネントの IgcShapeDataSource クラスは、形状ファイルから地理空間データ (ポイント/位置、ポリライン、ポリゴン) を読み込み、それを IgcShapefileRecord オブジェクトのコレクションに変換します。

    Web Components シェープ ファイルを地理的データにバインディングの例

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    以下の表は、シェイプ ファイルを読み込むための IgcShapeDataSource クラスのプロパティを説明します。

    プロパティ 型 概要
    shapefileSource string シェイプ ファイル(.shp) から読み込まれた 1 つの地理空間シェープにすべてのポイントが含まれます。
    databaseSource string たとえば、シェープファイルで日本は、以下でポイント オブジェクト リストのリストとして表されます。

    両方のソース プロパティが null 以外の値に設定されると、IgcShapeDataSource オブジェクトの ImportAsync メソッドが起動し、シェイプ ファイルを取得して読み込み、最終的に変換を実行します。この操作が完了すると、IgcShapeDataSource は IgcShapefileRecord オブジェクトで生成され、シェイプ ファイルから地理空間データを読み込んで変換するプロセスが完了したことを通知するために、ImportCompleted イベントが起動されます。

    シェープファイルの読み込み

    以下のコードは、世界の主要都市の場所を含むシェイプ ファイルを読み込むための IgcShapeDataSource オブジェクトのインスタンスを作成します。また、xamGeographicMap コントロールにデータをバインドするための前提条件として ImportCompleted イベントを処理する方法も示します。

    Ignite UI for Web Components | CTA Banner

    シェープファイルをバインド

    Map コンポーネントでは、Geographic Series は、シェイプ ファイルから読み込まれる地理的データを表示するために使用されます。すべてのタイプの地理的シリーズには、オブジェクトの配列にバインドできる ItemsSource プロパティがあります。IgcShapeDataSource は IgcShapefileRecord オブジェクトのリストを含むため、このような配列の例です。

    IgcShapefileRecord クラスは、以下の表にリストする地理的データを保存するためのプロパティを提供します。

    プロパティ 概要
    Points シェイプ ファイル(.shp) から読み込まれた 1 つの地理空間シェープにすべてのポイントが含まれます。たとえば、シェープファイルで日本は、以下でポイント オブジェクト リストのリストとして表されます。
    • ポイントの最初のリストは北海道のシェイプを表します。
    • ポイントの 2 番目のリストは本州のシェイプを表します。
    • ポイントの 3 番目のリストは九州のシェイプを表します。
    • ポイントの 4 番目のリストは四国のシェイプを表します。
    | | `Fields` |列名でキーが付けられたシェイプ データベース ファイル (.dbf) からのデータ行を含みます。たとえば、日本についてのデータには、人口、地域、首都名などが含まれます。|

    このデータ構造は、適切なデータ列がマップされている限り、ほとんどの地理的シリーズでの使用に適しています。

    コード スニペット

    このコード例は、シェープ ファイルが IgcShapeDataSource を使用して読み込まれたことを前提としています。 以下のコードは、マップ コンポーネント内の IgcGeographicPolylineSeriesComponent を IgcShapeDataSource にバインドし、すべての IgcShapefileRecord オブジェクトの Points プロパティをマップします。

    <igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>
html
    connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;

    const sds = new IgcShapeDataSource();
    sds.importCompleted = this.onDataLoaded;
    sds.shapefileSource = "../shapes/WorldCities.shp";
    sds.databaseSource  = "../shapes/WorldCities.dbf";
    sds.dataBind();
}

onDataLoaded(sds: IgcShapeDataSource, e: any) {
    const shapeRecords = sds.getPointData();
    console.log("loaded WorldCities.shp " + shapeRecords.length);
    const geoLocations: any[] = [];
    // parsing shapefile data and creating geo-locations
    for (const record of shapeRecords) {
        const pop = record.fieldValues.POPULATION;
        if (pop > 0) {
            // each shapefile record has just one point
            const location = {
                latitude: record.points[0][0].y,
                longitude: record.points[0][0].x,
                city: record.fieldValues.NAME,
                population: pop
            };
            geoLocations.push(location);
        }
    }

    const geoSeries = new IgcGeographicSymbolSeriesComponent();
    geoSeries.dataSource = geoLocations;
    geoSeries.markerType = MarkerType.Circle;
    geoSeries.latitudeMemberPath  = "latitude";
    geoSeries.longitudeMemberPath = "longitude";
    geoSeries.markerBrush = "LightGray";
    geoSeries.markerOutline = "Black";
    geoSeries.tooltipTemplate = this.createTooltip;

    this.geoMap.series.add(geoSeries);
}
ts

    API リファレンス