Web Components Vinculando modelos de dados geográficos

    O componente de mapa Ignite UI for Web Components foi projetado para exibir dados geoespaciais de arquivos de forma e/ou localizações geográficas de modelos de dados em mapas de imagens geográficas. A ItemsSource propriedade de série geográfica é usada com a finalidade de associação a modelos de dados. Essa propriedade pode ser associada a uma matriz de objetos personalizados.

    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 dosItemsSource 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 dosItemsSource 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 associar o IgcGeographicSymbolSeriesComponent 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 o para traçar o IgcGeographicPolylineSeriesComponent 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);
}

    API References