React Associando arquivos de forma com dados geoespaciais

    The Ignite UI for React map component, the IgrShapeDataSource class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of IgrShapefileRecord objects.

    React Binding Shape Files with Geo-spatial Data Example

    The following table explains properties of the IgrShapeDataSource class for loading shape files.

    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.

    When both source properties are set to non-null values, then the IgrShapeDataSource object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the IgrShapeDataSource is populated with IgrShapefileRecord objects and the ImportCompleted event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files.

    Loading Shapefiles

    The following code creates an instance of the IgrShapeDataSource object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the ImportCompleted event as a prerequisite for binding data to the map component.

    import { IgrShapeDataSource } from 'igniteui-react-core';
// ...

const sds = new IgrShapeDataSource();
sds.importCompleted = this.onShapePolylinesLoaded;
sds.shapefileSource = url + "/shapes/WorldCableRoutes.shp";
sds.databaseSource  = url + "/shapes/WorldCableRoutes.dbf";
sds.dataBind();

    Binding Shapefiles

    In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an ItemsSource property which can be bound to an array of objects. The IgrShapeDataSource is an example such array because it contains a list of IgrShapefileRecord objects.

    The IgrShapefileRecord class provides properties for storing geo-spatial data, listed in the following table.

    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

    This code example assumes that shape files were loaded using the IgrShapeDataSource. The following code binds IgrGeographicPolylineSeries in the map component to the IgrShapeDataSource and maps the Points property of all IgrShapefileRecord objects.

    import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
// ...

public onShapePolylinesLoaded(sds: IgrShapeDataSource, e: any) {
    const geoPolylines: any[] = [];
    for (const record of sds.getPointData()) {
            // using field/column names from .DBF file
            const route = {
                points: record.points,
                name: record.fieldValues["Name"],
                capacity: record.fieldValues["CapacityG"],
                distance: record.fieldValues["DistanceKM"],
                isOverLand: record.fieldValues["OverLand"] === 0,
                isActive: record.fieldValues["NotLive"] !== 0,
                service: record.fieldValues["InService"]
            };
            geoPolylines.push(route);
        }

    const geoSeries = new IgrGeographicPolylineSeries( { name: "series" });
    geoSeries.dataSource = geoPolylines;
    geoSeries.shapeMemberPath = "points";
    geoSeries.shapeFilterResolution = 0.0;
    geoSeries.shapeStrokeThickness = 3;
    geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
    geoSeries.tooltipTemplate = this.createTooltip;
    this.geoMap.series.add(symbolSeries);
}

    API References