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

    El componente de mapa Ignite UI for Web Components está diseñado para mostrar datos geoespaciales de archivos de formas y/o ubicaciones geográficas de modelos de datos en mapas de imágenes geográficas. La ItemsSource propiedad de serie geográfica se utiliza con el fin de enlazar a modelos de datos. Esta propiedad se puede enlazar a una matriz de objetos personalizados.

    Web Components Ejemplo de modelos de datos geográficos de enlace

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    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 deItemsSource 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 deItemsSource 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.

    Fragmento de código

    El siguiente código muestra cómo vincular IgcGeographicSymbolSeriesComponent a 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 el IgcGeographicPolylineSeriesComponent para trazar la ruta geográfica más corta entre estas ubicaciones utilizando WorldUtility.

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

</igc-geographic-map>
html
    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);
}
ts
    Ignite UI for Web Components | CTA Banner

    Referencias de API