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 con un mapa de calor en el que se muestra la ubicación de comisarías](https://developers.google.cn/static/maps/documentation/ios-sdk/images/heatmap-ios.png?authuser=8&hl=es)
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:
- Crea una instancia de
GMUHeatmapTileLayer
y establece la propiedadmap
en unaGMSMapView
(haz esto en la funciónviewDidLoad()
de tu app) - Pasa una colección de objetos
GMUWeightedLatLng
al InstanciaGMUHeatmapTileLayer
. - 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:
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.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ámetrocolorMapSize
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. UsaGMUHeatmapTileLayer.gradient
para establecer el gradiente.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:
- Actualiza la opción al valor deseado.
- 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:
- Actualiza tu recopilación de datos. Usar
GMUHeatmapTileLayer.weightedData
, pasar un array deGMUWeightedLatLng
. - Llamar a
GMUHeatmapTileLayer.clearTileCache()
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.