React Associando arquivos de forma com dados geoespaciais

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

    React Binding Shape Files with Geo-spatial Data Example

    A tabela a seguir explica as IgrShapeDataSource 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 IgrShapeDataSource 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 IgrShapeDataSource é preenchido com IgrShapefileRecord 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 IgrShapeDataSource 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.

    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

    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 IgrShapeDataSource é um exemplo desse array porque contém uma lista de IgrShapefileRecord objetos.

    A IgrShapefileRecord 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 IgrShapeDataSource. O código a seguir associa o componente map ao IgrShapeDataSource e mapeia IgrGeographicPolylineSeries a Points propriedade de todos os IgrShapefileRecord objetos.

    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