Angular Binding Shape Files with Geo-spatial Data

    El componente de Ignite UI for Angular mapa, laIgxShapeDataSource clase carga datos geoespaciales (puntos/ubicaciones, polilíneas, polígonos) de archivos de formas y los convierte en una colección deIgxShapefileRecord objetos.

    Angular Binding Shape Files with Geo-spatial Data Example

    La siguiente tabla explica las propiedades de laIgxShapeDataSource clase para cargar archivos shape.

    Propiedad Tipo Descripción
    shapefileSource cadena Especifica el Uri de un archivo de forma (.shp) que contiene elementos de datos geoespaciales.
    databaseSource cadena Especifica el Uri de un archivo de base de datos de formas (.dbf) que contiene una tabla de datos para elementos de datos geoespaciales.

    Cuando ambas propiedades de origen están configuradas como valores no nulos, se invoca elIgxShapeDataSource método ImportAsync del objeto, que a su vez realiza la obtención y lectura de los archivos de forma y finalmente la conversión. Una vez completada esta operación, seIgxShapeDataSource llena conIgxShapefileRecord objetos y se activa elImportCompleted evento para notificar sobre el proceso completado de carga y conversión de datos geoespaciales de archivos de forma.

    Loading Shapefiles

    El siguiente código crea una instancia delIgxShapeDataSource objeto para cargar un archivo de formas que contiene ubicaciones de las principales ciudades del mundo. También demuestra cómo manejar elImportCompleted evento como requisito previo para vincular datos al componente de mapa.

    Binding Shapefiles

    En el componente de mapas, las Series Geográficas se utilizan para mostrar datos geoespaciales que se cargan desde archivos de formas. Todos los tipos de Series Geográficas tienen unaItemsSource propiedad que puede vincularse a un array de objetos. ElIgxShapeDataSource es un ejemplo de este tipo de array porque contiene una lista deIgxShapefileRecord objetos.

    LaIgxShapefileRecord clase proporciona propiedades para almacenar datos geoespaciales, listadas en la siguiente tabla.

    Propiedad Descripción
    Points Contiene todos los puntos en una forma geoespacial cargada desde un archivo de forma (.shp). Por ejemplo, el país de Japón en un archivo de forma se representaría como una lista de un objeto de lista de puntos, donde:
    • La primera lista de puntos describe la forma de la isla de Hokkaido.
    • La segunda lista de puntos describe la forma de la isla Honshu.
    • La tercera lista de puntos describe la forma de la isla de Kyushu.
    • The fourth list of points describes shape of Shikoku island
    Fields Contiene una fila de datos del archivo de bases de datos de formas (.dbf) codificada por el nombre de una columna. Por ejemplo, un dato sobre el condado de Japón que incluye población, área, nombre de una capital, etc.

    Esta estructura de datos es adecuada para su uso en la mayoría de las series geográficas siempre que se les asigne las columnas de datos adecuadas.

    Code Snippet

    Este ejemplo de código asume que los archivos shape se cargaron usando elIgxShapeDataSource. El siguiente código vinculaIgxGeographicPolylineSeriesComponent en el componente de mapeo a yIgxShapeDataSource mapea laPoints propiedad de todosIgxShapefileRecord los 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