Warstwa mapy termicznej

Wybierz platformę: Android iOS JavaScript
  1. Omówienie
  2. Ładowanie biblioteki wizualizacji
  3. Dodawanie punktowanych danych
  4. Dostosowywanie warstwy mapy ciepła

Warstwa mapy termicznej umożliwia renderowanie map termicznych po stronie klienta.

Omówienie

Mapa termiczna to wizualizacja służąca do przedstawiania intensywności danych w punktach geograficznych. Gdy włączysz warstwę mapy cieplnej, na mapie pojawi się kolorowa nakładka. Domyślnie obszary o większej intensywności będą miały kolor czerwony, a obszary o mniejszej intensywności – zielony.

Wczytywanie biblioteki wizualizacji

Warstwa mapy termicznej należy do biblioteki google.maps.visualization i nie jest domyślnie wczytana. Klasy wizualizacji to samodzielna biblioteka, oddzielona od głównego kodu interfejsu Maps JavaScript API. Aby korzystać z funkcji zawartych w tej bibliotece, musisz ją najpierw wczytać za pomocą parametru libraries w adresie URL inicjalizacji 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 ciepła, musisz najpierw utworzyć nowy obiekt HeatmapLayer i przekazać mu dane geograficzne w postaci tablicy lub obiektu MVCArray[]. Dane mogą być obiektem LatLng lub WeightedLocation. Po uruchomieniu obiektu HeatmapLayer dodaj go do mapy, wywołując metodę setMap().

W tym przykładzie do mapy San Francisco dodano 14 punktów danych.

/* 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 punktów danych o wagach

Mapa ciepła może wyświetlać obiekty LatLng lub WeightedLocation, a także ich kombinację. Oba obiekty reprezentują pojedynczy punkt danych na mapie, ale obiekt WeightedLocation pozwala dodatkowo określić wagę tego punktu danych. Przypisanie wagi do punktu danych spowoduje, że WeightedLocation zostanie wyświetlony z większą intensywnością niż prosty obiekt LatLng. Waga jest skalą liniową, w której każdy obiekt LatLng ma domyślną wagę 1. Dodanie 1 elementu WeightedLocation z elementu {location: new google.maps.LatLng(37.782, -122.441), weight: 3} będzie miało taki sam efekt jak dodanie 3 elementów google.maps.LatLng(37.782, -122.441). W jednej tablicy możesz łączyć obiekty weightedLocation i LatLng.

Używanie obiektu WeightedLocation zamiast obiektu LatLng może być przydatne, gdy:

  • Dodawanie dużych ilości danych w jednym miejscu. Wyrenderowanie pojedynczego obiektu WeightedLocation o wadze 1000 będzie szybsze niż wyrenderowanie 1000 obiektów LatLng.
  • Zastosowanie podświetlenia danych na podstawie dowolnych wartości. Na przykład podczas wykreślania danych o trzęsieniach możesz używać obiektów LatLng, ale możesz też użyć obiektu WeightedLocation, aby zmierzyć siłę każdego trzęsienia na skali Richtera.
/* 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 ciepła

Możesz dostosować sposób wyświetlania mapy termicznej za pomocą tych opcji. Więcej informacji znajdziesz w dokumentacji HeatmapLayerOptions.

  • dissipating: określa, czy mapy ciepła znikają po powiększeniu. Jeśli dissipating ma wartość false, promień wpływu zwiększa się wraz z poziomem powiększenia, aby zapewnić zachowanie intensywności koloru w dowolnym miejscu geograficznym. Wartość domyślna to prawda.
  • gradient: gradient kolorów mapy ciepła określony jako tablica ciągów kolorów w CSS. Obsługiwane są wszystkie kolory CSS3, w tym RGBA, z wyjątkiem rozszerzonych kolorów nazwanych i wartości HSL(A).
  • maxIntensity: maksymalna intensywność mapy termicznej. Domyślnie kolory mapy ciepła są dynamicznie skalowane zgodnie z największym skupieniem punktów w każdym konkretnym pikselu na mapie. Ta właściwość umożliwia określenie stałego maksymalnego limitu. Ustawienie maksymalnej intensywności może być przydatne, gdy zbiór danych zawiera kilka wartości odstających o niezwykłej intensywności.
  • radius: promień wpływu każdego punktu danych w pikselach.
  • opacity: przezroczystość mapy termicznej wyrażona jako liczba z zakresu od 0 do 1.

Przykład poniżej przedstawia niektóre dostępne opcje dostosowywania.

Zobacz przykład