Die Heatmap-Ebene ermöglicht ein clientseitiges Rendering von Heatmaps.
Übersicht
Eine Heatmap ist eine Visualisierung, mit der die Intensität von Daten an geografischen Punkten dargestellt wird. Wenn die Heatmap-Ebene aktiviert ist, erscheint auf der Karte ein farbiges Overlay. Standardmäßig sind Bereiche mit höherer Intensität rot eingefärbt, während Bereiche mit geringerer Intensität grün dargestellt werden.
Visualisierungsbibliothek laden
Die Heatmap-Ebene ist Teil der Bibliothek google.maps.visualization und wird nicht standardmäßig geladen. Die Visualisierungsklassen sind eine eigenständige Bibliothek, die unabhängig vom Maps JavaScript API-Hauptcode ist. Damit Sie die Funktionen der Bibliothek nutzen können, müssen Sie sie zuerst mithilfe des libraries-Parameters in der Bootstrap-URL der Maps JavaScript API laden:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>
Heatmap-Ebene hinzufügen
Wenn Sie eine Heatmap-Ebene hinzufügen möchten, muss zuerst ein neues HeatmapLayer-Objekt erstellt werden, das über geografische Daten in Form eines Arrays oder eines MVCArray[]-Objekts verfügt. Die Daten können entweder ein LatLng- oder ein WeightedLocation-Objekt sein. Nachdem das HeatmapLayer-Objekt instanziiert wurde, können Sie es der Karte hinzufügen. Rufen Sie dazu die setMap()-Methode auf.
Im folgenden Beispiel werden 14 Datenpunkte in eine Karte von San Francisco aufgenommen.
/* 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);
Gewichtete Datenpunkte hinzufügen
Eine Heatmap kann die Objekte LatLng oder WeightedLocation oder eine Kombination der beiden rendern. Beide Objekte stehen für einen einzelnen Datenpunkt auf einer Karte. Mit einem WeightedLocation-Objekt können Sie aber zusätzlich eine Gewichtung für den jeweiligen Datenpunkt angeben. Die Gewichtung eines Datenpunkts führt dazu, dass WeightedLocation mit einer stärkeren Intensität gerendert wird als ein einfaches LatLng-Objekt. Für die Gewichtung wird eine lineare Skala verwendet, auf der jedes LatLng-Objekt eine implizite Gewichtung von „1“ hat. Das Hinzufügen eines einzelnen WeightedLocation-Objekts mit {location: new google.maps.LatLng(37.782, -122.441), weight: 3} hat denselben Effekt wie das dreimalige Hinzufügen von google.maps.LatLng(37.782, -122.441).
Sie können weightedLocation- und LatLng-Objekte in einem Array kombinieren.
Wir empfehlen, in folgenden Fällen ein WeightedLocation-Objekt anstelle eines LatLng-Elements zu verwenden:
- Wenn Sie große Datenmengen für einen einzelnen Standort hinzufügen möchten. Das Rendern eines einzelnen
WeightedLocation-Objekts mit der Gewichtung 1.000 ist schneller als das Rendern von 1.000LatLng-Objekten. - Wenn Sie Ihre Daten basierend auf beliebigen Werten hervorheben möchten. Sie können beispielsweise
LatLng-Objekte zur Darstellung von Erdbebendaten verwenden, sollten aber zum Messen der Stärke der einzelnen Erdbeben auf der Richterskala einWeightedLocation-Objekt nutzen.
/* 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);
Heatmap-Ebene anpassen
Mithilfe der folgenden Heatmap-Optionen können Sie festlegen, wie Ihre Heatmap gerendert wird: Weitere Informationen finden Sie in der Dokumentation zu HeatmapLayerOptions.
dissipating: gibt an, ob sich Heatmaps beim Vergrößern der Ansicht auflösen. Ist der Wert auf „false“ gesetzt, erhöht sich der Einflussradius mit dem Zoomfaktor. So lässt sich sicherstellen, dass die Farbintensität an jedem geografischen Standort erhalten bleibt. Der Standardwert ist „true“.gradient: der Farbverlauf der Heatmap, angegeben als Array von CSS-Farbstrings. Alle CSS3-Farben einschließlich RGBA werden unterstützt. Davon ausgenommen sind nur Farben mit erweiterten Namen sowie HSL(A)-Werte.maxIntensity: die maximale Intensität der Heatmap. Standardmäßig werden Heatmap-Farben anhand der höchsten Konzentration von Punkten eines beliebigen Pixels auf der Karte dynamisch skaliert. Mit diesem Attribut können Sie einen festen Maximalwert angeben. Das Einstellen einer maximalen Intensität kann hilfreich sein, wenn Ihr Datensatz einige wenige Ausreißer mit außergewöhnlich hoher Intensität enthält.radius: der Einflussradius der einzelnen Datenpunkte in Pixeln.opacity: die Deckkraft der Heatmap, ausgedrückt als Zahl zwischen 0 und 1.
Im folgenden Beispiel sehen Sie einige der möglichen Anpassungsoptionen.