Angular Binding Shape Files with Geo-spatial Data

    O componente Ignite UI for Angular mapa, aIgxShapeDataSource classe carrega dados geoespaciais (pontos/localizações, polilíneas, polígonos) de arquivos de forma e os converte em uma coleção deIgxShapefileRecord objetos.

    Angular Binding Shape Files with Geo-spatial Data Example

    A tabela a seguir explica as propriedades daIgxShapeDataSource classe para carregar arquivos shape.

    Propriedade Tipo Descrição
    shapefileSource corda Especifica o Uri para um arquivo de forma (.shp) que contém itens de dados geoespaciais.
    databaseSource corda Especifica o Uri para um arquivo de banco de dados de forma (.dbf) que contém uma tabela de dados para itens de dados geoespaciais.

    Quando ambas as propriedades da fonte são definidas para valores não nulos, então oIgxShapeDataSource método ImportAsync do objeto é invocado, que em retorno realiza a busca e leitura dos arquivos shape e, finalmente, a conversão. Após a conclusão dessa operação, oIgxShapeDataSource é preenchido comIgxShapefileRecord objetos e oImportCompleted evento é aberto para notificar sobre o processo concluído de carregamento e conversão de dados geoespaciais a partir de arquivos de formas.

    Loading Shapefiles

    O código a seguir cria uma instância doIgxShapeDataSource objeto para carregar um arquivo de forma que contém localizações das principais cidades do mundo. Também demonstra como lidar com oImportCompleted evento como pré-requisito para vincular dados ao componente do mapa.

    Binding Shapefiles

    No componente de mapas, as Séries Geográficas são usadas para exibir dados geoespaciais carregados a partir de arquivos de formas. Todos os tipos de Séries Geográficas possuem umaItemsSource propriedade que pode ser vinculada a um array de objetos. OIgxShapeDataSource é um exemplo desse tipo de array porque contém uma lista deIgxShapefileRecord objetos.

    AIgxShapefileRecord classe fornece propriedades para armazenar dados geoespaciais, listadas na tabela a seguir.

    Propriedade Descrição
    Points Contém todos os pontos em uma forma geoespacial carregada de um arquivo de forma (.shp). Por exemplo, o país do Japão no arquivo de forma seria representado como uma lista de uma lista de objetos de pontos, onde:
    • A primeira lista de pontos descreve a forma da ilha de Hokkaido
    • A segunda lista de pontos descreve a forma da ilha de Honshu
    • A terceira lista de pontos descreve a forma da ilha de Kyushu
    • The fourth list of points describes shape of Shikoku island
    Fields Contém uma linha de dados do arquivo de banco de dados de formas (.dbf) indexada pelo nome de uma coluna. Por exemplo, um dado sobre o condado do Japão que inclui população, área, nome de uma capital, etc.

    Essa estrutura de dados é adequada para uso na maioria das Séries Geográficas, desde que as colunas de dados apropriadas sejam mapeadas para elas.

    Code Snippet

    Este exemplo de código assume que arquivos shape foram carregados usando oIgxShapeDataSource. O código a seguir vinculaIgxGeographicPolylineSeriesComponent no componente de mapa aoIgxShapeDataSource e mapeia aPoints propriedade de todosIgxShapefileRecord os objetos.

    <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>
                Airline: {{item.name}}
                </span>
                <br />
                <span>
                Length: {{item.distance}} miles
                </span>
            </div>
</ng-template>

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

@Component({
  selector: "app-map-binding-shape-files",
  styleUrls: ["./map-binding-shape-files.component.scss"],
  templateUrl: "./map-binding-shape-files.component.html"
})
export class MapBindingShapefilePolylinesComponent implements AfterViewInit {

    @ViewChild ("map")
    public map: IgxGeographicMapComponent;

    @ViewChild("template")
    public tooltipTemplate: TemplateRef<object>;
    constructor() { }

    public ngAfterViewInit() {
    // loading a shapefile with geographic polygons
    const sds = new IgxShapeDataSource();
    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
    sds.shapefileSource = "assets/Shapes/WorldCableRoutes.shp";
    sds.databaseSource  = "assets/Shapes/WorldCableRoutes.dbf";
    sds.dataBind();
    }
    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
        const shapeRecords = sds.getPointData();
        const geoPolylines: any[] = [];
        // parsing shapefile data and creating geo-polygons
        for (const record of shapeRecords) {
            // using field/column names from .DBF file
            const route = {
                capacity: record.fieldValues["CapacityG"],
                distance: record.fieldValues["DistanceKM"],
                isActive: record.fieldValues["NotLive"] !== 0,
                isOverLand: record.fieldValues["OverLand"] === 0,
                name: record.fieldValues["Name"],
                points: record.points,
                service: record.fieldValues["InService"]
            };
            geoPolylines.push(route);
        }

        const geoSeries = new IgxGeographicPolylineSeriesComponent();
        geoSeries.dataSource = geoPolylines;
        geoSeries.shapeMemberPath = "points";
        geoSeries.shapeFilterResolution = 0.0;
        geoSeries.shapeStrokeThickness = 3;
        geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
        geoSeries.tooltipTemplate = this.tooltipTemplate;

        this.map.series.add(geoSeries);
        }
}

    API References