- Overview
- Wczytaj bibliotekę wizualizacji
- Dodawanie ważonych punktów danych
- Dostosowywanie warstwy mapy termicznej
Warstwa mapy termicznej umożliwia renderowanie map termicznych po stronie klienta.
Przegląd
Mapa termiczna to wizualizacja, która przedstawia intensywność danych w punktach geograficznych. Po włączeniu warstwy Mapa termiczna na mapie pojawi się kolorowa nakładka. Domyślnie obszary o większej intensywności są zaznaczone na czerwono, a te o niższej – na zielone.
Wczytaj bibliotekę wizualizacji
Warstwa Mapa termiczna jest częścią biblioteki google.maps.visualization i nie jest domyślnie wczytywana. Klasy wizualizacji to samodzielna biblioteka, niezależna od głównego kodu Maps JavaScript API. Aby korzystać z funkcji zawartych w tej bibliotece, musisz najpierw ją wczytać za pomocą parametru libraries w adresie URL wczytywania interfejsu Maps JavaScript API:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>
Dodawanie warstwy mapy termicznej
Aby dodać warstwę mapy termicznej, musisz najpierw utworzyć nowy obiekt HeatmapLayer i podać mu pewne dane geograficzne w postaci tablicy lub obiektu MVCArray[]. Dane te mogą być obiektem LatLng lub WeightedLocation. Po utworzeniu instancji obiektu HeatmapLayer dodaj go do mapy, wywołując metodę setMap().
W przykładzie poniżej dodano 14 punktów danych do mapy 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);
Dodaj ważone punkty danych
Mapa termiczna może renderować obiekty LatLng lub WeightedLocation albo ich kombinację. Oba obiekty reprezentują 1 punkt danych na mapie, ale obiekt WeightedLocation pozwala dodatkowo określić wagę tego punktu danych. Zastosowanie wagi do punktu danych spowoduje, że obiekt WeightedLocation będzie renderowany z większą intensywnością niż prosty obiekt LatLng. Waga jest skalą liniową, w której każdy obiekt LatLng ma niejawną wagę równą 1. Dodanie pojedynczego elementu WeightedLocation o wartości {location: new google.maps.LatLng(37.782, -122.441), weight: 3} daje taki sam efekt jak dodanie google.maps.LatLng(37.782, -122.441) 3 razy.
Możesz mieszać obiekty weightedLocation i LatLng w jednej tablicy.
Użycie obiektu WeightedLocation zamiast LatLng może być przydatne, gdy:
- Dodawanie dużych ilości danych w jednej lokalizacji Renderowanie pojedynczego obiektu
WeightedLocationo wadze 1000 będzie szybsze niż renderowanie 1000 obiektówLatLng. - Podkreślenie danych na podstawie dowolnych wartości. Możesz na przykład użyć obiektów
LatLngprzy wykresach danych o trzęsieniach ziemi, ale lepiej użyćWeightedLocation, by zmierzyć siłę każdego trzęsienia ziemi w większej skali.
/* 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);
Dostosowywanie warstwy mapy termicznej
Za pomocą poniższych opcji mapy termicznej możesz dostosować sposób renderowania mapy termicznej. Więcej informacji znajdziesz w dokumentacji HeatmapLayerOptions.
dissipating: określa, czy mapy termiczne rozpraszają się przy powiększeniu. Gdy rozpraszanie ma wartość fałsz, promień wpływu zwiększa się wraz z poziomem powiększenia, aby zapewnić zachowanie intensywności kolorów w danej lokalizacji geograficznej. Domyślna wartość to prawda.gradient: gradient koloru mapy termicznej określony jako tablica ciągów znaków CSS z kolorami. Wszystkie kolory CSS3 – w tym RGBA – są obsługiwane z wyjątkiem wartości rozszerzonych nazwanych kolorów i HSL(A).maxIntensity: maksymalna intensywność mapy termicznej. Domyślnie kolory mapy termicznej są dynamicznie skalowane zgodnie z największym stężeniem punktów w dowolnym konkretnym pikselu na mapie. Ta właściwość pozwala określić stałą maksymalną wartość. Ustawienie maksymalnej intensywności może być pomocne, gdy zbiór danych zawiera kilka wyników odstających o nietypowo wysokiej intensywności.radius: promień oddziaływania każdego punktu danych w pikselach.opacity: przezroczystość mapy termicznej wyrażona jako liczba z zakresu od 0 do 1.
Przykład poniżej pokazuje niektóre dostępne opcje dostosowywania.