- Omówienie
- Wczytywanie biblioteki wizualizacji
- Dodawanie punktów ważonych danych
- Dostosowywanie warstwy mapy termicznej
Warstwa termiczna umożliwia renderowanie map termicznych po stronie klienta.
Opis
Mapa termiczna to wizualizacja używana do określania intensywności danych w punktach geograficznych. Po włączeniu warstwy mapy termicznej na górze mapy pojawi się kolorowa nakładka. Domyślnie obszary o większej intensywności będą kolorowe, a obszary o niższej intensywności będą miały kolor zielony.
Wczytywanie biblioteki wizualizacji
Warstwa mapy termicznej jest częścią biblioteki google.maps.visualization
i nie jest domyślnie wczytywana. Klasy wizualizacji to samodzielna biblioteka niezależnie od głównego kodu interfejsu API JavaScript Map Google. Aby korzystać z funkcji zawartych w tej bibliotece, musisz go najpierw załadować za pomocą parametru libraries
w adresie URL rozruchu interfejsu API JavaScript Map Google:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>
Dodaj warstwę mapy termicznej
Aby dodać warstwę mapy termicznej, musisz najpierw utworzyć nowy obiekt HeatmapLayer
i udostępnić mu niektóre dane geograficzne w postaci tablicy lub obiektu MVCArray[]
. Dane mogą być obiektami LatLng
lub WeightedLocation
. Po utworzeniu obiektu HeatmapLayer
dodaj go do mapy, wywołując metodę setMap()
.
Poniższy przykład dodaje 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);
Dodawanie ważonych punktów danych
Mapa termiczna może renderować obiekty LatLng
lub WeightedLocation
albo ich kombinację. Oba obiekty reprezentują jeden punkt danych na mapie, ale obiekt WeightedLocation
umożliwia dodatkowo określenie wagi dla tego punktu danych. Zastosowanie wagi do punktu danych spowoduje, że token WeightedLocation
będzie renderowany z większą intensywnością niż prosty obiekt LatLng
. Waga jest liniowa, w której każdy obiekt LatLng
ma domyślną wagę 1 – dodanie jednego WeightedLocation
z {location: new google.maps.LatLng(37.782, -122.441), weight: 3}
przyniesie taki sam efekt jak dodanie google.maps.LatLng(37.782, -122.441)
3 razy.
Obiekty weightedLocation
i LatLng
możesz łączyć w jedną tablicę.
Używanie obiektu WeightedLocation
zamiast LatLng
może być przydatne, gdy:
- dodawanie dużych ilości danych w jednym miejscu; Renderowanie 1 obiektu
WeightedLocation
o wadze 1000 będzie szybsze niż wyrenderowanie 1000 obiektówLatLng
. - Wyświetlanie danych z wykorzystaniem dowolnych wartości. Możesz na przykład użyć obiektów
LatLng
do przedstawiania danych o trzęsieniu ziemi, ale warto użyć znacznikaWeightedLocation
, aby zmierzyć intensywność każdego trzęsienia ziemi w bogatej 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
Możesz dostosować sposób renderowania mapy termicznej, korzystając z tych opcji. Więcej informacji znajdziesz w dokumentacji HeatmapLayerOptions
.
dissipating
: określa, czy mapy cieplne rozkładają się po powiększeniu. Gdy rozkład jest fałszywy, promień wpływu zwiększa się razem z powiększeniem, aby utrwalić intensywność kolorów w danej lokalizacji geograficznej. Wartość domyślna to true.gradient
: gradient kolorów mapy termicznej określony jako tablica ciągów kolorów CSS. Wszystkie kolory CSS3, w tym RGBA, są obsługiwane (z wyjątkiem rozszerzonych nazw kolorów i HSL(A).maxIntensity
: maksymalna intensywność mapy termicznej. Domyślnie kolory mapy termicznej są skalowane dynamicznie według największej koncentracji punktów na poszczególnych pikselach na mapie. Ta właściwość pozwala określić stały limit. Ustawienie maksymalnej intensywności może być pomocne, gdy zbiór danych zawiera kilka odstawek o niezwykle dużej intensywności.radius
: promień wpływu na każdy punkt danych w pikselach.opacity
: przezroczystość mapy termicznej, wyrażona jako liczba z zakresu od 0 do 1.
Poniżej znajdziesz niektóre z dostępnych opcji dostosowywania.