Angular Binding Shape Files with Geo-spatial Data

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

    Ejemplo de vinculación Angular de archivos de formas con datos geoespaciales

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    La siguiente tabla explica las propiedades de la clase IgxShapeDataSource para cargar archivos de formas.

    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 se establecen en valores no nulos, se invoca el método ImportAsync del objeto IgxShapeDataSource, que a cambio recupera y lee los archivos de formas y finalmente realiza la conversión. Una vez completada esta operación, IgxShapeDataSource se completa con objetos IgxShapefileRecord y se genera el evento ImportCompleted para notificar sobre el proceso completado de carga y conversión de datos geoespaciales de archivos de formas.

    Cargando archivos de forma

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

    Archivos de forma vinculantes

    En el componente de mapa, 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 una propiedad ItemsSource que se puede vincular a una serie de objetos. IgxShapeDataSource es un ejemplo de este tipo de matriz porque contiene una lista de objetos IgxShapefileRecord.

    La clase IgxShapefileRecord proporciona propiedades para almacenar datos geoespaciales, que se enumeran 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
    | | `Campos` | Contiene una fila de datos del archivo de base de datos de formas (.dbf) codificados por un nombre de columna. Por ejemplo, datos sobre el condado de Japón que incluye población, área, nombre de la 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.

    Fragmento de código

    Este ejemplo de código supone que los archivos de formas se cargaron utilizando IgxShapeDataSource. El siguiente código vincula IgxGeographicPolylineSeriesComponent en el componente de mapa a IgxShapeDataSource y asigna la propiedad Points de todos los objetos IgxShapefileRecord.

    <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>
    html
    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);
            }
    }
    ts
    App Builder | CTA Banner

    Referencias de API