Adición de una capa de mapa térmicoAdd a heat map layer

Los mapas térmicos, también conocidos como mapas de densidad de puntos, son un tipo de visualización de datos utilizado para representar la densidad de los datos mediante una gama de colores.Heat maps, also known as point density maps, are a type of data visualization used to represent the density of data using a range of colors. A menudo se utilizan para mostrar las "zonas activas" de los datos en un mapa y son una forma excelente de representar grandes conjuntos de datos de puntos.They're often used to show the data "hot spots" on a map and are a great way to render large point data sets. Por ejemplo, la representación de decenas de miles de puntos como símbolos en la vista del mapa cubre la mayor parte del área del mapa, lo que daría lugar a la superposición de muchos símbolos entre sí y dificultaría la comprensión de los datos.For example, rendering tens of thousands of points within the map view as symbols, covers most of the map area and would result in many symbols overlapping each other, making it difficult to gain much insight into the data. Sin embargo, la visualización de este mismo conjunto de datos como un mapa térmico facilita la visualización dónde los datos de puntos son más densos y la densidad relativa a otras áreas.However, visualizing this same data set as a heat map makes it easy to see where the point data is the densest and the relative density to other areas. Hay muchos escenarios en los que se usan los mapas térmicos.There are many scenarios in which heat maps, are used. Estos son algunos ejemplos:Here are few examples;

  • Los datos de temperatura normalmente se representan como mapa térmico, ya que este proporciona aproximaciones de temperatura entre dos puntos de datos.Temperature data is commonly rendered as heat map as it provides approximations for what the temperature between two data points.
  • La representación de datos de sensores de ruido como un mapa térmico no solo muestra la intensidad del ruido donde se encuentra el sensor, sino que también puede proporcionar información sobre la degradación a lo largo de una distancia.Rendering data for noise sensors as a heat map not only shows the intensity of the noise where the sensor is but can also provide insights into the dissipation over a distance. Puede que el nivel de ruido de un sitio no sea elevado; sin embargo, si el área de cobertura de ruido de varios sensores se superpone, es posible que esta área superpuesta pueda experimentar niveles de ruido más elevados y, por tanto, serían visibles en el mapa térmico.The noise level at any one site may not be high, however if the noise coverage area from multiple sensors overlaps, it's possible that this overlapping area may experience higher noise levels, and thus would be visible in the heat map.
  • La visualización de un seguimiento por GPS que incluye la velocidad como un mapa de altura ponderada, donde la intensidad de cada punto de datos se basa en la velocidad, es una forma magnífica de ver dónde acelera el vehículo.Visualizing a GPS trace that includes the speed as a weighted height map where the intensity of each data point is based on the speed is a great way to see where the vehicle was speeding.

Sugerencia

De forma predeterminada, las capas de un mapa térmico representarán las coordenadas de todos los objetos geométricos de un origen de datos.Heat map layers by default will render the coordinates of all geometries in a data source. Para limitar la capa de forma que solo represente las características de geometría de puntos, configure la propiedad filter de la capa en ['==', ['geometry-type'], 'Point'] o ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] si quiere incluir también las características de MultiPoint.To limit the layer so that it only renders point geometry features, set the filter property of the layer to ['==', ['geometry-type'], 'Point'] or ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] if you want to include MultiPoint features as well.

Adición de una capa de mapa térmicoAdd a heat map layer

Para representar un origen de datos de puntos como un mapa térmico, solo tiene que pasar el origen de datos a una instancia de la clase HeatMapLayer y agregarlo al mapa tal y como se muestra aquí.To render a data source of points as a heat map, pass your data source into an instance of the HeatMapLayer class and add it to the map as shown here.

En el código siguiente, cada punto térmico tiene un radio de 10 píxeles a todos los niveles de zoom.In the following code, each heat point has a radius of 10 pixels at all zoom levels. Al agregar la capa de mapa térmico al mapa, este ejemplo se inserta debajo de la capa de etiqueta para crear una mejor experiencia de usuario, ya que las etiquetas son claramente encima del mapa térmico.When adding the heat map layer to the map, this sample inserts it below the label layer to create a better user experience as the labels are clearly visible above the heat map. Los datos de este ejemplo proceden de USGS Earthquake Hazards Program y representan terremotos importantes que se han producido en los 30 últimos días.The data in this sample is sourced from the USGS Earthquake Hazards Program and represents significant earthquakes that have occurred in the last 30 days.

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Load a data set of points, in this case earthquake data from the USGS.
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');

