Mapa de contorno geográfico Web Components

    En el componente de mapa Web Components, puede utilizar IgcGeographicContourLineSeriesComponent para dibujar líneas de contorno de colores, en un contexto geográfico, basándose en una triangulación de datos de longitud y latitud con un valor numérico asignado a cada punto. Este tipo de serie geográfica es útil para representar datos dispersos definidos por ubicaciones geográficas como temperatura climática, presión atmosférica, precipitación, distribución de la población, datos topográficos, etc.

    Web Components Geographic Contour Map Example

    ​IgcGeographicContourLineSeriesComponent funciona de manera muy similar a IgcGeographicScatterAreaSeriesComponent excepto que representa datos como líneas de contorno, coloreadas usando una escala de relleno y la serie de áreas de dispersión geográfica, representa datos como una superficie interpolada usando una escala de color.

    Data Requirements

    Al igual que otros tipos de series geográficas en el componente de mapa, IgcGeographicContourLineSeriesComponent tiene la propiedad ItemsSource que se puede vincular a una matriz de objetos. Además, cada elemento en el origen de elementos debe tener tres columnas de datos, dos que almacenan la ubicación geográfica (coordenadas de longitud y latitud) y una columna de datos que almacena un valor asociado con la ubicación geográfica. Estas columnas de datos se identifican mediante las propiedades longitudeMemberPath, latitudeMemberPath y valueMemberPath de la serie geográfica. IgcGeographicContourLineSeriesComponent realiza automáticamente una triangulación de datos integrada en elementos en ItemsSource si no se establece ninguna triangulación en la propiedad trianglesSource. Sin embargo, calcular la triangulación puede ser un proceso que consume mucho tiempo, por lo que el rendimiento en tiempo de ejecución será mejor al especificar un TriangulationSource para esta propiedad, especialmente cuando hay una gran cantidad de elementos de datos presentes.

    Data Binding

    La siguiente tabla resume las propiedades de IgcGeographicContourLineSeriesComponent utilizado para el enlace de datos.

    Nombre de la propiedad tipo de propiedad Descripción
    ItemsSource cualquier La fuente de elementos de datos sobre los que realizar la triangulación si eltrianglesSource La propiedad no proporciona datos de triangulación.
    longitudeMemberPath cadena El nombre de la propiedad que contiene la longitud de todos los elementos vinculados alItemsSource.
    latitudeMemberPath cadena El nombre de la propiedad que contiene la latitud para todos los elementos vinculados alItemsSource.
    valueMemberPath cadena El nombre de la propiedad que contiene un valor en las coordenadas de latitud y longitud de cada elemento de datos. Este valor numérico se convertirá a un color cuando elfillScale La propiedad está establecida.
    trianglesSource cualquier Obtiene o establece el origen de los datos de triangulación. Establecer Triángulos del objeto TriangulationSource en esta propiedad mejora tanto el rendimiento en tiempo de ejecución como la representación de series geográficas.
    triangleVertexMemberPath1 cadena El nombre de la propiedad de los elementos TrianglesSource que, para cada triángulo, contiene el índice del primer punto de vértice en ItemsSource. No es obligatorio establecer esta propiedad. Se toma de forma predeterminada a menos que se proporcione una lógica de triangulación personalizada.
    triangleVertexMemberPath2 cadena El nombre de la propiedad de los elementos TrianglesSource que, para cada triángulo, contiene el índice del primer punto de vértice en ItemsSource. No es obligatorio establecer esta propiedad. Se toma de forma predeterminada a menos que se proporcione una lógica de triangulación personalizada.
    triangleVertexMemberPath3 cadena El nombre de la propiedad de los elementos TrianglesSource que, para cada triángulo, contiene el índice del primer punto de vértice en ItemsSource. No es obligatorio establecer esta propiedad. Se toma de forma predeterminada a menos que se proporcione una lógica de triangulación personalizada.

    Contour Fill Scale

    Utilice la propiedad fillScale de IgcGeographicContourLineSeriesComponent para resolver los pinceles de relleno de las líneas de contorno de la serie geográfica. La clase `ValueBrushScale proporcionada debería satisfacer la mayoría de sus necesidades de coloración, pero la aplicación para la lógica de coloración personalizada puede heredar la clase ValueBrushScale. La siguiente tabla enumera las propiedades de CustomPaletteColorScale que afectan la coloración de la superficie de GeographicContourLineSeries.

    Nombre de la propiedad tipo de propiedad Descripción
    brushes Colección de pinceles Obtiene o establece la colección de pinceles para rellenar los contornos delIgcGeographicContourLineSeriesComponent
    maximumValue doble El valor más alto para asignar un pincel en una escala de relleno.
    minimumValue doble El valor más bajo para asignar un pincel en una escala de relleno.

    Code Snippet

    El siguiente código muestra cómo vincular el IgcGeographicContourLineSeriesComponent a datos de triangulación que representan las temperaturas de la superficie en el mundo.

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

</igc-geographic-map>

    import { IgcGeographicContourLineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcValueBrushScaleComponent } from 'igniteui-webcomponents-charts';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
//...
connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;

    const sfc = new IgcShapeDataSource();
    sfc.importCompleted = this.onDataLoaded;
    sfc.shapefileSource = "../shapes/WorldTemperatures.shp");
    sfc.databaseSource = "../shapes/WorldTemperatures.dbf");
}

onDataLoaded(sds: IgcShapeDataSource, e: any) {
    const shapeRecords = sds.getPointData();
    const contourPoints: any[] = [];
    for (const record of shapeRecords) {
        const temp = record.fieldValues.Contour;
        // using only major contours (every 10th degrees Celsius)
        if (temp % 10 === 0 && temp >= 0) {
            for (const shapes of record.points) {
                for (let i = 0; i < shapes.count; i++) {
                    if (i % 5 === 0) {
                        const point = shapes[i];
                        const item = { lon: point.x, lat: point.y, value: temp };
                        contourPoints.push(item);
                    }
                }
            }
        }
    }
    this.createContourSeries(contourPoints);
}

createContourSeries(data: any[])
{
    const brushes = [
        "rgba(32, 146, 252, 0.5)", // semi-transparent blue
        "rgba(14, 194, 14, 0.5)",  // semi-transparent green
        "rgba(252, 120, 32, 0.5)", // semi-transparent orange
        "rgba(252, 32, 32, 0.5)",  // semi-transparent red
    ];

    const brushScale = new IgcValueBrushScaleComponent();
    brushScale.brushes = brushes;
    brushScale.minimumValue = 0;
    brushScale.maximumValue = 30;

    const contourSeries = new IgcGeographicContourLineSeriesComponent();
    contourSeries.dataSource = data;
    contourSeries.longitudeMemberPath = "lon";
    contourSeries.latitudeMemberPath = "lat";
    contourSeries.valueMemberPath = "value";
    contourSeries.fillScale = brushScale;
    contourSeries.thickness = 4;

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

    API References