- 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
WeightedLocation
o 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
LatLng
przy 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.