Warstwa mapy termicznej

Wybierz platformę: Android iOS JavaScript
  1. Omówienie
  2. Wczytywanie biblioteki wizualizacji
  3. Dodawanie ważonych punktów danych
  4. Dostosowywanie warstwy mapy cieplnej

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

Przegląd

Mapa termiczna to wizualizacja służąca do przedstawiania intensywności danych w punktach geograficznych. Gdy warstwa mapy termicznej jest włączona, na mapie pojawi się kolorowa nakładka. Domyślnie obszary o większej intensywności są oznaczone kolorem czerwonym, a obszary o mniejszej intensywności – kolorem zielonym.

Wczytaj bibliotekę wizualizacji

Warstwa mapy termicznej jest częścią biblioteki google.maps.visualization i nie jest wczytywana domyślnie. Klasy wizualizacji to samodzielna biblioteka, oddzielona od głównego kodu interfejsu Maps JavaScript API. Aby korzystać z funkcji zawartych w tej bibliotece, musisz najpierw wczytać ją za pomocą parametru libraries w adresie URL bootstrap 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 cieplnej, musisz najpierw utworzyć nowy obiekt HeatmapLayer i dostarczyć mu dane geograficzne w postaci tablicy lub obiektu MVCArray[]. Dane mogą być obiektem LatLng lub obiektem WeightedLocation. Po utworzeniu instancji 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 ważonych punktów danych

Mapa cieplna może renderować obiekty LatLng lub WeightedLocation albo ich kombinację. Oba obiekty reprezentują pojedynczy punkt danych na mapie, ale obiekt WeightedLocation umożliwia dodatkowe określenie wagi tego punktu danych. Zastosowanie wagi do punktu danych spowoduje, że element WeightedLocation będzie renderowany z większą intensywnością niż prosty obiekt LatLng. Waga jest skalą liniową, w której każdy obiekt LatLngma domyślną wagę 1 – dodanie pojedynczego obiektu WeightedLocation będzie miało taki sam efekt jak dodanie obiektu google.maps.LatLng(37.782, -122.441) 3 razy.{location: new google.maps.LatLng(37.782, -122.441), weight: 3} W jednej tablicy możesz łączyć obiekty weightedLocation i LatLng.

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ów LatLng.
  • podkreślanie danych na podstawie dowolnych wartości; Możesz na przykład użyć obiektów LatLng do wykreślania danych o trzęsieniach ziemi, ale do pomiaru siły każdego trzęsienia w skali Richtera możesz użyć obiektu WeightedLocation.
/* 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 cieplnej

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

  • dissipating: określa, czy mapy cieplne rozpraszają się podczas powiększania. Jeśli parametr dissipating ma wartość false, promień wpływu zwiększa się wraz z poziomem powiększenia, aby zapewnić zachowanie intensywności koloru w dowolnej lokalizacji geograficznej. Domyślna wartość to true.
  • gradient: gradient kolorów mapy cieplnej określony jako tablica ciągów znaków CSS kolorów. Obsługiwane są wszystkie kolory CSS3, w tym RGBA, z wyjątkiem rozszerzonych nazw kolorów i wartości HSL(A).
  • maxIntensity: maksymalna intensywność mapy termicznej. Domyślnie kolory mapy cieplnej są dynamicznie skalowane w zależności od największego zagęszczenia punktów w dowolnym pikselu na mapie. Ta właściwość umożliwia określenie stałej wartości maksymalnej. Ustawienie maksymalnej intensywności może być przydatne, gdy zbiór danych zawiera kilka wartości odstających o niezwykle wysokiej intensywności.
  • radius: promień wpływu każdego punktu danych w pikselach.
  • opacity: przezroczystość mapy termicznej wyrażona jako liczba z przedziału od 0 do 1.

Poniższy przykład przedstawia niektóre dostępne opcje dostosowywania.

Zobacz przykład