Mapa de contorno geográfico Blazor
En el componente de mapa Blazor, puede utilizar IgbGeographicContourLineSeries
para dibujar líneas de contorno coloreadas, 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.
Blazor Geographic Contour Map Example
IgbGeographicContourLineSeries
funciona de manera muy similar a IgbGeographicScatterAreaSeries
excepto que representa datos como líneas de contorno, coloreadas usando una escala de relleno y la serie de área 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, IgbGeographicContourLineSeries
tiene la propiedad DataSource
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. IgbGeographicContourLineSeries
realiza automáticamente la triangulación de datos incorporada 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 IgbGeographicContourLineSeries
utilizadas para el enlace de datos.
Nombre de la propiedad | tipo de propiedad | Descripción |
---|---|---|
DataSource |
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 alDataSource . |
LatitudeMemberPath |
cadena | El nombre de la propiedad que contiene la latitud para todos los elementos vinculados alDataSource . |
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 IgbGeographicContourLineSeries
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 delIgbGeographicContourLineSeries |
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 IgbGeographicContourLineSeries
a datos de triangulación que representan las temperaturas de la superficie en el mundo.
@using IgniteUI.Blazor.Controls
<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
<IgbGeographicContourLineSeries LongitudeMemberPath="Lon"
LatitudeMemberPath="Lat"
ValueMemberPath="Value"
FillScale="@BrushScale"
DataSource="@Data"
Thickness="2">
</IgbGeographicContourLineSeries>
</IgbGeographicMap>
@code {
private List<Location> Data;
private ValueBrushScale BrushScale;
protected override void OnInitialized()
{
var brushes = "";
brushes += "rgba(32, 146, 252, 0.5) "; // semi-transparent blue
brushes += "rgba(14, 194, 14, 0.5) "; // semi-transparent green
brushes += "rgba(252, 120, 32, 0.5) "; // semi-transparent orange
brushes += "rgba(252, 32, 32, 0.5) "; // semi-transparent red
this.BrushScale = new ValueBrushScale();
this.BrushScale.Brushes = brushes;
this.BrushScale.MinimumValue = 0;
this.BrushScale.MaximumValue = 30;
this.Data = WorldTemperatures.Load();
}
}