Mapas de calor

Selecciona la plataforma: Android iOS JavaScript

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

En este video se discute el uso de mapas de calor como alternativa a los marcadores cuando la naturaleza de tu información se condice con una gran cantidad de datos que deberían señalarse en el mapa.

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

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

Mapa de calor en un mapa

Nota: Puedes definir los colores que prefieras para el mapa de calor con el botón gradient propiedad. Consulta cómo personalizar los colores y otras propiedades de mapa de calor.

Si aún no configuraste la biblioteca, sigue las instrucciones guía 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 compuesto por los siguientes elementos: coordenadas de cada ubicación de interés. Primero, crea un Instancia GMUHeatmapTileLayer, lo que establece la propiedad map en GMSMapView. Haz esto en la función viewDidLoad() de tu app para asegurarte de que el mapa base esté antes de trabajar con el mapa de calor. Luego, pasa una colección de GMUWeightedLatLng a la instancia GMUHeatmapTileLayer.

La compañía eléctrica suministra la clase GMUHeatmapTileLayer, que acepta un 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 que se proporciona.

Una vista más detallada de los pasos:

1. Crea una instancia de GMUHeatmapTileLayer y establece la propiedad map en una GMSMapView (haz esto en la función viewDidLoad() de tu app)
2. Pasa una colección de objetos GMUWeightedLatLng al 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 configurar las opciones cuando creando inicialmente la instancia GMUHeatmapTileLayer o en cualquier momento a través de estableciendo un nuevo valor para la opción.

Están disponibles las siguientes opciones:

1. Radio: es el tamaño del desenfoque gaussiano que se aplica al mapa de calor, expresado en píxeles. El valor predeterminado es 20. Los valores mínimo y máximo son 10 y 50, respectivamente. Usa GMUHeatmapTileLayer.radius para establecer el radio.

2. Gradiente: Es un rango de colores que se usan en el mapa de calor para generar el color correspondiente. de red, de menor a mayor intensidad. Se crea un GMUGradient con un array de enteros que contiene los colores y un array de número de punto flotante que indica la punto de partida para cada color, dado como un porcentaje de la intensidad máxima, y expresada como una fracción de 0 a 1. Debes especificar solo un color para un gradiente de un solo color, o un mínimo de dos colores para una multicolor gradiente. 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 altos darán como resultado una con una gradiente de la imagen, mientras que los números más pequeños generarán transiciones más nítidas, similares a una gráfico de contorno. Usa GMUHeatmapTileLayer.gradient para establecer el gradiente.

3. Opacidad: es la opacidad de toda la capa del mapa de calor y de los rangos. de 0 a 1. El valor predeterminado es 0.7. Usa GMUHeatmapTileLayer.opacity para establecer la 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 ya establecida, sigue estos pasos:

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

Cambia el conjunto de datos

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

1. Actualiza tu recopilación de datos. Usar GMUHeatmapTileLayer.weightedData, pasar un array de GMUWeightedLatLng.
2. Llamar a GMUHeatmapTileLayer.clearTileCache()

Nota: Si deseas agregar puntos al mapa de calor o quitarlos mapa de calor, actualiza la recopilación de datos y, luego, usa GMUHeatmapTileLayer.weightedData.

Cómo quitar 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;
      

Cómo consultar la app de demo

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 ejecuta la app de demostración.