Mapa de área geográfica Angular
En el componente de mapa Angular, puede usar IgxGeographicScatterAreaSeriesComponent
para dibujar una superficie coloreada, en un contexto geográfico, basada 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 la temperatura del tiempo, las precipitaciones, la distribución de la población, la contaminación del aire, etc.
Angular Geographic Area Map Example
IgxGeographicScatterAreaSeriesComponent
funciona de manera muy similar a IgxGeographicContourLineSeriesComponent
excepto que representa datos como superficies interpoladas y coloreadas en lugar de líneas de contorno que conectan puntos de datos con los mismos valores.
Data Requirements
Al igual que otros tipos de series geográficas en el componente de mapa, IgxGeographicScatterAreaSeriesComponent
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 coordenadas geográficas de longitud y latitud y una columna de datos que almacena un valor asociado con la ubicación geográfica. Las propiedades longitudeMemberPath
, latitudeMemberPath
y colorMemberPath
de la serie geográfica identifican esta columna de datos. IgxGeographicScatterAreaSeriesComponent
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 requiere 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 GeographicScatterAreaSeries utilizadas 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 . |
colorMemberPath |
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 elcolorScale La propiedad está establecida. |
trianglesSource |
cualquier | La fuente de datos de triangulación. Estableciendo triángulos de laTriangulationSource Oponerse a 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 deltrianglesSource elementos que, para cada triángulo, contienen 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 deltrianglesSource elementos que, para cada triángulo, contienen 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 deltrianglesSource elementos que, para cada triángulo, contienen 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. |
Color Scale
Utilice la propiedad ColorScale de IgxGeographicScatterAreaSeriesComponent
para resolver los valores de colores de los puntos y así rellenar la superficie de la serie geográfica. Los colores se interpolan suavemente alrededor de la forma de la superficie aplicando un rasterizador de triángulos de píxeles a los datos de triangulación. Debido a que la representación de la superficie se realiza en píxeles, la escala de colores utiliza colores en lugar de pinceles. La clase IgxCustomPaletteColorScaleComponent
proporcionada debería satisfacer la mayoría de las necesidades de coloración, pero la aplicación puede heredar la clase base ColorScale para una lógica de coloración personalizada.
La siguiente tabla enumera las propiedades de IgxCustomPaletteColorScaleComponent
que afectan el color de la superficie de GeographicScatterAreaSeries.
Nombre de la propiedad | tipo de propiedad | Descripción |
---|---|---|
palette |
Colección observable |
Obtiene o establece la colección de colores para seleccionar o interpolar. |
interpolationMode |
ColorScaleInterpolationMode |
Obtiene o establece el método para obtener un color de la Paleta. |
maximumValue |
doble | El valor más alto para asignar un color. Cualquier valor dado mayor que este valor será transparente. |
minimumValue |
doble | El valor más bajo para asignar un color. Cualquier valor dado menor que este valor será transparente. |
Code Snippet
El siguiente código muestra cómo vincular IgxGeographicScatterAreaSeriesComponent
a datos de triangulación que representan las temperaturas de la superficie en el mundo.
<div className="sampleRoot" >
<igx-geographic-map #map
width="700px"
height="500px"
zoomable="true" >
</igx-geographic-map>
</div>
<ng-template let-series="series" let-item="item" #template>
<div>
<span>
Degrees: {{item.value}} "°F"
</span>
<br/>
<span>
Longitude: {{item.lon}}
</span>
<br/>
<span>
Latitude: {{item.lat}}
</span>
</div>
</ng-template>
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxCustomPaletteColorScaleComponent } from 'igniteui-angular-charts';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxGeographicScatterAreaSeriesComponent } from 'igniteui-angular-maps';
@Component({
selector: "app-map-geographic-scatter-area-series",
styleUrls: ["./map-geographic-scatter-area-series.component.scss"],
templateUrl: "./map-geographic-scatter-area-series.component.html"
})
export class MapTypeScatterAreaSeriesComponent implements AfterViewInit {
@ViewChild ("map")
public map: IgxGeographicMapComponent;
@ViewChild ("template")
public tooltipTemplate: TemplateRef<object>;
constructor() {
}
public ngAfterViewInit(): void {
const sds = new IgxShapeDataSource();
sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp";
sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf";
sds.dataBind();
sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
}
public onDataLoaded(sds: IgxShapeDataSource, 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.length; i++) {
if (i % 5 === 0) {
const p = shapes[i];
const item = { lon: p.x, lat: p.y, value: temp};
contourPoints.push(item);
}
}
}
}
}
this.createContourSeries(contourPoints);
}
public 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 colorScale = new IgxCustomPaletteColorScaleComponent();
colorScale.palette = brushes;
colorScale.minimumValue = 0;
colorScale.maximumValue = 30;
const areaSeries = new IgxGeographicScatterAreaSeriesComponent();
areaSeries.dataSource = data;
areaSeries.longitudeMemberPath = "lon";
areaSeries.latitudeMemberPath = "lat";
areaSeries.colorMemberPath = "value";
areaSeries.colorScale = colorScale;
areaSeries.tooltipTemplate = this.tooltipTemplate;
areaSeries.thickness = 4;
this.map.series.add(areaSeries);
}
}
API References
colorMemberPath
colorScale
IgxCustomPaletteColorScaleComponent
IgxGeographicContourLineSeriesComponent
IgxGeographicScatterAreaSeriesComponent
ItemsSource
latitudeMemberPath
longitudeMemberPath
trianglesSource
TriangulationSource