Calque Heatmap

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
Sélectionnez une plate-forme: Android iOS JavaScript
  1. Présentation
  2. Charger la bibliothèque de visualisations
  3. Ajouter des points de données pondérés
  4. Personnaliser un calque de carte de densité

Le calque Heatmap fournit un rendu côté client des cartes thermiques.

Présentation

Une carte de densité est une visualisation utilisée pour illustrer l'intensité des données à des points géographiques. Lorsque le calque de carte de densité est activé, une superposition de couleur apparaît en haut de la carte. Par défaut, les zones d'intensité plus élevée sont colorées en rouge et les zones de faible intensité apparaissent en vert.

Charger la bibliothèque de visualisations

La couche de carte de densité fait partie de la bibliothèque google.maps.visualization et n'est pas chargée par défaut. Les classes de visualisation sont une bibliothèque autonome, distincte du code principal de l'API Maps JavaScript. Pour utiliser la fonctionnalité contenue dans cette bibliothèque, vous devez d'abord la charger à l'aide du paramètre libraries dans l'URL d'amorçage de l'API Maps JavaScript:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>

Ajouter un calque Heatmap

Pour ajouter un calque de carte de densité, vous devez d'abord créer un objet HeatmapLayer et lui fournir des données géographiques sous la forme d'un tableau ou d'un objet MVCArray[]. Les données peuvent être des objets LatLng ou WeightedLocation. Après avoir instancié l'objet HeatmapLayer, ajoutez-le à la carte en appelant la méthode setMap().

L'exemple suivant montre l'ajout de 14 points de données à une carte de San Francisco.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

Ajouter des points de données pondérés

Une carte de densité peut afficher des objets LatLng ou WeightedLocation, ou une combinaison des deux. Les deux objets représentent un seul point de données sur une carte, mais un objet WeightedLocation vous permet de spécifier une pondération pour ce point de données. Si vous appliquez une pondération à un point de données, WeightedLocation s'affiche avec une intensité supérieure à celle d'un objet LatLng simple. La pondération est une échelle linéaire, dans laquelle chaque objet LatLng a une pondération implicite de 1. L'ajout d'un seul WeightedLocation de {location: new google.maps.LatLng(37.782, -122.441), weight: 3} aura le même effet que l'ajout de google.maps.LatLng(37.782, -122.441) trois fois. Vous pouvez combiner des objets weightedLocation et LatLng dans un même tableau.

Il peut être utile d'utiliser un objet WeightedLocation à la place d'un LatLng dans les cas suivants:

  • Ajoutez d'importantes quantités de données à un point géographique unique. Il sera plus rapide d'effectuer le rendu d'un seul objet WeightedLocation avec une pondération de 1 000 que d'afficher 1 000 objets LatLng.
  • Appliquez une emphase à vos données en fonction de valeurs arbitraires. Par exemple, vous pouvez utiliser des objets LatLng pour tracer les données sur les séismes, mais vous pouvez utiliser un WeightedLocation pour mesurer l'amplitude de chaque séisme sur l'échelle de Richter.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

Personnaliser un calque Heatmap

Vous pouvez personnaliser le rendu de votre carte de densité à l'aide des options de carte de densité suivantes. Pour en savoir plus, consultez la documentation de HeatmapLayerOptions.

  • dissipating : indique si la carte de densité se dissipe lors du zoom. Lorsque cette valeur est "false", le rayon d'influence augmente avec le niveau de zoom pour garantir l'intensité des couleurs à n'importe quel emplacement géographique. La valeur par défaut est "true".
  • gradient : dégradé de couleurs de la carte de densité, spécifié sous la forme d'un tableau de chaînes de couleurs CSS. Toutes les couleurs CSS3, y compris les couleurs RVBA, sont acceptées, à l'exception des couleurs étendues nommées et des valeurs HSL(A).
  • maxIntensity : intensité maximale de la carte de densité. Par défaut, les couleurs de la carte de densité sont mises à l'échelle de manière dynamique en fonction de la plus grande concentration de points à un pixel de la carte. Cette propriété vous permet de spécifier une valeur maximale fixe. Définir l'intensité maximale peut être utile lorsque votre ensemble de données contient quelques anomalies avec une intensité inhabituellement élevée.
  • radius : rayon d'influence pour chaque point de données, en pixels.
  • opacity: opacité de la carte de densité, exprimée sous la forme d'un nombre compris entre 0 et 1.

L'exemple ci-dessous montre certaines des options de personnalisation disponibles.

Voir un exemple