Web Components Vinculando modelos de dados 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

A tabela a seguir resumiu as estruturas de dados necessárias para cada tipo de série geográfica:

Séries Geográficas	Propriedades	Descrição
`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 nomes de 2 coordenadas numéricas de longitude e latitude e 1 coluna numérica para triangulação de valores
`IgcGeographicContourLineSeriesComponent`	`longitudeMemberPath`, `latitudeMemberPath`, `valueMemberPath`	Especifica nomes de 2 coordenadas numéricas de longitude e latitude e 1 coluna numérica para triangulação de valores
`IgcGeographicShapeSeriesComponent`	`shapeMemberPath`	Especifica o nome da coluna de dados dos`ItemsSource` itens que contém os pontos geográficos das formas. Essa propriedade deve ser mapeada para uma matriz de matrizes de objetos com propriedades x e y.
`IgcGeographicPolylineSeriesComponent`	`shapeMemberPath`	Especifica o nome da coluna de dados dos`ItemsSource` itens que contém as coordenadas geográficas das linhas. Essa propriedade deve ser mapeada para uma matriz de matrizes de objetos com propriedades x e y.

Code Snippet

O código a seguir mostra como vincular oIgcGeographicSymbolSeriesComponent a um modelo de dados personalizado que contém localizações geográficas de algumas cidades do mundo armazenadas usando coordenadas de longitude e latitude. Além disso, usamos oIgcGeographicPolylineSeriesComponent para traçar o caminho geográfico mais curto entre esses locais usando o 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 Vinculando modelos de dados geográficos

Web Components Binding Geographic Data Models Example

Code Snippet

API References