Angular Binding Shape Files with Geo-spatial Data

    O componente Ignite UI for Angular mapa, a IgxShapeDataSource classe carrega dados geoespaciais (pontos/locais, polilinhas, polígonos) de arquivos de forma e os converte em uma coleção de IgxShapefileRecord objetos.

    Angular Binding Shape Files with Geo-spatial Data Example

    A tabela a seguir explica as IgxShapeDataSource propriedades da classe para carregar arquivos de forma.

    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 de origem são definidas como valores não nulos, o IgxShapeDataSource método ImportAsync do objeto é invocado, que, por sua vez, executa a busca e a leitura dos arquivos de forma e, por fim, a conversão. Após a conclusão dessa operação, o IgxShapeDataSource é preenchido com IgxShapefileRecord objetos e o ImportCompleted evento é gerado para notificar sobre o processo concluído de carregamento e conversão de dados geoespaciais de arquivos de forma.

    Loading Shapefiles

    O código a seguir cria uma instância do IgxShapeDataSource objeto para carregar um arquivo de forma que contém locais das principais cidades do mundo. Ele também demonstra como manipular o ImportCompleted evento como um pré-requisito para vincular dados ao componente de mapa.

    Binding Shapefiles

    No componente de mapa, as Séries geográficas são usadas para exibir dados geoespaciais carregados de arquivos de forma. Todos os tipos de Séries Geográficas têm uma ItemsSource propriedade que pode ser associada a uma matriz de objetos. O IgxShapeDataSource é um exemplo desse array porque contém uma lista de IgxShapefileRecord objetos.

    A IgxShapefileRecord 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
    | | 'Campos' |Contém uma linha de dados do arquivo de banco de dados de forma (.dbf) chaveado por um nome de 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 pressupõe que os arquivos de forma foram carregados usando o IgxShapeDataSource. O código a seguir associa o componente map ao IgxShapeDataSource e mapeia IgxGeographicPolylineSeriesComponent a Points propriedade de todos os IgxShapefileRecord 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