Mapas de calor

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.
Seleccionar plataforma: Android iOS JavaScript

En esta página, se describe la utilidad del mapa de calor disponible en la biblioteca de utilidades del SDK de Maps para iOS. Los mapas de calor son útiles para representar la distribución y densidad de datos en un mapa.

En este video se discute el uso de mapas de calor como alternativa a los marcadores cuando tus datos requieren una gran cantidad de puntos de datos en el mapa.

Los mapas de calor permiten a los usuarios comprender fácilmente la distribución y la intensidad relativa de los datos de un mapa. En los mapas de calor, en lugar de colocar un marcador en cada ubicación, se usan colores para representar la distribución de los datos.

En el siguiente ejemplo, el rojo representa áreas de alta concentración de comisarías en Victoria, Australia.

Mapa con un mapa de calor en el que se muestra la ubicación de comisarías
Un mapa de calor en un mapa

Si aún no configuraste la biblioteca, sigue la guía de configuración antes de leer el resto de esta página.

Cómo agregar un mapa de calor simple

Para agregar un mapa de calor a tu mapa, necesitarás un conjunto de datos que conste de coordenadas para cada ubicación de interés. Primero, crea una instancia GMUHeatmapTileLayer y establece la propiedad map en GMSMapView. Haz esto en la función viewDidLoad() de tu app para asegurarte de que el mapa base se cargue antes de trabajar con él. Luego, pasa una colección de objetos GMUWeightedLatLng a la instancia GMUHeatmapTileLayer.

La utilidad proporciona la clase GMUHeatmapTileLayer, que acepta una colección de objetos GMUWeightedLatLng. Crea las imágenes de mosaicos para varios niveles de zoom, según las opciones de radio, gradiente y opacidad suministradas.

Una vista más detallada de los pasos:

  1. Crea una instancia GMUHeatmapTileLayer y establece la propiedad map en GMSMapView (haz esto en la función viewDidLoad() de tu app).
  2. Pasa una colección de objetos GMUWeightedLatLng a la instancia GMUHeatmapTileLayer.
  3. Llama a GMUHeatmapTileLayer.map y pasa la vista de mapa.

    Swift

    class Heatmap: UIViewController {
    
      private var mapView: GMSMapView!
      private var heatmapLayer: GMUHeatmapTileLayer!
    
      override func viewDidLoad() {
        super.viewDidLoad()
        heatmapLayer = GMUHeatmapTileLayer()
        heatmapLayer.map = mapView
      }
    
      // ...
    
      func addHeatmap() {
    
        // Get the data: latitude/longitude positions of police stations.
        guard let path = Bundle.main.url(forResource: "police_stations", withExtension: "json") else {
          return
        }
        guard let data = try? Data(contentsOf: path) else {
          return
        }
        guard let json = try? JSONSerialization.jsonObject(with: data, options: []) else {
          return
        }
        guard let object = json as? [[String: Any]] else {
          print("Could not read the JSON.")
          return
        }
    
        var list = [GMUWeightedLatLng]()
        for item in object {
          let lat = item["lat"] as! CLLocationDegrees
          let lng = item["lng"] as! CLLocationDegrees
          let coords = GMUWeightedLatLng(
            coordinate: CLLocationCoordinate2DMake(lat, lng),
            intensity: 1.0
          )
          list.append(coords)
        }
    
        // Add the latlngs to the heatmap layer.
        heatmapLayer.weightedData = list
      }
    }
          

    Objective‑C

    @implementation Heatmap {
      GMSMapView *_mapView;
      GMUHeatmapTileLayer *_heatmapLayer;
    }
    
    - (void)viewDidLoad {
      [super viewDidLoad];
      _heatmapLayer = [[GMUHeatmapTileLayer alloc] init];
      _heatmapLayer.map = _mapView;
    }
    
    // ...
    
    - (void) addHeatmap {
    
      // Get the data: latitude/longitude positions of police stations.
      NSURL *path = [NSBundle.mainBundle URLForResource:@"police_stations" withExtension:@"json"];
      NSData *data = [NSData dataWithContentsOfURL:path];
      NSArray *json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
    
      NSMutableArray<GMUWeightedLatLng *> *list = [[NSMutableArray alloc] init];
      [json enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        NSDictionary *item = (NSDictionary *)obj;
        CLLocationDegrees lat = [(NSNumber *) [item valueForKey:@"lat"] doubleValue];
        CLLocationDegrees lng = [(NSNumber *) [item valueForKey:@"lng"] doubleValue];
        GMUWeightedLatLng *coords = [[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(lat, lng)
                                                                        intensity:1.0];
        [list addObject:coords];
      }];
    
    
      // Add the latlngs to the heatmap layer.
      _heatmapLayer.weightedData = list;
    }
    @end
          