//Create a heatmap and add it to the map.
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
  radius: 10,
  opacity: 0.8
}), 'labels');

A continuación se muestra el código de ejemplo de ejecución completo de la funcionalidad anterior.Below is the complete running code sample of the above functionality.


Personalización de la capa de mapa térmicoCustomizing the heat map layer

En el ejemplo anterior se personalizó el mapa térmico con la configuración de las opciones de radio y opacidad.The previous example customized the heat map by setting the radius and opacity options. La capa de mapa térmico ofrece varias opciones de personalización:The heat map layer provides several options for customization;

  • radius: define un radio de píxel en el que representar cada punto de datos.radius: Defines a pixel radius in which to render each data point. El radio puede establecerse como un número fijo o como una expresión.The radius can be set as a fixed number or as an expression. Mediante una expresión, es posible escalar el radio en función del nivel de zoom, que parece representar un área espacial coherente del mapa (por ejemplo, un radio de 5 millas).Using an expression, it's possible to scale the radius based on the zoom level, that appears to represent a consistent spatial area on the map (for example, 5-mile radius).
  • color: especifica cómo se colorea el mapa térmico.color: Specifies how the heat map is colorized. Se suele usar un degradado de color para los mapas térmicos, que puede lograrse con una expresión interpolate.A color gradient is often used for heat maps and can be achieved with an interpolate expression. El uso de una expresión step para colorear el mapa térmico separa la densidad en los intervalos que más se parecen visualmente a un mapa de estilo de contorno o radar.Using a step expression for colorizing the heat map breaks up the density visually into ranges that more so resembles a contour or radar style map. Las paletas de colores definen los colores desde valores de intensidad mínimos hasta máximos.These color palettes define the colors from the minimum to the maximum density value. Los valores de color de los mapas térmicos se especifican como una expresión en el valor heatmap-density.Color values for heat maps are specified as an expression on the heatmap-density value. El color en el índice 0 de una expresión de interpolación o el color predeterminado de una expresión de paso definen el color del área donde no hay ningún dato y se pueden usar para definir un color de fondo.The color at index 0 in an interpolation expression or the default color of a step expression, defines the color of the area where there's no data and can be used to define a background color. Muchos prefieren establecer este valor en transparente o en un negro semitransparente.Many prefer to set this value to transparent or a semi-transparent black. Estos son ejemplos de expresiones de color:Here are examples of color expressions;
Expresión de color de interpolaciónInterpolation Color Expression Expresión de color escalonadoStepped Color Expression
[
    'interpolate',    'interpolate',
    ['linear'],    ['linear'],
    ['heatmap-density'],    ['heatmap-density'],
    0, 'transparent',    0, 'transparent',
    0.01, 'purple',    0.01, 'purple',
    0.5, '#fb00fb',    0.5, '#fb00fb',
    1, '#00c3ff'    1, '#00c3ff'
]
[
    'step',    'step',
    ['heatmap-density'],    ['heatmap-density'],
    'transparent',    'transparent',
    0.01, 'navy',    0.01, 'navy',
    0.25, 'green',    0.25, 'green',
    0.50, 'yellow',    0.50, 'yellow',
    0.75, 'red'    0.75, 'red'
]
  • opacity: especifica el grado de opacidad o transparencia de la capa de mapa térmico.opacity: Specifies how opaque or transparent the heat map layer is.
  • intensity: aplica un multiplicador a peso de cada punto de datos para aumentar la intensidad general del mapa térmico y facilita la visualización de pequeñas diferencias en el peso de los puntos de datos.intensity: Applies a multiplier to the weight of each data point to increase the overall intensity of the heatmap and helps to make the small differences in the weight of data points become easier to visualize.
  • weight: de forma predeterminada, todos los puntos de datos tienen un peso de 1; por lo tanto, todos los puntos de datos se ponderan equitativamente.weight: By default, all data points have a weight of 1, thus all data points are weighted equally. La opción de peso actúa como un multiplicador y puede establecerse como un número o una expresión.The weight option acts as a multiplier and can be set as a number or an expression. Si el peso se establece con un número, digamos 2, equivaldría a colocar cada punto de datos dos veces en el mapa, por lo que se duplicaría la densidad.If a number is set as the weight, say 2, it would be the equivalent of placing each data point on the map twice, thus doubling the density. Establecer la opción de peso en un número representa el mapa térmico de forma similar a la opción de intensidad.Setting the weight option to a number renders the heat map in a similar way to using the intensity option. Sin embargo, si se usa una expresión, el peso de cada punto de datos puede basarse en las propiedades de dichos puntos de datos.However, if an expression is used, the weight of each data point can be based on the properties of each data point. Si tomamos los datos de un terremoto como ejemplo, cada punto de datos representaría un terremoto.Take earthquake data as an example, each data point represents an earthquake. Las métricas importantes que tenga cada punto de datos se considerarán valores de magnitud.An important metric each earthquake data point has, is a magnitude value. Los terremotos se producen a menudo, pero la mayoría tienen una magnitud baja y casi no se sienten.Earthquakes happen all the time, but most have a low magnitude and aren't even felt. Si usamos el valor de magnitud de una expresión para asignar el peso a cada punto de datos, conseguiremos que los terremotos más importantes se representen mejor en el mapa térmico.Using the magnitude value in an expression to assign the weight to each data point will allow more significant earthquakes to be better represented within the heat map.
  • Además de las opciones de la capa base, el zoom mínimo y máximo, la opción Visible y el filtro, también está la opción source si desea actualizar el origen de datos y la opción source-layer si el origen de dato es un origen de corte vectorial.Besides the base layer options; min/max zoom, visible and filter, there's also a source option if you want to update the data source and source-layer option if your data source is a vector tile source.

