Web Components Associando arquivos de forma com dados geoespaciais

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

    Web Components Binding Shape Files with Geo-spatial Data Example

    A tabela a seguir explica as IgcShapeDataSource 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 IgcShapeDataSource 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 IgcShapeDataSource é preenchido com IgcShapefileRecord 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 IgcShapeDataSource 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 IgcShapeDataSource é um exemplo desse array porque contém uma lista de IgcShapefileRecord objetos.

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

    <igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>

    connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;

    const sds = new IgcShapeDataSource();
    sds.importCompleted = this.onDataLoaded;
    sds.shapefileSource = "../shapes/WorldCities.shp";
    sds.databaseSource  = "../shapes/WorldCities.dbf";
    sds.dataBind();
}

onDataLoaded(sds: IgcShapeDataSource, e: any) {
    const shapeRecords = sds.getPointData();
    console.log("loaded WorldCities.shp " + shapeRecords.length);
    const geoLocations: any[] = [];
    // parsing shapefile data and creating geo-locations
    for (const record of shapeRecords) {
        const pop = record.fieldValues.POPULATION;
        if (pop > 0) {
            // each shapefile record has just one point
            const location = {
                latitude: record.points[0][0].y,
                longitude: record.points[0][0].x,
                city: record.fieldValues.NAME,
                population: pop
            };
            geoLocations.push(location);
        }
    }

    const geoSeries = new IgcGeographicSymbolSeriesComponent();
    geoSeries.dataSource = geoLocations;
    geoSeries.markerType = MarkerType.Circle;
    geoSeries.latitudeMemberPath  = "latitude";
    geoSeries.longitudeMemberPath = "longitude";
    geoSeries.markerBrush = "LightGray";
    geoSeries.markerOutline = "Black";
    geoSeries.tooltipTemplate = this.createTooltip;

    this.geoMap.series.add(geoSeries);
}

    API References