Mapa de burbujas geográficas Angular

    En el componente de mapa Angular, puede utilizar IgxGeographicProportionalSymbolSeriesComponent para trazar burbujas o marcadores proporcionales en las ubicaciones geográficas especificadas por los datos de su aplicación. Esta serie de mapas puede resultar útil para resaltar puntos de interés en su caso de negocio particular, como grandes almacenes, almacenes u oficinas. También puede utilizar esta serie de mapas en un sistema de gestión de flotas o en un sistema GPS para seguimiento dinámico de vehículos.

    Angular Geographic Bubble Map Example

    La demostración anterior muestra la serie IgxGeographicProportionalSymbolSeriesComponent y cómo especificar las opciones de enlace de datos de la serie. La selección automática de marcadores se configura junto con la lógica para evitar colisiones de marcadores, y también se especifican el contorno del marcador y los colores de relleno.

    Configuration Summary

    De manera similar a otros tipos de series de dispersión en el control de mapa, la serie IgxGeographicProportionalSymbolSeriesComponent tiene la propiedad ItemsSource que se puede vincular a una matriz de objetos. Además, cada elemento de datos en el origen de elementos debe tener dos columnas de datos que almacenen coordenadas geográficas de longitud y latitud y utilice las propiedades longitudeMemberPath y latitudeMemberPath para asignar estas columnas de datos. La configuración radiusScale y radiusMemberPath configura el radio de las burbujas.

    La siguiente tabla resume las propiedades de la serie GeographicHighDensityScatterSeries utilizadas para el enlace de datos.

    Propiedad Tipo Descripción
    ItemsSource cualquier Obtiene o establece el origen de los elementos.
    longitudeMemberPath cadena Utiliza la propiedad ItemsSource para determinar la ubicación de los valores de longitud en los elementos asignados.
    latitudeMemberPath cadena Utiliza la propiedad ItemsSource para determinar la ubicación de los valores de latitud en los elementos asignados.
    radiusMemberPath cadena Establece la ruta que se utilizará para obtener los valores de radio de la serie.
    radiusScale IgxSizeScaleComponent Obtiene o establece la propiedad de escala de radio para la serie de burbujas actual.
    minimumValue cualquier Configure el valor mínimo para calcular los subrangos de valores.
    maximumValue cualquier Configure el valor máximo para calcular los subrangos de valores.

    Code Snippet

    <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>
            {{item.name}}
        </span>
    </div>
</ng-template>

    import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxSizeScaleComponent } from 'igniteui-angular-charts';
import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts';
import { IgxDataContext } from 'igniteui-angular-core';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxGeographicProportionalSymbolSeriesComponent } from 'igniteui-angular-maps';
import { MarkerType } from 'igniteui-angular-charts';
import { WorldLocations } from "../../utilities/WorldLocations";

@Component({
  selector: "app-map-geographic-scatter-proportional-series",
  styleUrls: ["./map-geographic-scatter-proportional-series.component.scss"],
  templateUrl: "./map-geographic-scatter-proportional-series.component.html"
})
export class MapTypeScatterBubbleSeriesComponent 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();
    console.log("loaded contour shapes: " + shapeRecords.length + " from /Shapes/WorldTemperatures.shp");

    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);
                    }
                 }
            }
        }
    }

    console.log("loaded contour points: " + contourPoints.length);
    this.addSeriesWith(WorldLocations.getAll());
}

    public addSeriesWith(locations: any[]) {
        const sizeScale = new IgxSizeScaleComponent();
        sizeScale.minimumValue = 4;
        sizeScale.maximumValue = 60;

        const brushes = [
            "rgba(14, 194, 14, 0.4)",  // semi-transparent green
            "rgba(252, 170, 32, 0.4)", // semi-transparent orange
            "rgba(252, 32, 32, 0.4)"  // semi-transparent red
        ];

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

        const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent();
        symbolSeries.dataSource = locations;
        symbolSeries.markerType = MarkerType.Circle;
        symbolSeries.radiusScale = sizeScale;
        symbolSeries.fillScale = brushScale;
        symbolSeries.fillMemberPath = "pop";
        symbolSeries.radiusMemberPath = "pop";
        symbolSeries.latitudeMemberPath = "lat";
        symbolSeries.longitudeMemberPath = "lon";
        symbolSeries.markerOutline = "rgba(0,0,0,0.3)";
        symbolSeries.tooltipTemplate = this.tooltipTemplate;

        this.map.series.add(symbolSeries);
    }
}

    API References