A continuación, se muestra una herramienta para probar las diferentes opciones de la capa de mapa térmico.Here is a tool to test out the different heat map layer options.


Mapa térmico con aplicación de zoom coherenteConsistent zoomable heat map

De forma predeterminada, los radios de los puntos de datos representados en la capa del mapa térmico tienen un radio de píxel fijo para todos los niveles de zoom.By default, the radii of data points rendered in the heat map layer have a fixed pixel radius for all zoom levels. A medida que se amplía el mapa, los datos se agregan juntos y la capa de mapa térmico parece diferente.As the map is zoomed, the data aggregates together and the heat map layer looks different. Una expresión zoom puede usarse para ampliar el radio de cada nivel de zoom de forma que cada punto de datos cubra el mismo área físico del mapa.A zoom expression can be used to scale the radius for each zoom level such that each data point covers the same physical area of the map. Esto hará que la capa de mapa térmico parezca más estática y coherente.This will make the heat map layer look more static and consistent. Cada nivel de zoom del mapa tiene dos veces tantos píxeles vertical y horizontalmente que nivel de zoom anterior.Each zoom level of the map has twice as many pixels vertically and horizontally as the previous zoom level. Ampliar el radio de forma que se duplique con cada nivel de zoom creará un mapa térmico que parece coherente en todos los niveles de zoom.Scaling the radius such that it doubles with each zoom level will create a heat map that looks consistent on all zoom levels. Esto puede realizarse mediante la expresión zoom con una expresión exponential interpolation de base 2, como se muestra en el ejemplo siguiente.This can be accomplished by using the zoom with a base 2 exponential interpolation expression as shown in the sample below. Amplía el mapa para ver cómo se escala el mapa térmico con el nivel de zoom.Zoom the map to see how the heat map scales with the zoom level.


Sugerencia

Al habilitar la agrupación en clústeres en el origen de datos, los puntos que están cerca unos de otros se agrupan como un punto agrupado.By enabling clustering on the data source, points that are close to one another are grouped together as a clustered point. El número de puntos de cada clúster puede utilizarse como la expresión de peso para el mapa térmico y reducir significativamente el número de puntos que se deben representar.The point count of each cluster can be used as the weight expression for the heat map and significantly reduce the number of points that have to be render. El número de puntos de un clúster se almacena en la propiedad point_count de la característica de puntos, tal y como se muestra a continuación.The point count of a cluster is stored in a point_count property of the point feature as shown below.

var layer = new atlas.layer.HeatMapLayer(datasource, null, {
   weight: ['get', 'point_count']
});

Si el radio de agrupación en clústeres es solo de unos cuantos píxeles, habrá poca diferencia visual en la representación.If the clustering radius is only a few pixels there will be little visual difference the rendering. Un radio más grande agrupará más puntos en cada clúster y mejorará el rendimiento del mapa térmico, pero las diferencias serán más evidentes.A larger radius will group more points into each cluster and improve the performance of the heatmap, but have the a more noticeable the differences will be.

Pasos siguientesNext steps

Más información sobre las clases y los métodos utilizados en este artículo:Learn more about the classes and methods used in this article:

Para más ejemplos de código para agregar a los mapas, consulte los siguientes artículos:For more code examples to add to your maps, see the following articles: