Angular Binding Multiple Data Sources

    En el mapa Ignite UI for Angular, puede agregar varios objetos de serie geográfica para superponer fuentes de datos personalizadas con datos geoespaciales. Por ejemplo, IgxGeographicSymbolSeriesComponent para trazar ubicaciones geográficas de aeropuertos, para IgxGeographicPolylineSeriesComponent trazar vuelos entre aeropuertos, y 2º IgxGeographicPolylineSeriesComponent para trazar líneas de cuadrícula de coordenadas geográficas principales.

    Ejemplo de vinculación Angular de múltiples fuentes de datos

    EXAMPLE
    WorldConnections.ts
    WorldLocations.ts
    WorldUtility.ts
    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 que trazarán los siguientes datos geoespaciales:

    Puede utilizar series geográficas en esta u otras combinaciones para trazar los datos deseados.

    Creando fuentes de datos

    Cree fuentes de datos para todas las series geográficas que desee mostrar en el mapa Ignite UI for Angular. Por ejemplo, puede usar el script WorldConnections.

    <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" #polylineTooltipTemplate>
            <div>
                <span>
                Arrival: {{item.origin.country}}
                </span>
                <br/>
                <span>
                Destination: {{item.dest.country}}
                </span>
                <br/>
                <span>
                Distance: {{item.distance}} miles
                </span>
            </div>
        </ng-template>
    
        <ng-template let-series="series" let-item="item" #pointTooltipTemplate>
                <div>
                    <span>
                    {{item?.country}}
                    </span>
                    <br />
                    <span>
                    {{item?.name}}
                    </span>
                    <br />
                    <span>
                    Population: {{item.pop}} M
                    </span>
                    <br/>
                    <span>
                    Flights: {{item.flights}}
                    </span>
                </div>
            </ng-template>
    html

    Vuelos superpuestos

    Cree el primer IgxGeographicPolylineSeriesComponent objeto con conexiones de vuelo entre los principales aeropuertos y agréguelo a la colección Series del mapa Ignite UI for Angular.

    <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>
    html

    Superposición de líneas de cuadrícula

    Cree un segundo IgxGeographicPolylineSeriesComponent objeto con líneas de cuadrícula geográficas y agréguelo a la colección Series del mapa Ignite UI for Angular.

      <igx-geographic-polyline-series  #polylineSeries
                [tooltipTemplate]="polylineTooltipTemplate"
                     datasource = worldFlights
                     name="polylineSeries"
                     shapeMemberPath="points"
                     shapeStroke="rgba(196, 14, 14,0.05)"
                     thickness={3.0} >
        </igx-geographic-polyline-series>
    html
    App Builder | CTA Banner

    Aeropuertos superpuestos

    Cree IgxGeographicSymbolSeriesComponent un objeto con puntos de aeropuerto y agréguelo a la colección Series del mapa de Ignite UI for Angular geográfica.

    <igx-geographic-symbol-series  #symbolSeries
        name="symbolSeries"
        longitudeMemberPath="longitude"
        latitudeMemberPath="latitude"
        markerType="Circle"
        markerOutline="rgb(73, 73, 73)"
        markerBrush="White" >
    </igx-geographic-symbol-series>
    html

    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 { MarkerType } from 'igniteui-angular-charts';
    import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
    import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps";
    import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps";
    import { WorldConnections } from "../../utilities/WorldConnections";
    
    @Component({
      selector: "app-map-binding-multiple-data-sources",
      styleUrls: ["./map-binding-multiple-data-sources.component.scss"],
      templateUrl: "./map-binding-multiple--data-sources.component.html"
    })
    
    export class MapBindingMultipleSourcesComponent implements AfterViewInit {
    
        @ViewChild ("map")
        public map: IgxGeographicMapComponent;
    
        @ViewChild("polylineTooltipTemplate")
        public polylineTooltipTemplate: TemplateRef<object>;
    
        @ViewChild("pointTooltipTemplate")
        public pointTooltipTemplate: TemplateRef<object>;
    
        public data: any;
        constructor() {
        }
    
        public ngAfterViewInit(): void {
          this.map.windowRect = { left: 0.195, top: 0.1, width: 0.5, height: 0.5 };
    
          const worldFlights = WorldConnections.getFlights();
          const worldAirports = WorldConnections.getAirports();
          const worldGridlines = WorldConnections.getGridlines();
    
          this.addPolylineSeriesWith(worldFlights);
          this.addGridlineSeriesWith(worldGridlines);
          this.addSymbolSeriesWith(worldAirports);
        }
    
        public addGridlineSeriesWith(data: any[]) {
            const gridSeries = new IgxGeographicPolylineSeriesComponent();
            gridSeries.dataSource = data;
            gridSeries.shapeMemberPath = "points";
            gridSeries.shapeStroke = "Gray";
            gridSeries.shapeStrokeThickness = 1;
            this.map.series.add(gridSeries);
        }
    
        public addPolylineSeriesWith(data: any[]) {
            const lineSeries = new IgxGeographicPolylineSeriesComponent ();
            lineSeries.dataSource = data;
            lineSeries.shapeMemberPath = "points";
            lineSeries.shapeStroke = "rgba(196, 14, 14,0.05)";
            lineSeries.shapeStrokeThickness = 4;
            lineSeries.tooltipTemplate = this.polylineTooltipTemplate;
            this.map.series.add(lineSeries);
        }
    
        public addSymbolSeriesWith(data: any[]) {
            const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
            symbolSeries.dataSource = data;
            symbolSeries.markerType = MarkerType.Circle;
            symbolSeries.latitudeMemberPath = "lat";
            symbolSeries.longitudeMemberPath = "lon";
            symbolSeries.markerBrush = "#aad3df";
            symbolSeries.markerOutline = "rgb(73, 73, 73)";
            symbolSeries.thickness = 1;
            symbolSeries.tooltipTemplate = this.pointTooltipTemplate;
            this.map.series.add(symbolSeries);
        }
    }
    ts

    Referencias de API