Para este ejemplo, los datos se almacenan en un archivo JSON, police_stations.json. Aquí se proporciona un extracto del archivo:

[
{"lat" : -37.1886, "lng" : 145.708 } ,
{"lat" : -37.8361, "lng" : 144.845 } ,
{"lat" : -38.4034, "lng" : 144.192 } ,
{"lat" : -38.7597, "lng" : 143.67 } ,
{"lat" : -36.9672, "lng" : 141.083 }
]

Cómo personalizar el mapa de calor

El mapa de calor tiene varias propiedades personalizables. Puedes establecer las opciones cuando creas la instancia GMUHeatmapTileLayer o en cualquier momento mediante la configuración de un valor nuevo para la opción.

Están disponibles las siguientes opciones:

  1. Radio: El tamaño del desenfoque gaussiano que se aplica al mapa de calor, expresado en píxeles. El valor predeterminado es 20 y debe estar entre 10 y 50. Usa GMUHeatmapTileLayer.radius para establecer el radio.

  2. Gradiente: Es un rango de colores que el mapa de calor utiliza para generar su mapa de colores, con una intensidad de menor a mayor. Un GMUGradient se crea con un arreglo de números enteros que contiene los colores y un arreglo flotante que indica el punto de partida para cada color, dado como un porcentaje de la intensidad máxima, y expresado como una fracción de 0 a 1. Solo debes especificar un color para un gradiente de un solo color o un mínimo de dos colores para un gradiente multicolor. El mapa de color se genera aplicando una interpolación entre dichos colores. El gradiente predeterminado tiene dos colores. El parámetro colorMapSize define la cantidad de pasos en el gradiente. Los números más grandes darán como resultado un gradiente más suave, mientras que los números más pequeños darán transiciones más nítidas similares a una gráfica de contorno. Usa GMUHeatmapTileLayer.gradient para establecer el gradiente.

  3. Opacidad: Es la opacidad de toda la capa del mapa de calor y varía de 0 a 1. El valor predeterminado es 0.7. Usa GMUHeatmapTileLayer.opacity para establecer el valor de opacidad.

Por ejemplo, crea un Gradient:

Swift

let gradientColors: [UIColor] = [.green, .red]
let gradientStartPoints: [NSNumber] = [0.2, 1.0]
heatmapLayer.gradient = GMUGradient(
  colors: gradientColors,
  startPoints: gradientStartPoints,
  colorMapSize: 256
)
      

Objective‑C

NSArray<UIColor *> *gradientColors = @[UIColor.greenColor, UIColor.redColor];
NSArray<NSNumber *> *gradientStartPoints = @[@0.2, @1.0];
_heatmapLayer.gradient = [[GMUGradient alloc] initWithColors:gradientColors
                                                 startPoints:gradientStartPoints
                                                colorMapSize:256];
      

Para cambiar la opacidad de un mapa de calor existente, sigue estos pasos:

Swift

heatmapLayer.opacity = 0.7
      

Objective‑C

_heatmapLayer.opacity = 0.7;
      

Actualizar una opción existente

Para actualizar una opción que ya se configuró, sigue estos pasos:

  1. Actualiza la opción al valor deseado.
  2. Llamar a GMUHeatmapTileLayer.clearTileCache()

Cambia el conjunto de datos

Para cambiar el conjunto de datos sobre el que se crea un mapa de calor, sigue estos pasos:

  1. Actualice su recopilación de datos. Usa GMUHeatmapTileLayer.weightedData y pasa un arreglo de GMUWeightedLatLng.
  2. Llamar a GMUHeatmapTileLayer.clearTileCache()

Quita un mapa de calor

Para quitar un mapa de calor, llama a GMUHeatmapTileLayer.map y pasa nil.

Swift

heatmapLayer.map = nil
      

Objective‑C

_heatmapLayer.map = nil;
      

Consulta la app de demostración

Para ver otro ejemplo de la implementación de un mapa de calor, observa HeatmapViewController en la app de demostración que se incluye en la biblioteca de utilidades. En la guía de configuración, se muestra cómo ejecutar la app de demostración.