Angular Binding and Overlaying Multiple Shape Files

    En el mapa Ignite UI for Angular, puede agregar varios objetos de series geográficas para superponer algunos shapefiles con datos geoespaciales. Por ejemplo, IgxGeographicSymbolSeriesComponent para trazar ubicaciones geográficas de puertos, para IgxGeographicPolylineSeriesComponent trazar rutas entre puertos y para IgxGeographicShapeSeriesComponent trazar formas de países.

    Angular Ejemplo de enlace y superposición de varios archivos de forma

    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.

    Este tema lo lleva paso a paso para mostrar múltiples series geográficas en el componente de mapa. Todas las series geográficas se trazan siguiendo datos geoespaciales cargados desde archivos de formas utilizando la clase IgxShapeDataSource. Consulte el tema Vincular archivos de formas para obtener más información sobre el objeto IgxShapeDataSource.

    Puede utilizar las series geográficas anteriores u otras combinaciones para trazar los datos deseados.

    Importación de componentes

    Primero, importemos los componentes y módulos necesarios:

    import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
    import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
    import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
    import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
    import { IgxShapeDataSource } from 'igniteui-angular-core';
    ts

    Creando series

    A continuación, necesitamos crear un mapa con algunas series geográficas que luego cargarán diferentes tipos de archivos de forma.

    <div className="sampleRoot">
        <div className="map" >
            <igx-geographic-map
                #map
                width="700px"
                height="500px"
                zoomable="true" >
                <igx-geographic-shape-series #shapeSeries
                    name="polygonSeries"
                    shapeMemberPath="points"
                    shapeFill="rgb(150, 150, 150)"
                    shapeStroke="Black"
                    shapeStrokeThickness={1.0} >
                </igx-geographic-shape-series>
                <igx-geographic-polyline-series  #polylineSeries
                [tooltipTemplate]="polylineTooltipTemplate"
                      name="polylineSeries"
                     shapeMemberPath="points"
                     shapeStroke="rgba(147, 15, 180, 0.5)"
                     thickness={3.0} >
                </igx-geographic-polyline-series>
                <igx-geographic-symbol-series  #symbolSeries
                    name="symbolSeries"
                    longitudeMemberPath="longitude"
                    latitudeMemberPath="latitude"
                    markerType="Circle"
                    markerOutline="rgb(2, 102, 196)"
                    markerBrush="White" >
                </igx-geographic-symbol-series>
            </igx-geographic-map>
        </div>
    </div>
    
    <ng-template let-series="series" let-item="item" #polylineTooltipTemplate>
            <div>
                <span>{{item.capacity}}</span><br />
                <span>Distance: {{item.distance}}</span>
            </div>
        </ng-template>
    
        <ng-template let-series="series" let-item="item" #shapeTooltipTemplate>
            <div>
                <span>{{item.name}}</span><br />
                <span>Population: {{item.population}}</span>
            </div>
        </ng-template>
    
        <ng-template let-series="series" let-item="item" #pointTooltipTemplate>
            <div>
                <span [style.color]="series.brush">City: {{item.city}}</span>
            </div>
        </ng-template>
    html

    Cargando archivos de forma

    A continuación, en el constructor de su página, agregue un IgxShapeDataSource para cada archivo de forma que desee mostrar en el componente del mapa geográfico.

    const sdsPolygons = new IgxShapeDataSource();
    sdsPolygons.importCompleted = this.onPolygonsLoaded;
    sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
    sdsPolygons.databaseSource  = url + "/shapes/WorldCountries.dbf";
    sdsPolygons.dataBind();
    const sdsPolylines = new IgxShapeDataSource();
    sdsPolylines.importCompleted = this.onPolylinesLoaded;
    sdsPolylines.shapefileSource = url + "/shapes/WorldConnections.shp";
    sdsPolylines.databaseSource  = url + "/shapes/WorldConnections.dbf";
    sdsPolylines.dataBind();
    const sdsLocations = new IgxShapeDataSource();
    sdsLocations.importCompleted = this.onPointsLoaded;
    sdsLocations.shapefileSource = url + "/Shapes/WorldCities.shp";
    sdsLocations.databaseSource  = url + "/Shapes/WorldCities.dbf";
    sdsLocations.dataBind();
    ts
    App Builder | CTA Banner

    Procesamiento de polígonos

    Procese los datos de formas cargados en IgxShapeDataSource con países del mundo y asígnelos al objeto IgxGeographicShapeSeriesComponent.

    import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
    import { IgxShapeDataSource } from 'igniteui-angular-core';
    // ...
    public onPolygonsLoaded(sds: IgxShapeDataSource, e: any) {
        const geoPolygons: any[] = [];
        // parsing shapefile data and creating geo-polygons
        let pointData = sds.getPointData();
        for ( let i = 0; i < pointData.length; i++ ) {
            let record = pointData[i];
            // using field/column names from .DBF file
            const country = {
                points: record.points,
                name: record.fieldValues.NAME,
                gdp: record.fieldValues.GDP,
                population: record.fieldValues.POPULATION
            };
            geoPolygons.push(country);
        };
    
        const shapeSeries = this.geoMap.series[0] as IgxGeographicShapeSeries;
        shapeSeries.dataSource = geoPolygons;
    }
    ts

    Procesamiento de polilínea

    Procese los datos de formas cargados en IgxShapeDataSource con rutas de comunicación entre las principales ciudades y asígnelos al objeto IgxGeographicPolylineSeriesComponent.

    import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
    import { IgxShapeDataSource } from 'igniteui-angular-core';
    // ...
    public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) {
        const geoPolylines: any[] = [];
        // parsing shapefile data and creating geo-polygons
        let pointData = sds.getPointData();
        for ( let i = 0; i < pointData.length; i++ ) {
            let record = pointData[i];
            // 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 lineSeries = this.geoMap.series[1] as IgxGeographicPolylineSeries;
        lineSeries.dataSource = geoPolylines;
    }
    ts

    Puntos de procesamiento

    Procese los datos de formas cargados en IgxShapeDataSource con ubicaciones de las principales ciudades y asígnelos al objeto IgxGeographicSymbolSeriesComponent.

    import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
    import { IgxShapeDataSource } from 'igniteui-angular-core';
    // ...
    public onPointsLoaded(sds: IgxShapeDataSource, e: any) {
        const geoLocations: any[] = [];
        // parsing shapefile data and creating geo-locations
        let pointData = sds.getPointData();
        for ( let i = 0; i < pointData.length; i++ ) {
            let record = pointData[i];
            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 symbolSeries = this.geoMap.series[2] as IgxGeographicSymbolSeries;
        symbolSeries.dataSource = geoLocations;
    }
    ts

    Fondo del mapa

    Además, es posible que desee ocultar imágenes geográficas del contenido de fondo del mapa si sus archivos de forma proporcionaron suficiente contexto geográfico (por ejemplo, forma de países) para su aplicación.

    public geoMap: IgxGeographicMapComponent;
    // ...
    
    this.geoMap.backgroundContent = {};
    ts

    Resumen

    Para su comodidad, todos los fragmentos de código anteriores se combinan en un bloque de código a continuación que puede copiar fácilmente a su proyecto.

    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";
    import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
    import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
    
    @Component({
      selector: "app-map-binding-multiple-shapes-files",
      styleUrls: ["./map-binding-multiple-shapes-files.component.scss"],
      templateUrl: "./map-binding-multiple-shapes-files.component.html"
    })
    
    export class MapBindingMultipleShapesComponent implements AfterViewInit {
    
        @ViewChild ("map")
        public map: IgxGeographicMapComponent;
    
        @ViewChild ("shapeSeries")
        public shapeSeries: IgxGeographicShapeSeriesComponent;
    
        @ViewChild ("polylineSeries")
        public polylineSeries: IgxGeographicPolylineSeriesComponent;
    
        @ViewChild ("symbolSeries")
        public symbolSeries: IgxGeographicSymbolSeriesComponent;
    
        @ViewChild("polylineTooltipTemplate")
        public polylineTooltipTemplate: TemplateRef<object>;
    
        @ViewChild("shapeTooltipTemplate")
        public shapeTooltipTemplate: TemplateRef<object>;
    
        @ViewChild("pointTooltipTemplate")
        public pointTooltipTemplate: TemplateRef<object>;
    
        constructor() {
        }
    
        public ngAfterViewInit(): void {
    
            this.map.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
    
            // loading a shapefile with geographic polygons
            const sdsPolygons = new IgxShapeDataSource();
            sdsPolygons.importCompleted.subscribe(() => this.onPolygonsLoaded(sdsPolygons, ""));
            sdsPolygons.shapefileSource = "assets/Shapes/WorldCountries.shp";
            sdsPolygons.databaseSource  = "assets/Shapes/WorldCountries.dbf";
            sdsPolygons.dataBind();
            // loading a shapefile with geographic polylines at runtime.
            const sdsPolylines = new IgxShapeDataSource();
            sdsPolylines.shapefileSource = "assets/Shapes/WorldCableRoutes.shp";
            sdsPolylines.databaseSource  = "assets/Shapes/WorldCableRoutes.dbf";
            sdsPolylines.dataBind();
            sdsPolylines.importCompleted.subscribe(() => this.onPolylinesLoaded(sdsPolylines, ""));
    
            // loading a shapefile with geographic points
            const sdsPoints = new IgxShapeDataSource();
            sdsPoints.importCompleted.subscribe(() => this.onPointsLoaded(sdsPoints, ""));
            sdsPoints.shapefileSource = "assets/Shapes/WorldCities.shp";
            sdsPoints.databaseSource  = "assets/Shapes/WorldCities.dbf";
            sdsPoints.dataBind();
        }
    
        public onPointsLoaded(sds: IgxShapeDataSource, e: any) {
            const geoLocations: any[] = [];
            // parsing shapefile data and creating geo-locations
            for (const record of sds.getPointData()) {
                const pop = record.fieldValues["POPULATION"];
                if (pop > 0) {
                    // each shapefile record has just one point
                    const location = {
                        city: record.fieldValues["NAME"],
                        latitude: record.points[0][0].y,
                        longitude: record.points[0][0].x,
                        population: pop
                    };
                    geoLocations.push(location);
                }
            }
            this.symbolSeries.dataSource = geoLocations;
            this.symbolSeries.tooltipTemplate = this.pointTooltipTemplate;
        }
    
        public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) {
            const geoPolylines: any[] = [];
            // parsing shapefile data and creating geo-polygons
            for (const record of sds.getPointData()) {
                // 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);
            }
            this.polylineSeries.dataSource = geoPolylines;
            this.polylineSeries.shapeMemberPath = "points";
            this.polylineSeries.shapeFilterResolution = 2.0;
            this.polylineSeries.shapeStrokeThickness = 2;
            this.polylineSeries.shapeStroke = "rgba(252, 32, 32, 0.9)";
            this.polylineSeries.tooltipTemplate = this.polylineTooltipTemplate;
        }
    
        public onPolygonsLoaded(sds: IgxShapeDataSource, e: any) {
            const geoPolygons: any[] = [];
            // parsing shapefile data and creating geo-polygons
            sds.getPointData().forEach((record) => {
                // using field/column names from .DBF file
                const country = {
                    gdp: record.fieldValues["GDP"],
                    name: record.fieldValues["NAME"],
                    points: record.points,
                    population: record.fieldValues["POPULATION"]
                };
                geoPolygons.push(country);
            });
            this.shapeSeries.dataSource = geoPolygons;
            this.shapeSeries.tooltipTemplate = this.shapeTooltipTemplate;
        }
    }
    ts

    Referencias de API