Web Components Vinculación de modelos de datos geográficos

The Ignite UI for Web Components map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The ItemsSource property of geographic series is used for the purpose of binding to data models. This property can be bound an array of custom objects.

Web Components Binding Geographic Data Models Example

La siguiente tabla resume las estructuras de datos necesarias para cada tipo de serie geográfica:

Serie Geográfica	Propiedades	Descripción
`IgcGeographicSymbolSeriesComponent`	`longitudeMemberPath`, `latitudeMemberPath`	Specifies names of 2 numeric longitude and latitude coordinates
`IgcGeographicHighDensityScatterSeriesComponent`	`longitudeMemberPath`, `latitudeMemberPath`	Specifies names of 2 numeric longitude and latitude coordinates
`IgcGeographicProportionalSymbolSeriesComponent`	`longitudeMemberPath`, `latitudeMemberPath`, `radiusMemberPath`	Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols
`IgcGeographicScatterAreaSeriesComponent`	`longitudeMemberPath`, `latitudeMemberPath`, `colorMemberPath`	Especifica nombres de 2 coordenadas numéricas de longitud y latitud y 1 columna numérica para triangulación de valores.
`IgcGeographicContourLineSeriesComponent`	`longitudeMemberPath`, `latitudeMemberPath`, `valueMemberPath`	Especifica nombres de 2 coordenadas numéricas de longitud y latitud y 1 columna numérica para triangulación de valores.
`IgcGeographicShapeSeriesComponent`	`shapeMemberPath`	Especifica el nombre de la columna de datos de`ItemsSource` elementos que contienen los puntos geográficos de las formas. Esta propiedad debe asignarse a una matriz de matrices de objetos con propiedades xey.
`IgcGeographicPolylineSeriesComponent`	`shapeMemberPath`	Especifica el nombre de la columna de datos de`ItemsSource` elementos que contienen las coordenadas geográficas de las líneas. Esta propiedad debe asignarse a una matriz de matrices de objetos con propiedades xey.

Code Snippet

El siguiente código muestra cómo vincular aIgcGeographicSymbolSeriesComponent un modelo de datos personalizado que contiene ubicaciones geográficas de algunas ciudades del mundo almacenadas usando coordenadas de longitud y latitud. Además, utilizamos elIgcGeographicPolylineSeriesComponent para trazar la ruta geográfica más corta entre estas ubicaciones usando WorldUtility

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

</igc-geographic-map>

public flights: any[];

constructor() {
    super();

    const cityDAL = { lat:  32.763, lon: -96.663, country: "US", name: "Dallas" };
    const citySYD = { lat: -33.889, lon: 151.028, country: "Australia", name: "Sydney" };
    const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name: "Auckland" };
    const cityQTR = { lat: 25.285, lon:  51.531,  country: "Qatar", name: "Doha" };
    const cityPAN = { lat:  8.949, lon: -79.400,  country: "Panama", name: "Panama" };
    const cityCHL = { lat: -33.475, lon: -70.647, country: "Chile", name: "Santiago" };
    const cityJAP = { lat:  35.683, lon: 139.809, country: "Japan", name: "Tokyo" };
    const cityALT = { lat: 33.795,  lon: -84.349, country: "US", name: "Atlanta" };
    const cityJOH = { lat: -26.178, lon: 28.004,  country: "South Africa", name: "Johannesburg" };
    const cityNYC = { lat: 40.750, lon: -74.0999, country: "US", name: "New York" };
    const citySNG = { lat:  1.229, lon: 104.177,  country: "Singapore", name: "Singapore" };
    const cityMOS = { lat: 55.750, lon:  37.700,  country: "Russia", name: "Moscow" };
    const cityROM = { lat:  41.880, lon: 12.520,  country: "Italy", name: "Roma" };
    const cityLAX = { lat: 34.000, lon: -118.25,  country: "US", name: "Los Angeles" };

    this.flights = [
        { origin: cityDAL, dest: citySNG, color: "Green" },
        { origin: cityMOS, dest: cityNZL, color: "Red" },
        { origin: cityCHL, dest: cityJAP, color: "Blue" },
        { origin: cityPAN, dest: cityROM, color: "Orange" },
        { origin: cityALT, dest: cityJOH, color: "Black" },
        { origin: cityNYC, dest: cityQTR, color: "Purple" },
        { origin: cityLAX, dest: citySYD, color: "Gray" },
    ];
}

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

    for (const flight of this.flights) {
        this.createPolylineSeries(flight);
        this.createSymbolSeries(flight);
    }
}

createSymbolSeries(flight: any)
{
    const geoLocations = [flight.origin, flight.dest ];
    const symbolSeries = new IgcGeographicSymbolSeriesComponent();
    symbolSeries.dataSource = geoLocations;
    symbolSeries.markerType = MarkerType.Circle;
    symbolSeries.latitudeMemberPath = "lat";
    symbolSeries.longitudeMemberPath = "lon";
    symbolSeries.markerBrush  = "White";
    symbolSeries.markerOutline = flight.color;
    symbolSeries.thickness = 1;
    this.geoMap.series.add(symbolSeries);
}

createPolylineSeries(flight: any)
{
    const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest);
    const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest);

    const geoRoutes = [
        { points: geoPath ,
          origin: flight.origin,
          dest: flight.dest,
          distance: geoDistance,
          time: geoDistance / 850,
    }];

    const lineSeries = new IgcGeographicPolylineSeriesComponent();
    lineSeries.dataSource = geoRoutes;
    lineSeries.shapeMemberPath = "points";
    lineSeries.shapeStrokeThickness = 9;
    lineSeries.shapeOpacity = 0.5;
    lineSeries.shapeStroke = flight.color;

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

Web Components Vinculación de modelos de datos geográficos

Web Components Binding Geographic Data Models Example

Code Snippet

API References